3

我正在尝试将 JS 和 CSS 注入 YouTube 页面。我可以注入 JS，但在注入 CSS 时看不到任何效果。我做错了什么还是 YouTube 以某种方式限制了我？

这是我的 manifest.json 的相关部分：

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

我看到所有的 js 都正确注入了，但对 css 没有影响。我的 CSS 似乎根本没有注入：

在此处输入图像描述

更新：

好奇.. 注入此代码有效，但我也尝试将 '!important' 应用于所有 css 属性。这两种方法具有不同的效果，与 StackOverflow 上提供的其他解决方案形成鲜明对比。

我在这方面取得了更大的成功，但仍然对为什么更简洁的定义失败感到好奇：

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

1 回答 1

0

无需使用!important，只需确保您的 css 具有更高的特异性来覆盖已经存在的内容。如果您查看body's 样式，您应该会看到如下内容：在此处输入图像描述

这表明正在应用 css，只是被覆盖。将您的CSS更改为类似

body.ltr{
  background-color: #000;
}

会工作得很好。

编辑：最重要的是，问题实际上可能出?在匹配模式中。对我来说http:///www.youtube.com/watch*有效而http:///www.youtube.com/watch?*无效。至于为什么这会影响注入css，但不影响js我不知道。

于 2013-03-27T05:37:42.557 回答