Chrome App/extension to remove a page element? [closed]

Question

I need to create a Chrome Extension to manipulate the HTML on some pages.

Basically, what I need to do is to remove a <div class="feedmain"> inside a page. I'm currently able to remove that <div> using the developer tools, but the element is obviously reloaded when I reload the page, so I would like to develop some extension that does this for me automatically.

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

Answer 1

Yes, absolutely, that's possible and pretty easy to do: all you need is a content script that will be injected into that particular page to remove the element for you.

To do what you want you'll need to:

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

2. Specify the "content_scripts" field in the manifest.json, and declare the script you want to inject. Something like this:

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

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

3. Create a content_script.js, which will delete the element for you. This script will basically only contain the following two lines:

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