javascript - Chrome 扩展如何将我的内容脚本注入(inject)所有 Facebook 页面

Question

我的 list 如下所示:

{
  "manifest_version": 2,

  "name": "Facebook Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "images/fbh.png",
    "default_popup": "fbh-popup.html"
  },

  "permissions": [
    "storage",
    "background",
    "tabs",
    "http://www.facebook.com/*",
    "https://www.facebook.com/*"
  ],

  "content_scripts": [
    {
      "matches": [
        "http://www.facebook.com/*", 
        "https://www.facebook.com/*"
      ],
      "js": ["js/jquery-1.9.1.min.js", "js/fbh-main.js"],
      "css": ["css/fbh-main.css"],
      "run_at": "document_end"
    }
  ],

  "background":{
    "persistent": true,
    "scripts": ["js/jquery-1.9.1.min.js","js/fbh-background.js"]
  }
}

我想在每次访问 Facebook 中的新页面时注入(inject)我的内容脚本。例如，如果我单击用户的个人资料，我想注入(inject)内容脚本。

在我的后台页面中，我有以下监听器:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    console.log(changeInfo);
    if (changeInfo.status === 'complete') {
        chrome.tabs.executeScript(null, {file: "js/fbh-main.js"});
    }
});

但是，这存在一些问题。首先，此函数尝试将我的内容脚本注入(inject)所有页面。我需要能够读取 list 权限。其次，如果我从 www.facebook.com 开始，内容脚本就会执行它应该执行的操作。但是，如果从那里单击“foo”的配置文件并转到 www.facebook.com/foo，则会注入(inject)内容脚本(如 console.log 消息所证明)，但它不会执行其应该执行的操作。我认为它被注入(inject)得太早了，因为如果我直接导​​航到 www.facebook.com/foo，内容脚本就会被加载并完成它的工作。

有更好的方法吗？

Answer 1

试试这个代码

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo,tab) {
    console.log(changeInfo);
    if ((tab.url.indexOf("http://www.facebook.com/") !=-1 || tab.url.indexOf("https://www.facebook.com/") !=-1) && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(tabId, {file: "js/fbh-main.js"});
    }
});

• chrome.tabs.executeScript(null, 将在当前窗口的事件选项卡中执行脚本，该脚本可能会在用户交互时发生变化，chrome.tabs.executeScript(tabId 将始终确保目标选项卡中的脚本注入(inject)。
• chrome.tabs.onUpdated.addListener 将为每个选项卡触发，添加过滤器 tab.url.indexOf("https://www .facebook.com/") 以确保脚本注入(inject)到 Facebook 页面中。

如果问题仍然存在，请分享您的 list 、内容脚本和相关文件