3

我正在编写一些代码，该代码从浏览器弹出窗口中的文本框中获取输入，然后将该输入中继到 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);


    });
});

背景.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。

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

popup.js

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

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

背景.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 监听消息：

内容.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 页通信！

4

1 回答 1

4

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

解决方案

  1. 不要使用与背景页面和内容脚本相同的文件。
  2. 从popup.html传递消息到注入网页的内容脚本。
  3. 让内容脚本发挥它的魔力（也称为过滤）。

示例（〜未经测试的代码警报〜）：

// 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);
  }
});
于 2013-10-23T21:00:43.087 回答