Create a JavaScript Bookmarklet That Cleans Up Blog Pages

Ever landed on a blog page only to be swarmed by popups, sticky sidebars, and jittery ads? While browser extensions like Reader Mode can help, sometimes you need a lightweight, one-click solution that works anywhere. Enter JavaScript bookmarklets—tiny snippets of code saved as bookmarks that let you manipulate web pages on the fly.

In this tutorial, we’ll walk you through building a robust JavaScript bookmarklet that strips away common distractions from article pages. By the end, you’ll have a one-click tool for cleaner, more focused reading—no installations required.

1. What Is a JavaScript Bookmarklet?

A JavaScript bookmarklet is a regular browser bookmark, but instead of linking to a URL, it executes JavaScript code on the current page. This is immensely useful for automating small tasks like cleaning up a UI, scraping data, or highlighting text.

To create one, you simply prepend your JavaScript code with javascript: and paste it into a bookmark’s URL field. For example:

javascript:alert('Hello world!');

Now let’s start developing our page-cleanup bookmarklet.

2. Identifying Common Distractions

Most news and blog sites share some design patterns: sidebars for navigation or ads, popups for newsletter subscriptions, and banners for cookies or promotional messages. These often have well-named class names like .sidebar, .popup, .ad, or .overlay.

A cleanup script can use document.querySelectorAll() to target these elements and hide them. Here’s a quick proof-of-concept:

(function() {
  const selectors = ['.sidebar', '.popup', '.overlay', '.ad', '#cookie-banner'];
  selectors.forEach(selector => {
    document.querySelectorAll(selector).forEach(el => el.style.display = 'none');
  });
})();

This hides all matching elements by setting their display to none. We’ll expand on this to safely inject it via a bookmark and make it resilient across sites.

3. Writing a Robust Cleanup Function

To make our bookmarklet effective across a variety of pages, we should:

Use a longer list of common distraction selectors
Be resilient to pages that don’t have JQuery or modern DOM libraries
Apply default styling to enlarge the article content area

Here’s the core function that will do the cleaning:

function cleanPage() {
  const selectorsToRemove = [
    '.sidebar',
    '.adsbygoogle',
    '.popup',
    '.overlay',
    '.footer',
    '.header',
    '#newsletter',
    '.cookie-banner',
    '.share-buttons',
    '.modal',
    '[class*="advert"]',
    '[id*="ads"]'
  ];

  selectorsToRemove.forEach(selector => {
    try {
      document.querySelectorAll(selector).forEach(el => el.remove());
    } catch (e) {
      console.warn(`Error removing selector ${selector}:`, e);
    }
  });

  // Maximize main content
  const mainContent = document.querySelector('article, main, .post, .content');
  if (mainContent) {
    mainContent.style.width = '90%';
    mainContent.style.margin = 'auto';
    mainContent.style.fontSize = '1.2em';
    document.body.style.background = '#f9f9f9';
  }
}

This function removes distractions and centers the main content block. It improves readability without hard-coding for a specific site.

4. Wrapping as a Bookmarklet

To run this in a bookmark, we need to:

Wrap the function in an IIFE (Immediately Invoked Function Expression)
Minify the code to a single line
Prefix it with javascript:

Here’s a minified version of the above as a bookmarklet:

javascript:(function(){const s=['.sidebar','.adsbygoogle','.popup','.overlay','.footer','.header','#newsletter','.cookie-banner','.share-buttons','.modal','[class*="advert"]','[id*="ads"]'];s.forEach(sel=>{try{document.querySelectorAll(sel).forEach(el=>el.remove())}catch(e){console.warn(`Error removing ${sel}`,e)}});const m=document.querySelector('article, main, .post, .content');if(m){m.style.width='90%';m.style.margin='auto';m.style.fontSize='1.2em';document.body.style.background='#f9f9f9';}})();

To use it:

Copy the minified code
Right-click your bookmarks bar → “Add page”
For URL, paste the JavaScript
Name it e.g., “Reader Clean”

Now any time you’re overwhelmed by clutter, click the bookmark for a calm reading layout.

5. Tips, Edge Cases, and Optimizations

Here are some additional considerations for advanced users:

Use MutationObserver to auto-remove dynamically loaded ads (beyond basic use cases).
Persist styles in case the site uses shadow DOM or resets your customizations via JS/CSS.
Test on target sites before relying on it—some sites may have non-standard layouts or naming.
Use localStorage to remember site-specific custom cleanup rules.

Here’s a MutationObserver tip to auto-reapply the cleanup:

const observer = new MutationObserver(() => cleanPage());
observer.observe(document.body, { childList: true, subtree: true });

Be cautious though—this keeps running and may impact performance. Use it only if needed.

Conclusion

Building a JavaScript bookmarklet to clean up blog pages is a simple but powerful way to enhance your web-reading experience. You gain the flexibility to tailor pages just for your eyes, and learn deeper insights into how DOM scripting and web automation work.

Feel free to modify the selectors and styling to suit your taste, and enjoy a clutter-free internet one click at a time.

Useful links: