Building an add-on to hide a <div> block on an HTML page

Question

There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.

I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.

Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?

Answer 1

Right, I got it:

Using just a standalone Firefox Add-On use the following code:

exports.main = function() {

    var pageMod = require("page-mod");
        pageMod.PageMod({
        include: "*.ca",
        contentScriptWhen: 'end',
        contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
    });
};

Just replace DIVID with whatever you want.

Similarly, in Greasemonkey, just add this to the script:

document.getElementById('DIVID').style.visibility='hidden';

The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!

Answer 2

1. Install the latest FF
2. Install the latest AdBlock Plus
3. Go to the website right click on specific element and then Inspect Element(Q)
4. Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule