刷新background.js与popup.js的信息 - 谷歌浏览器扩展

时间:2013-10-22 20:40:57

标签: javascript google-chrome-extension

我正在处理一些代码,这些代码从浏览器弹出窗口的文本框中获取输入,然后将该输入传递给background.js,以便使用该输入过滤网页。

如果我在开始时对background.js上的过滤进行硬编码,那么它可以工作(因为background.js在开始时运行一次),但是如果我将过滤放在一个函数中,该函数从弹出的文本框接收输入.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);


    });
}); 

background.js

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(); 

};

清单

{
  "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上,如果我将3行jQuery放在函数外面,并在“person”变量中加载硬代码并重新加载扩展,那么它将正确过滤网站。 StartFiltering绝对运行,它绝对得到了用户的“作者”输入,但我认为因为background.js只在开始时运行,它不知道更新文件?我不确定!一般来说JS和编码都是新手!

在这里搜索过但我找不到有同样问题的人!在此先感谢您的帮助!

编辑 - 已解决!

所以这就是我如何运作......

在ExpertSystem指出我使用background.js两次后,我清理了我的清单和文件系统,以便我有4个文件:background.js,content.js,popup.js和清单。在清单的content_scripts部分,我有jquery.js和content.js而不是之前的background.js。

每当用户在弹出的文本框中输入一个值时,我就会弹出pop.js向background.js发送消息,这很简单:

popup.js

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

我有background.js监听消息,然后如果消息类型与popup.js发送的消息类型匹配,那么它会将被阻止的作者的值存储在一个数组中(因为最终我计划保留一个列表作者过滤),并将数组作为消息发送:

background.js

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]);     
        }   
    }
}); 

仍然需要调整,但我现在有3个页面在沟通!

1 个答案:

答案 0 :(得分:4)

问题
您使用background.js作为后台页面(实际上是事件页面)和内容脚本。因此,当您访问 http://example.com/* 时,实际上有两个单独的background.js实例:一个注入网页,一个注入生成的背景页面。 (顺便说一句,启用开发者模式后,您可以通过 chrome:// extensions / 访问您的背景页。)

解决方案

  1. 请勿使用与背景页内容脚本相同的文件。
  2. popup.html传递消息到注入网页的内容脚本。
  3. 让内容脚本发挥其魔力(a.k.a.过滤)。
  4. 示例(〜未经测试的代码提醒〜):

    // In popup
    var author = ...;
    chrome.tabs.getCurrent(function(currentTab) {
      chrome.tabs.sendMessage(currentTab.id, {
        action: 'filter',
        person: author
      });
    });
    

    // In content script
    function filter(person) {
      $('a:contains(' + person + ')').
        closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').
        remove();
      ...
    }
    
    chrome.runtime.onMessage.addListener(function(msg) {
      if ((msg.action === 'filter') && msg.person) {
        filter(msg.person);
      }
    });