Javascript 在页面加载时，使用哪种类型的方法将脚本注入页面？

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

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

及

我不知道如何解决这些错误。它们似乎与权限错误有关，不允许我在后台页面运行chrome.tabs.executeScript。我不知道后台页面没有访问所有URL的权限，或者我在解释此错误消息时出错了？我的清单文件：

  "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"]
      }
    ],

---

发生此错误的原因是，不带tab ID参数的

chrome.tabs.executeScript

试图将代码插入当前活动选项卡

您的错误表明，在执行代码时，您打开了一个（未锁定的）Dev Tools窗口并将其聚焦。它算作活动选项卡

---

您需要将注意力集中在要将代码注入到的选项卡上，以使其正常工作。与开发工具对接将有助于解决这一问题。

我有点意识到这个错误。您需要包含注入脚本以进行进一步诊断的背景代码。不是图像。谢谢，补充。cssInject和cssRemove在inject.js中，根据变量的值在background.js的末尾调用一个。如果需要的话，我可以包含其余的代码，但我不确定它是否会太分散注意力/无关紧要。谢谢，但是如果我通过chrome://extensions 页面关闭开发工具后，它给了我同样的错误。这可能是因为我还打开了chrome开发编辑器（虽然没有聚焦）？另一个脚本background.js调用函数。每当触发该代码时，它都会应用于当前聚焦的选项卡，除非您提供选项卡ID。我想真正的问题是如何调用它。如果是与选项卡相关的事件，则需要传递ID.Hm。我想问题可能出在我使用的chrome版本上。如果我在当前版本的chrome中保存代码并重新加载未打包的扩展，那么除了当前选项卡控制台中的“UncaughtReferenceError:$未定义”之外，将不会出现任何错误。然而，chrome canary（我使用它在禁用所有其他扩展的情况下测试代码）给了我多个错误。在调用cssInject之前，我包括了“chrome.tabs.executeScript（{code:'alert（'hello'）；“}”）；”，并且该警报只在当前版本的chrome上出现。

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", "")'
  });
}