1

I'm building a google chrome extension to block the recommended videos in YouTube. I created a stylesheet to block the recommended videos on the home screen, which works but this also hides the thumbnails in the search results page when I search something in the search box.

I tried creating another stylesheet just for the results page to show everything as normal, but every time that I type something in the search box (home page) and search, the results stylesheet doesn't come into effect. It's only after I refresh the results page again, does the changes take place.

My stylesheet that's only supposed to change the youtube home page keeps overriding my other stylesheet when it's not supposed to.

Are my specific match patterns wrong? Or is this something to do with YouTube?

Here is my code:

{
  "css": ["results.css"],
  "matches": ["https://www.youtube.com/results?search_query"],
  "run_at": "document_start",
  "js": ["results.js"]
},

{
  "css": ["home.css"],
  "matches": ["https://www.youtube.com/"],
  "js": ["results.js"]

},

Edit: I looked at the answers describing the history.pushState() function and how it might be causing the problem. I changed my code to the following:

manifest.json

    {
  "css": ["results.css"],
  "matches": ["https://www.youtube.com/results?search_query"],
  "js": ["content.js"]
},

{
  "css": ["home.css"],
  "matches": ["https://www.youtube.com/"],
  "js": ["content.js"]

},

content.js

window.onpopstate = function (event) {
  chrome.extension.sendMessage("Rerun script");
};

history.pushState({
  page: 1
}, "title 1", "searched");

background.js

    chrome.extension.onMessage.addListener(function(message,sender, callback) {
  if (message == "Rerun script") {
    chrome.tabs.executeScript({
      file: "results.js"
    }, function() {
      console.log("completed");
    });
  }
});
colinified101
  • 39
  • 1
  • 3
  • 1
    The problem is that the URL is changed using `history.push(..)` and because of that, your content script for that URL is not injected, you can see how to fix that in the answers to this question: https://stackoverflow.com/questions/13806307/how-to-insert-content-script-in-google-chrome-extension-when-page-was-changed-vi – Titus Dec 10 '20 at 05:09
  • I read the answers, but am still not getting the right result. I have edited my question with what I have. – colinified101 Dec 10 '20 at 19:14
  • The `chrome.tabs.executeScript(..)` call is incorrect, it should be something like `chrome.tabs.executeScript(sender.tab.id, { file: "results.css" })`. – Titus Dec 10 '20 at 19:44

0 Answers0