22

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.

Xan
  • 74,770
  • 16
  • 179
  • 206
Chris S
  • 422
  • 1
  • 4
  • 13
  • Sorry, this question is probably too broad for Stack Overflow. And asking for a tutorial off-site is immediately considered off-topic. To make a question that we can answer, do some more research; and when you have a more narrow implementation question - ask again. Please take a look at the following 2 help guides: [tour] and [what is considered on-topic](http://stackoverflow.com/help/on-topic). – Xan Jan 20 '15 at 13:10
  • 2
    P.S. The fact that you tagged the question with [tag:java] shows that it's too early for you to ask an answerable question here. – Xan Jan 20 '15 at 13:11
  • 1
    @Xan I could've added in some of the scripting i was looking at, but was mainly looking for a nudge in the right direction. Not sure why that would be considered against the rules? But whatever, I have had a very good answer below which really helps me get stuck into this. Thanks anyways. – Chris S Jan 20 '15 at 14:46
  • 1
    I absolutely agree that Marco's answer is good. I think most of the negative reaction comes from [tagging a JavaScript question with Java](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java).. As well as the fact that any question with "Could someone point me to a tutorial" is slammed as off-topic. Would it be okay if I edited your question to be more useful for others? – Xan Jan 20 '15 at 14:48

1 Answers1

54

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);
Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
  • 8
    Thanks! This was really helpful for removing a tag on a specific site at page load. Some minor changes I had to do, and other tips. I had to add the key `"manifest_version": 2,` to my manifest, otherwise Chrome would reject it. In the future, this may be higher, so check docs. I also had to wrap my script and matchers in arrays. `"matches": ["site"]`. Finally, I had to specify a wildcard for the URL path. Setting the root domain for the `matches` wasn't enough. `"matches": "http://somesite.com/somepage.html/*",` Thanks again! – Mr. Tim Jul 25 '17 at 19:13
  • 1
    Using that and a Mutation observer as suggested in [this answer](https://stackoverflow.com/questions/7434685/event-when-element-added-to-page), I've been able to remove elements that are added after the page is loaded. – Jerther Jun 10 '19 at 18:56
  • My question is if there is a keyboard shortcut that can be added to the manifest in order to trigger it without having to click it. I have set it to remove headers on sites I like to read, but sometimes need to navigate with the headers. A quick keyboard shortcut to toggle would be awesome. – nicklocicero Nov 07 '21 at 13:32