Question

I’m trying to make a very simple extension, that inserts this;

<style>

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

</style>

right before the body on any YouTube page I visit.
I tried using content script to inject the code above, first I tried putting the code in a CSS file called mycsscode.css and adding it to my manifest.json file like this:

"js": ["script.js"]

but I’m pretty sure nothing happened, since I viewed the source and couldn’t find the code anywhere.

Then I tried following the first method in answer to this question but I changed the script.js to script.css hoping it would work, but nope it didn’t so I’m stuck.

This are the codes I have so far;
manifest.json file:

{
  "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"]}
]
}

myscript.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);

Note: I’m almost an illiterate when it comes to coding lingo, so please put it in layman’s terms.

Answer 1

If you are just inserting/changing CSS, don’t even bother with that javascript. Change the manifest to:

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

Where myCSS.css is just:

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

Note:

1. Changed the matches value to work on actual YouTube URL’s — Which usually have the form: http://www.youtube.com/watch?...
2. Note the use of the !important keyword.
3. If you insist on programmatic injection, see “How to inject CSS using content script file in Chrome extension?”.

---

---

PS: If all you really want to do is alter a page’s look or CSS, the Stylish extension is the fastest easiest way to do that in either Chrome or Firefox.
There are also thousands of pre-made styles available at userstyles.org.