This developer replaced every ad on the internet with museum art — and you can build something just like it.

If that sentence makes you pause and think, wait, that's actually possible? — you're not alone. Most people interact with Chrome extensions as passive consumers: installing an ad blocker here, a grammar checker there, maybe a tab organizer when things get chaotic. But the deeper truth about browser extensions is that they are one of the most underrated creative coding playgrounds available to developers today.

You don't need a complex backend. You don't need a database. You don't need to deploy anything to a remote server. You just need a browser, a text editor, and a genuinely interesting idea.

The art-for-ads concept is a perfect example. Instead of simply hiding advertisements — which is what most traditional ad blockers do — imagine replacing every <iframe> tag inside an ad container with a high-resolution painting from the Metropolitan Museum of Art. Suddenly, the space where a banner ad for a mattress company used to live now displays a 17th-century Dutch still life. The web becomes a curated gallery. The browsing experience becomes civilized.

And the code to make it happen? Fewer than 200 lines. Let's break down exactly how this works, what tools are involved, and how you can build your own version — or something even more creative.

               Scale Smarter with LycheeIP

How Chrome Extensions Actually Work

At its core, a Chrome extension is just a collection of files: some JavaScript, perhaps some HTML and CSS, and a crucial manifest.json file. That manifest tells Chrome what your extension is called and exactly what it is allowed to do. According to the official MDN Web Docs on extension architecture, the manifest is the strict blueprint that governs permissions and execution.

The Power of Content Scripts

The most powerful feature available to extension developers is the content script. A content script is a JavaScript file that Chrome injects directly into web pages as they load.

This means your code runs inside the page itself. It has full access to the Document Object Model (DOM), which is the live structure of every element on the page. Every <div>, every <img>, every ad container — your script can read them, modify them, remove them, or replace them entirely.

Here's a simplified version of what a manifest looks like for this kind of extension using Manifest V3:

JSON

