使用chrome扩展程序进行CSS注入

Question

所以我一直在使用chrome扩展程序重新设计一些网站，仅供我自己使用。

我的目标是将css注入网站，以便将其用作主要的css，或者它将取代一些主要的css代码。

我所拥有的是休息：

JS：

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('styles.css');
(document.head||document.documentElement).appendChild(style);

清单文件：

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "https://www.youtube.com/*"],
    "content_scripts": [
    {
        "matches": [ "https://www.youtube.com/*"],
        "js": ["inject.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["styles.css"]
}

当然我的css文件名为 styles.css

我遇到的问题是，一旦我加载页面，它就会以旧样式加载，然后就在它加载我的自定义css之前点击道路，然后更改网站的样式。我怎样才能使网站的样式在开始加载内容后立即更改，以便不会看到任何更改。

有一个gif图片可以显示我的意思：

Answer 1

您不需要进行编程注入（默认情况下会发生at "run_at": "document_idle"，这正是您的问题）。

只需将您的清单更改为：

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "https://www.youtube.com/*"],
  "content_scripts": [
    {
        "matches": [ "https://www.youtube.com/*"],
        "css": ["styles.css"],
        "all_frames": true
    }
  ]
}

如果您仍需要以编程方式执行此操作，则需要添加"run_at": "document_start"