Chrome app or extension to remove page element?

Question

I need to create a Chrome extension to control HTML on some pages.

Basically, I need to do to remove <div class="feedmain">inside the page. Currently, I can remove this <div>using the developer tools, but the element obviously reloads when I reload the page, so I would like to develop an extension that does this automatically for me.

So, I would like to know, if possible, and an overview of how this can be done in the extension.

Answer 1

Yes, absolutely, it is possible and quite easy to do: all you need to do is create an extension with the contents of the script that will be entered on this particular page and will delete the item for you.

To do what you want, you need:

• Create a simple empty Chrome extension (see here for the official guide) with the file manifest.json.

• Specify a field "content_scripts"in manifest.jsonand declare the script you want to enter. Something like that:

  "content_scripts": [
      {
          "matches": "http://somesite.com/somepage.html",
          "js": "/content_script.js"
      }
  ]
  

  Take a look here to find out how content scripts work.

• Create content_script.jsone that will delete the item for you. This script will contain mainly the following two lines:

  var element = document.querySelector('div.feedmain');
  element.parentElement.removeChild(element);