通过谷歌浏览器内容脚本注入 CSS。 Manifest.json 失败，但使用 javascript 成功？

Question

我正在将一些 JavaScript 和 CSS 注入 YouTube 页面。 The documentation 似乎表明这应该是可能的。我做错了什么吗？这是YouTube的事情吗？还是内容脚本中的注入被破坏了？

  "content_scripts": [
    {
      "matches": ["http://www.youtube.com/watch?v*"],
      "css": ["ChromeExtension/css/inject.css"],
      "js": ["Shared/js/thirdParty/jquery.js", "ChromeExtension/js/inject.js"]
    }
  ],

  "web_accessible_resources": [
    "ChromeExtension/css/inject.css",
    "ChromeExtension/icon.png"
  ]

这是我的相关 manifest.json。

现在，当我通过 content_script 请求了 inject.css 时，我什至在 youtube.com 上都没有看到请求。但是，如果我将我的 CSS 文件定义为 web_accessible_resource，那么我可以通过我的 javascript 加载我的 CSS，如下所示：

var link = document.createElement('link');
link.href =  chrome.extension.getURL('ChromeExtension/css/inject.css');
link.rel = 'stylesheet';
document.documentElement.insertBefore(link);

有什么明显的原因吗？

Answer 1

尽量避免内容脚本中的相对路径，将所有 JS 和 CSS 代码放在根路径中并尝试

"content_scripts": [
    {
      "matches": ["http://www.youtube.com/watch?v*"],
      "css": ["inject.css"],
      "js": ["jquery.js", "inject.js"]
    }
]

如果您有很多文件并且不想干扰文件夹结构，您可以在加载时使用编程注入：

例如：

onload = function (){
    chrome.tabs.executeScript(null, {file: "path"});
}