javascript - 使用什么类型的方法在页面加载时将脚本注入(inject)页面？

Question

所以我有一个 chrome 扩展，当在扩展中打开 popup.html 页面时，它会向当前选项卡注入(inject)一些 javascript。我试图让扩展在加载页面时注入(inject)代码，但我不确定要采取什么路径。

但是，当我尝试在后台页面上运行 background.js 时，chrome 给出了这些错误:

和

我不知道如何解决这些错误。它们似乎与不允许我通过后台页面运行 chrome.tabs.executeScript 的权限错误有关。我不知道后台页面无法访问所有网址，或者我错误地解释了此错误消息？我的 list 文件:

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

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

  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },

  "permissions": [
    "contextMenus",
    "tabs",
    "contextMenus",
    "storage",
    "webNavigation",
    "<all_urls>"

  ],

  "web_accessible_resources": [
    "js/jquery-2.1.3.min.js"
  ],

  "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["js/jquery-2.1.3.min.js", "js/inject.js"]
      }
    ],

编辑:后台代码:

function cssInject(){
  chrome.tabs.executeScript({
    code: '$("*").css("font-family", "Courier", "important"); $("*").css("font-size", "18pt", "important"); $("*").css("background-color", "#fbfbfb", "important"); $("*").css("line-height", "1.5", "important")'
  });
}
function cssRemove(){
  chrome.tabs.executeScript({
    code: '$("*").css("font-family", ""); $("*").css("font-size", ""); $("*").css("background-color", ""); $("*").css("line-height", "")'
  });
}

Answer 1

发生此错误的原因是不带选项卡 ID 参数的 chrome.tabs.executeScript 试图将代码注入(inject)到当前事件选项卡中。

您的错误表明您在执行该代码时打开了一个(未固定的)开发工具窗口并聚焦。它算作事件选项卡。

您需要专注于要注入(inject)代码的选项卡才能使其正常工作。对接您的开发工具将对此有所帮助。