javascript - CSS 注入(inject)在 content_scripts 中使用声明失败，但在通过注入(inject)的 JavaScript 加载时有效

Question

我注意到将 CSS 注入(inject)第三方页面的预期方式似乎无法正常工作。

相关的manifest.json部分:

  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/watch?v*"],
      "css": ["css/youTubeInject.css"],       
      "all_frames": true,
      "js": ["js/thirdParty/underscore.js", "js/thirdParty/jquery.js", "js/youTubeInject.js"]
    }   
  ]

在这里，我声明我想将一些 CSS 和一些 JavaScript 注入(inject)到与 YouTube 正则表达式匹配的页面中。

我的 JavaScript 注入(inject)一切正常。我的 CSS 根本没有注入(inject)。我已经三重检查了文件位置和名称。

youTubeInject.js 的顶部包含:

$(function () {

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

这会导致我的 CSS 正确加载，并且是解决该问题的有效方法。

有人对此问题有任何建议或我可以跟踪的错误吗？我们将不胜感激!

Answer 1

Chrome 在检查是否必须应用 list 文件中声明的 CSS 文件时，似乎会忽略查询字符串和位置片段。

http://www.youtube.com/watch?v=VIDEOID 被视为
http://www.youtube.com/watch。

您的匹配模式包含查询字符串的一部分，这会导致模式根本不匹配。

目前，“matches”的行为不一致:

Documentation    Pattern     : https://*.google.com/foo*bar    What it does: Matches (...) path starts with /foo and ends with bar"js" in manifest file    Checks if pattern matches scheme://host/path?querystring    Example     : https://google.com/foo?bar    Non-example : https://google.com/foobar?"css" in manifest file    Checks if pattern matches scheme://host/path    Example     : https://google.com/foobar?thisisignored    Non-example : https://google.com/foo?barIn all cases, the location fragment (aka location hash) is ignored.

此错误已在 2 年前报告过，但没有及时发现:

• Issue 68561: Manifest content_scripts 'matches' inconsistently applied

还有另一个错误，可能相关，它有更多的关注者:

• Issue 100106: Excluding domains from content scripts doesn't work for CSS files