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

Question

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

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

和

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

  "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

发生此错误是因为 chrome.tabs.executeScript 没有选项卡 ID 参数试图在 当前活动选项卡 中注入代码。

你的错误表明你有一个（未停靠的）开发工具 window 在执行该代码时打开并聚焦。它算作活动标签。

您需要将注意力集中在要将代码注入到的选项卡上，这样它才能正常工作。对接您的开发工具将对此有所帮助。

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

What type of method to use for injecting script into page on page load?

html

javascript

jquery

google-chrome

google-chrome-extension