javascript - 为 chrome 扩展注入(inject) CSS

Question

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

感谢您的帮助! :)

Answer 1

好吧，您有 2 个选项，编程注入(inject)和内容脚本。这些名字听起来可能真的很复杂和可怕，但别担心 ;)

Content Scripts将在页面加载时自动注入(inject)。您需要做的(除了编写脚本)就是在您的 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 时注入(inject) CSS

您的另一个选择是使用 Programmatic Injection .如果您只想有时注入(inject)代码，通常是从后台页面注入(inject)代码，这会很有用。为此，您可以使用 insertCSS() .在这种情况下，您需要 host permission在你的 list 中:

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

祝你好运!