javascript - Chrome 扩展程序可将代码注入(inject)到某些预定义的 URls 中

Question

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 代码注入(inject)到 URL 包含一些预定义字符串的页面中。 1.我希望这段代码会显示在所有页面中。当选项卡更新时，应再次检查 url。 2. 无需任何用户点击即可运行扩展。没有弹出窗口。

Answer 1

程序化注入(inject)

如果内容脚本是从后台页面脚本注入(inject)的，则 list 的 "permissions"应包含 allowed urls ，或"<all_urls>"允许在所有支持的 url 上进行注入(inject)。当开发带有后台页面的扩展时，您必须使用 the background page debugger您会立即看到缺少权限的错误。

声明式注入(inject)

如果唯一要改变的是 CSS 样式，则根本不需要后台脚本或任何 js!
声明 CSS content script在匹配 URL 上运行的 manifest.json 中:

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

和 style.css:

body {
    background-color: yellow !important;
}