Published: 2019-12-26 08:31 |
Category: Code | Tags: adblock, ads, it goes to 11, problem solving, spotify, volume control
We've started using Spotify more around the house with the kids. We only have the free account, which means we hear ads every three or four songs. I don't mind the ads, honestly...they need to make money and I use it without cost to my wallet. That may change someday, but not right now.
The bigger problem with the ads is the fact that they play at 10x volume. Our music is reasonable for the room the speakers are in and then Spotify decides, "Hey, this isn't nearly loud enough. SIGN UP FOR GROCERY DELIVERY! THEN DO THIS SURVEY!"
Kids would cry. Something needed to happen. I told my wife I would write a Chrome extension to block those ads. She laughed and then was confused when I said I was serious. Mutify was born.
Chrome extensions work with three pieces: the manifest, the background script and the content script. Each plays a role in how the extension interacts with the browser and with the pages you visit.
The Manifest
The manifest for this extension is sparse. It loads a couple of icons and, more importantly, defines how the extension can look for ads. To work properly, the extension has permission to interact with tabs and will only run on a URL matching https://*.spotify.com/*. The * is a placeholders, so it will still run if Spotify changes from open.spotify.com to player.spotify.com or even closed.spotify.com. When it sees that URL, the extension will become active.
The Content Script
Content scripts in extensions can see the page you're on but it cannot actually interact with the browser. So, when you're on open.spotify.com a three-line bit of Javascript is run that essentially asks, "Is there an ad playing?" every five seconds. All of the work is done by the background script.
The Background Script
Background scripts are loaded when they're needed and can interact with and change the browser. This is where the work happens. When the background scripts receives the prompt from the content script, it does a quick check of the title of the page.
When an ad plays, the tab title always changes to "Advertisement - Some company" (with the company name changing). So, the background tab just checks for that word in the tab title. If it's there, hey presto, there's an ad playing.
The background script tells Chrome to update the tab status to muted, which cuts the ad out. As soon as the ads are done, the tab title changes back to "Artist - Song" and the extension will unmute the tab.
In all, the code for this little project (not incluing the manifest) was 26 lines of Javascript, including some white space. It isn't published to the Chrome Web Store, so if you want to get a copy, here are the installation instructions.