为chrome扩展注入CSS

Inject CSS for chrome extension

本文关键字：CSS 注入 扩展 chrome      更新时间：2023-09-26

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

谢谢你的帮助！：）

好吧，您有两个选项，编程注入和内容脚本。这些名字听起来可能非常复杂和可怕，但别担心；）

内容脚本将在加载页面时自动注入。你所需要做的（除了编写脚本）就是在你的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

您的另一个选择是使用编程注入。如果您只想在某些时候（通常是从后台页面）注入代码，这可能很有用。为此，您可以使用insertCS（）。在这种情况下，您需要在清单中获得主机权限：

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

祝你好运！

相关文章：