23

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.

Improve this question
4
  • 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. Commented Jan 20, 2015 at 13:10
  • 2
    P.S. The fact that you tagged the question with java shows that it's too early for you to ask an answerable question here. Commented Jan 20, 2015 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. Commented Jan 20, 2015 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.. 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? Commented Jan 20, 2015 at 14:48

1 Answer 1

Reset to default
55

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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!
Using that and a Mutation observer as suggested in this answer, I've been able to remove elements that are added after the page is loaded.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.