Replacing images on a page with the chrome extension

Question

I am trying to write a chrome extension that will replace some images at https://www.ourgroceries.com/ with my own images.

In particular, I want to replace the top buttons "overview-label", "function labels", faq-label "," your-lists-label "," download-label ".

I tried using this code to replace the browse tag, but it did not work:

window.onload = function () {document.getElementById("overview-label").style.backgroundImage="url('http://www.321space.com/content/space_telescope/thumb_small/opo0317d.jpg')";};

I tried to use this script locally and it worked, which means that there may be a script on this website that prevents these images from changing, but I could not find it.

Any ideas how to replace these images?

Answer 1

What you need is an extension like Stylish or write your own using contentscripts

"content_scripts": [
  {
    "matches": ["https://www.ourgroceries.com/*"],
    "css": ["mystyles.css"]
  }
],