{
  "manifest_version": 3,
  "name": "Art Everywhere",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

That <all_urls> pattern tells Chrome to inject your script on every page you visit. From there, your content.js file can do the heavy lifting.

The Art-Swap Logic

For the art replacement use case, the core logic follows a straightforward, four-step process:

1. Find ad containers: Most ad networks use predictable class names or attributes — things like [class*='ad-'], [id*='banner'], or specific iframe sources. Your script scans the DOM for these patterns using querySelectorAll.
2. Fetch artwork: In parallel, your script makes a request to a public art API to get a random image URL.
3. Swap the element: Replace the ad's src attribute, or replace the entire element with a new <img> tag pointing to the artwork.
4. Handle dynamic content: Modern sites load ads dynamically after the initial page render. A MutationObserver — a browser-native tool that watches for DOM changes — lets your script react in real-time as new ad elements appear.

The elegance here is that you're not fighting the browser; you're working with it. The DOM is mutable by design, and content scripts are the official, supported mechanism for doing exactly this kind of transformation.

The Free APIs That Make It Beautiful

The art-for-ads swap only works as well as the artwork you serve. Fortunately, some of the world's greatest cultural institutions have opened their collections to developers completely free of charge.

The Metropolitan Museum of Art API

The Met's public API is genuinely impressive in scope. It exposes over 400,000 objects from the museum's collection, with a significant portion available under Creative Commons Zero — meaning you can use the images freely, even in commercial projects.

The API requires no authentication key. You simply make a GET request:

https://collectionapi.metmuseum.org/public/collection/v1/objects/[objectID]

To get a random public-domain painting, your extension can first hit the search endpoint to retrieve a list of object IDs filtered by department (like European Paintings), then randomly select one and fetch its image URL. The response includes a primaryImage field with a direct link to the high-resolution image.

The Art Institute of Chicago API

Chicago's API is similarly generous and exceptionally well-documented. It supports more sophisticated filtering — you can query by artwork type, style, artist nationality, or date range.

https://api.artic.edu/api/v1/artworks?fields=id,title,image_id&limit=100

It also returns a thumbnail field for faster loading, which matters tremendously when you're replacing elements on a live page and want to avoid jarring layout shifts. Image URLs are constructed from a base IIIF URL combined with the image_id, giving you granular control over the size and format of what you fetch.

NASA's Astronomy Picture of the Day API

For a different aesthetic entirely, NASA's APOD API delivers a daily image of space. It requires a free API key (available instantly at api.nasa.gov) and returns a single image per day along with a description. An extension could use this to replace a specific category of content — hero banners, for instance — with something genuinely cosmic.

Caching Is Your Friend

One practical consideration: you do not want your extension firing off API calls every single time an ad appears on screen. That would be slow and potentially rate-limited.

The smarter approach is to pre-fetch a batch of image URLs when the browser starts (using a background service worker) and store them in chrome.storage.local. Your content script then pulls from this local cache instead of hitting the API on every page load.

               Scale Smarter with LycheeIP

LycheeIP (Developer-First Proxy Infrastructure)

As you move beyond simple DOM manipulation and start building extensions or applications that require heavy data extraction, robust global testing, or overcoming geo-restrictions, you will quickly hit the limits of a single local connection. This is where LycheeIP—a developer-first proxy and data infrastructure platform—becomes an essential part of your stack.

When development teams need to scrape large datasets to feed their own custom APIs, or when QA engineers need to verify how an extension renders localized ads (or art) across different global regions, they rely on LycheeIP's infrastructure. By utilizing high-performance datacenter proxies for rapid, high-volume data collection, or routing traffic through dynamic IP networks to mimic genuine residential traffic patterns, developers can ensure their tools work flawlessly worldwide. Whether you are running global security tests, conducting competitive ad analysis, or aggregating public data where legally permitted, integrating a reliable proxy infrastructure ensures your code scales without getting quietly blocked by the very sites you are trying to augment.

The Bigger Lesson — Small Tools, Real Impact

What makes the art-for-ads project compelling beyond its novelty is what it demonstrates about browser extensions as a medium for solving real-world problems.

Ad fatigue is a genuine issue. The  and other privacy-focused organizations have extensively documented how intrusive advertising degrades the browsing experience and introduces security vulnerabilities. Ad blockers address this by removal. The art replacement approach addresses it through transformation — which feels meaningfully different, both psychologically and aesthetically. You're not just taking something away; you're adding something beautiful.

This is the design philosophy worth internalizing: What if the solution isn't subtraction, but substitution?

Apply that lens to other browsing pain points, and a whole world of extension ideas opens up:

• Replace infinite scroll feeds with a reading list of articles you've saved.
• Swap out clickbait headlines with the actual factual summary of the article (using an LLM API).
• Replace distracting YouTube thumbnails with plain text titles when you're trying to stay focused.
• Substitute stock photo-heavy pages with original illustrations from open-licensed artist portfolios.

Each of these follows the exact same pattern: detect the element, fetch better content, swap it in. The architectural pattern is always the same. Only the creative vision changes.

Getting Started Is Easier Than You Think

To load your first extension in Chrome:

1. Create a folder with your manifest.json and content.js.
2. Open chrome://extensions in your browser.
3. Enable Developer Mode (toggle in the top right).
4. Click Load Unpacked and select your folder.
5. Visit any website and open the console to confirm your script is running.

That's it. No npm install. No build pipeline. No complex deployment. Just raw files and a browser.

The barrier to entry for building something genuinely useful is remarkably low. The internet is not a fixed thing; it's a set of documents your browser renders, and your browser is programmable. You don't have to accept the web as it is. You can rewrite it — one content script at a time.

               Scale Smarter with LycheeIP

Frequently Asked Questions

Q: Do I need to know advanced JavaScript to build a Chrome extension?

A: No. Basic to intermediate JavaScript is sufficient for most extension projects. If you understand how to select DOM elements, make fetch requests, and handle asynchronous code (Promises or async/await), you have everything you need to build a functional content-script-based extension.

Q: Are there any costs involved in using the Met or Art Institute APIs?

A: No. Both the Metropolitan Museum of Art API and the Art Institute of Chicago API are completely free with no API key required. The Met also licenses a large portion of its collection under Creative Commons Zero, meaning the images can be used freely without attribution requirements.

Q: What is a MutationObserver and why does this extension need one?

A: A MutationObserver is a browser-native JavaScript API that watches for changes to the DOM in real time. Many modern websites load advertisements dynamically after the initial page render. Without a MutationObserver, your content script might replace the ads it finds on the initial load but miss the ones that appear moments later.

Q: Can this extension be published to the Chrome Web Store?

A: Yes. After testing locally using Developer Mode, you can package the extension and submit it to the Chrome Web Store. There is a one-time $5 developer registration fee. You will need to comply with Google's policies, which include being transparent about what the extension does.

Q: How does caching work in a browser extension?

A: Chrome extensions have access to the chrome.storage.local API, which works like a persistent key-value store scoped to your extension. You can use a background service worker to fetch a batch of artwork URLs when the browser starts, store them locally, and then have your content scripts read from that cache instead of making live API requests.

Q: What is Manifest V3 and does it affect how this extension works?

A: Manifest V3 is the current, mandatory version of Chrome's extension platform. For the art-for-ads style extension, MV3 works perfectly — content scripts, MutationObservers, and local storage are all fully supported. The main adjustment from older versions is writing your background logic as a service worker rather than a persistent background page.

Q: Can this same approach work in Firefox or other browsers?

A: Yes, with minor adjustments. Firefox supports the WebExtensions API, which is largely compatible with Chrome's extension API. Most content-script-based extensions can be made cross-browser compatible with minimal extra work.