Chrome扩展程序将代码注入某些预定义的URls

时间:2016-08-30 17:30:55

标签: javascript google-chrome-extension

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {
    chrome.tabs.query({active: true,lastFocusedWindow: true}, function(tabs) {
     var tab = tabs[0];
     if(tab.url.indexOf("local")>-1){
        function(tab){
        alert("Test");
        chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='yellow'"});
        console.log("injected");
     }
}
      }

  }
});

这是manifest.json:

{
  "manifest_version": 2,
  "name": "Environment Locator",
  "description": "My Extension",
  "version": "1.0",

  "permissions": [
    "tabs"
      ],

  "background": {
    "scripts": ["background.js"] ,
     "persistent": false
  }
}

我想使用chrome扩展将一些js代码注入其URL包含一些预定义字符串的页面。 1.我希望这些代码将显示在所有页面中。更新选项卡时,应再次检查URL。 2.无需任何用户点击即可运行扩展。没有弹出。

1 个答案:

答案 0 :(得分:2)

如果在后台页面脚本中注入了内容脚本,则清单"permissions"应包含allowed urls"<all_urls>"以允许在所有支持的网址上注入。使用后台页面开发扩展程序时,必须使用the background page debugger,否则会立即看到错误消息的错误。

或者,如果唯一需要更改的是CSS样式,则根本不需要背景页面。
在manifest.json中声明content script,该this tutorial在url的路径部分中的*local*页面上运行:

"content_scripts": [{
    "matches": ["*://*/*local*"],
    "css": ["style.css"],
    "run_at": "document_start"
}],

和style.css:

body {
    background-color: yellow !important;
}