Today, I got my first Firefox extension published on the Firefox add-ons site. It's called ImgBlock. The extension is quite simple, it has two buttons: one to block images and another to restore them on a particular web page. It uses the content_scripts API to inject a script into web pages that blocks images by setting their display property to none.

I wanted to create this for my personal use and didn't want to actually publish it. But I found that I would need it signed anyway to avoid having to load it as a temporary add-on or changing the about:config settings. So, I decided to publish it on the Firefox add-ons site. Because why not? It's a simple extension that might be useful for others as well.

How It Works

The extension operates through a multi-layered approach to aggressively remove images from web pages while preserving small icons and logos. When you click the extension's toolbar button, it injects a content script that immediately deploys CSS rules to hide images before any JS processing begins. This prevents the flash of images you might otherwise see. The extension then analyzes every image element on the page, examining their class names, IDs, and dimensions to distinguish between icons (typically 24-32 pixels or smaller with keywords like "icon" or "logo") and content images.

For elements identified as content images, the extension employs multiple blocking strategies simultaneously, it hides them through CSS styling, replaces their source URLs with a tiny transparent pixel, clears lazy-loading attributes that websites use to defer image loading, and even removes video poster images and large SVG graphics. All original image sources are carefully preserved in custom data attributes, so restoring them is possible later.

I did some work on how to address modern websites constantly adding new images through JS frameworks and infinite scrolling, so ImgBlock deploys a MutationObserver that watches the entire page DOM for any newly added image elements or attribute changes that might re-enable blocked images. This observer catches dynamically loaded content in real-time and blocks it immediately using the same aggressive multi-strategy approach.

When you click the restore button, the extension reverses all modifications, it removes the blocking CSS, restores all original image URLs from the saved data attributes, re-enables lazy loading attributes, and disconnects the mutation observer. The extension also maintains state using browser storage to remember which tabs have blocked images, ensuring the UI buttons remain properly enabled or disabled when you reopen the popup.

While the extension is actually simple, I don't have high hopes for it to be widely used. It is more of a personal project that I wanted to share with others. I have been using it for a while now, and it works well for me. I also won't add any more features to it. I just wanted to have a simple extension that does one thing and does it well. I don't want to add more complexity to it. So if this is your use case, it would be a good fit for you. If not, then the extension is not for you. But it is open source, so you can always fork it and add your own features if you want.