css - 如何使用内容脚本将 <style> 注入(inject)带有 Chrome 扩展的页面的头部

Question

我正在尝试做一个非常简单的扩展，插入这个；

<style>

span.watch-view-count:hover {opacity: 1;}
span.watch-view-count {opacity: 0;}

</style>

就在我访问的任何 YouTube 页面上的正文之前。 我尝试使用内容脚本注入(inject)上面的代码，首先我尝试将代码放入名为 mycsscode.css 的 CSS 文件中，然后将其添加到我的 manifest.json 文件中，如下所示:

"js": ["script.js"]

但我很确定什么都没发生，因为我查看了源代码但在任何地方都找不到代码。

然后我尝试按照第一种方法来回答这个 question但我将 script.js 更改为 script.css 希望它能工作，但没有，所以我被卡住了。

这是我目前的代码； list .json 文件:

{
  "name": "Youtube views Hider",
  "version": "1.0",
  "manifest_version": 2,

  "description": "A plain text description",

  "permissions": [
    "*://youtube.com/*/",
    "tabs"],

  "content_scripts": [{
    "matches": ["*://youtube.com/*/"],
    "js": ["myscript.js"]}
]
}

我的脚本.js:

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.css");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

注意:说到编码术语，我几乎是个文盲，所以请通俗易懂。

Answer 1

如果您只是插入/更改 CSS，甚至不必为那个 javascript 而烦恼。将 list 更改为:

{
    "name":             "Youtube views Hider",
    "version":          "1.0",
    "manifest_version": 2,
    "description":      "A plain text description",
    "content_scripts": [ {
        "matches":      ["*://*.youtube.com/*"],
        "css":          ["myCSS.css"]
    } ]
}

myCSS.css 只是:

span.watch-view-count       {opacity: 0 !important;}
span.watch-view-count:hover {opacity: 1 !important;}

注意:

1. 更改了 matches 值以在实际 YouTube URL 上工作 -- 通常具有以下形式:http://www.youtube.com/watch？ ...
2. 注意 !important 关键字的使用。
3. 如果您坚持程序化注入(inject)，请参阅 "How to inject CSS using content script file in Chrome extension?" .

---

---

PS:如果您真正想做的只是更改页面的外观或 CSS，the Stylish extension是在 Chrome 或 Firefox 中执行此操作的最快最简单的方法。
在 userstyles.org 上还有数以千计的预制样式。 .