0

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

相关 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 注入到与 YouTube 正则表达式匹配的页面中。

我的 JavaScript 都可以正常注入。我的 CSS 根本没有注入。我已经三重检查了文件位置和名称。

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 正确加载,并且是该问题的有效解决方法。

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

4

1 回答 1

3

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

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

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

目前,“匹配”的行为不一致:

文档
    模式:https://*.google.com/foo*bar
    它的作用:匹配 (...) 路径以 /foo 开头并以 bar 结尾
清单文件中的“js”
    检查模式是否匹配 scheme://host/path?querystring
    示例:https://google.com/foo?bar
    非示例:https://google.com/foobar?
清单文件中的“css”
    检查模式是否匹配 scheme://host/path
    示例:https://google.com/foobar?thisisignored
    非示例:https://google.com/foo?bar
在所有情况下,位置片段(又名位置哈希)都会被忽略。

此错误已在 2 年前报告,但没有赶上:

还有另一个可能相关的错误,它有更多的追随者:

于 2013-07-03T23:28:11.617 回答