Javascript 使用popup.js中的信息刷新background.js-谷歌浏览器扩展

我正在编写一些代码，从浏览器弹出窗口的文本框中获取输入，然后将该输入转发到background.js，以便使用该输入过滤网页

如果我在开始时硬编码background.js上的过滤，那么它会工作（因为background.js在开始时只运行一次），但是如果我将过滤放在一个函数中，该函数从popup.js中的文本框接收输入，那么它就不工作了

popup.js

$(document).ready(function(){
    $('#zim').click(function(){

    // Get User Input in Text Box
    var author = document.getElementById('author').value;

    // Pass author variable to background.js
    chrome.extension.getBackgroundPage().StartFiltering(author);


    });
}); 

function StartFiltering(person){

    console.log("Starting Filtering");
    console.log("person: " +person);

    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove(); 

};

chrome.runtime.sendMessage({type: "new author", author:author});

chrome.runtime.onMessage.addListener(
    function(request,sender,sendResponse) {

        if(request.type == "new author") {
            blocked.push(request.author) 
        }

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

           chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})

        });
});

background.js

$(document).ready(function(){
    $('#zim').click(function(){

    // Get User Input in Text Box
    var author = document.getElementById('author').value;

    // Pass author variable to background.js
    chrome.extension.getBackgroundPage().StartFiltering(author);


    });
}); 

function StartFiltering(person){

    console.log("Starting Filtering");
    console.log("person: " +person);

    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove(); 

};

chrome.runtime.sendMessage({type: "new author", author:author});

chrome.runtime.onMessage.addListener(
    function(request,sender,sendResponse) {

        if(request.type == "new author") {
            blocked.push(request.author) 
        }

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

           chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})

        });
});

清单

{
  "name": "Filter",
  "description": "Filter out authors on homepage",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["jquery.js","background.js"],
    "persistent": false
  },
  "icons": {
      "128": "128.png"
   },
  "browser_action": {
    "default_title": "Filter",
    "default_icon": "filter.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2,
   "content_scripts": [
    {
      "js": ["jquery.js","background.js"],
      "matches": [ "http://example.com/*"]
    }
  ]
}

在background.js上，如果我将jQuery的3行代码放在函数外部，并将硬代码放在“person”变量中，然后重新加载扩展名，那么它将正确过滤网站。StartFiltering肯定会运行，它肯定会从用户那里获得“author”输入，但我认为因为background.js只在开始时运行，所以它不知道更新文件？我不确定！对于JS和一般的编码来说是相当新的

我已经在这里搜索过了，但我找不到有同样问题的人！提前感谢您的帮助

编辑-已解决

这就是我如何让它工作的

在ExpertSystem指出我使用background.js两次之后，我清理了我的清单和文件系统，这样我就有了4个文件：background.js、content.js、popup.js和清单。在清单的我的content_脚本部分，我使用了jquery.js和content.js，而不是像以前那样使用background.js

每当用户在弹出文本框中输入值时，我让popup.js向background.js发送一条消息，操作非常简单，如下所示：

popup.js

$(document).ready(function(){
    $('#zim').click(function(){

    // Get User Input in Text Box
    var author = document.getElementById('author').value;

    // Pass author variable to background.js
    chrome.extension.getBackgroundPage().StartFiltering(author);


    });
}); 

function StartFiltering(person){

    console.log("Starting Filtering");
    console.log("person: " +person);

    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove(); 

};

chrome.runtime.sendMessage({type: "new author", author:author});

chrome.runtime.onMessage.addListener(
    function(request,sender,sendResponse) {

        if(request.type == "new author") {
            blocked.push(request.author) 
        }

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

           chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})

        });
});

我让background.js监听消息，如果消息类型与popup.js发送的消息类型匹配，那么它会将被阻止作者的值存储在一个数组中（因为我最终计划保留一个要筛选的作者列表），并将数组作为消息发送：

background.js

$(document).ready(function(){
    $('#zim').click(function(){

    // Get User Input in Text Box
    var author = document.getElementById('author').value;

    // Pass author variable to background.js
    chrome.extension.getBackgroundPage().StartFiltering(author);


    });
}); 

function StartFiltering(person){

    console.log("Starting Filtering");
    console.log("person: " +person);

    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove(); 

};

chrome.runtime.sendMessage({type: "new author", author:author});

chrome.runtime.onMessage.addListener(
    function(request,sender,sendResponse) {

        if(request.type == "new author") {
            blocked.push(request.author) 
        }

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

           chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})

        });
});

然后我让content.js监听消息：

content.js

chrome.runtime.onMessage.addListener(function(msg,sender){
    if (msg.filter == "author"){

        for (var i=0;i<msg.blocked.length;i++){
            startFiltering(msg.blocked[i]);     
        }   
    }
}); 

chrome.runtime.onMessage.addListener（函数（msg，sender）{
如果（msg.filter==“作者”）{
对于（var i=0；i问题

您正在使用
background.js
作为背景页面（实际上是事件页面）和内容脚本。因此，当您访问时，实际上有两个独立的
background.js
实例：一个注入到网页中，另一个在生成的背景页面中。（顺便说一句，您可以访问chrome://extensions/一旦启用开发人员模式。）

解决方案

不要使用与背景页面和内容脚本相同的文件
从
popup.html
向注入网页的内容脚本传递消息
让内容脚本发挥其魔力（又称过滤）
示例（~untested code alert~）：


请发布您清单的内容。使用清单编辑原始帖子！谢谢！您要更新什么页面？背景页面？？？用户在popup.html页面中键入值，该值将发送到background.js，该值将用该值更新，然后应用永久删除“过滤器”通过jquery，无论何时你进入*它都会过滤掉网页中的元素。感谢这里的帮助！意识到我使用了两个background.js文件是非常宝贵的！一旦我清理了这些文件，我就能够得到一个有效的解决方案。我将更新OP以显示我的解决方案，我不得不对代码进行一些修改，以获得我想要的行为泰德，但我最终还是做到了！总是很乐意帮忙：）嘿，我知道这是很久以前的事了，但如果你真的喜欢答案，我还是接受投票：）