为 Chrome 扩展注入 CSS

我对 Chrome 扩展开发还很陌生。我知道可以注入CSS。但是是否可以为特定的 URL 注入它。例如，每当我访问 google.com 时，CSS 就会被注入。

谢谢您的帮助！ :)

那么，您有 2 个选择，编程注入和内容脚本。这些名字可能听起来非常复杂和可怕，但不用担心；）

内容脚本 https://developer.chrome.com/extensions/content_scripts.html加载页面时会自动注入自己。您需要做的就是（除了编写脚本之外），在您的manifest.json 中指定如下内容：

{
  "name": "My extension",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://www.google.com/"], //where your script should be injected
      "css": ["css_file.css"] //the name of the file to be injected
    }
  ]
}

每次加载 google.com 时都会注入 CSS

您的另一个选择是使用程序化注入 https://developer.chrome.com/extensions/content_scripts.html#pi。 如果您只想有时（通常是从后台页面）注入代码，这可能很有用。为此，您可以使用插入CSS() https://developer.chrome.com/extensions/tabs.html#method-insertCSS。在这种情况下，你需要一个主机权限 https://developer.chrome.com/extensions/permission_warnings在你的清单中：

{
  "name": "My extension",
  "version": "1.0",
  "manifest_version": 2,
  "background_page": "myBackground.html", //if you want to inject it from a background page
  "permissions": [
    "background", //if you want to inject it from a background page
    "http://www.google.com/" // host permission to google
  ]
}

祝你好运！