Chrome扩展程序如何将我的内容脚本注入所有Facebook页面

时间:2013-02-16 18:45:23

标签: javascript google-chrome-extension

我的清单看起来像这样:

{
  "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内的新页面时注入我的内容脚本。例如,如果我点击用户的个人资料,我想要注入内容脚本。

在我的后台页面中,我有以下听众:

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

然而,这有几个问题。首先,此函数尝试将我的内容脚本注入所有页面。我需要能够读取清单权限。其次,如果我从www.facebook.com开始,内容脚本会执行它应该做的事情。但是,如果,从那里,我点击“foo”的配置文件并转到www.facebook.com/foo,内容脚本被注入(由console.log消息证明),但它没有做它应该做的事情。我认为它注入太快了,因为如果我直接导​​航到www.facebook.com/foo,内容脚本就会被加载并完成它的工作。

有更好的方法吗?

2 个答案:

答案 0 :(得分: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将始终确保在目标标签中注入脚本。
  • chrome.tabs.onUpdated.addListener 会针对每个标签触发,添加过滤器 tab.url.indexOf("https://www.facebook.com/") 以确保在面书页面中注入脚本。

如果问题仍然存在,则共享您的清单,内容脚本和相关文件

答案 1 :(得分:0)

如果您的脚本很快就会执行,您可以随时使用jQuery的$.(your code here);

编辑:对于自动更新问题,您只需在内容脚本中添加一个侦听器

即可
document.addEventListener("DOMSubtreeModified", function(event){
    //something on the page has changed
});