Why & Motivation

Wanted an adblocker for accuradio website, I just need to silence the ads on this website. How can it be done? Custom script that get injected into the page by some extensions such as tamper monkey, the disadvantage is u gotta install tamper monkey. The other idea I have in my brain is I Wanted to try out chrome extesnion that specifically does this job, since my current work needs me work on chrome extensions.

Wanted to do for a while, the ads on accuradio is annoying, I wanted to write a script to block it, i wanted to just install it and be done with it. Even if I use a new machine/laptop.. i dont have to set it up or anything, just install the extension and use the website.

How chrome extensions work

How to publish chrome extenision, how chrome extensions work? why they are necessary?

Chrome extensions are essentially web apps that use web technologies but are limited to the Chrome browser. They run in a sandboxed environment, ensuring they don’t interfere with the webpage content unless explicitly designed to do so.

Background Scripts: Handle the behind-the-scenes logic, such as listening for specific browser events.

Content Scripts: Injected into web pages to modify their content or behavior. Popup HTML: Defines the UI, which appears when users click the extension icon. Extensions: communicates with web pages through messages and shared storage, maintaining separation while enabling interaction.

To publish new extensions

To publish a Chrome extension, we must create a developer account on the Google Chrome Web Store. As of writing this post, Google requires a one-time registration fee of 5 USD for setting up this account. This fee is intended to verify the developer’s identity and to discourage spam and fraudulent extensions on the platform.

Extension code

Extension code that is responsible to detect the ads on the page.

    observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        // filter the target to contain only if it is adPlaying or not
        if (
          mutation &&
          mutation.target &&
          mutation.target.cloneNode().classList &&
          mutation.target.classList.contains("adPlaying")
        ) {
          // mute the tab
        } else {
          if (chrome && chrome.runtime) {
            // unmute the tab
          }
        }
      });
    });

    observer.observe(accuradioPlayerControls, {
      attributes: true,
    });

When creating Chrome extensions, it’s crucial to handle permissions carefully. Given that Chrome is designed with a robust focus on security and user privacy, any extension listed on the Chrome Web Store is required to request only the permissions essential for its functions. The principle of “minimum necessary privileges” is not just a best practice in security; it is a fundamental requirement. This principle dictates that an extension should operate with the least amount of privileges it needs to function properly.

I had this happen to me, more permission than I actaully needed, so my first submission was rejected, but then I re-submitted with the permissions fine grained, it got approved.

https://chromewebstore.google.com/detail/mute-audio-ads-on-website/lhgmlkkpdhcgenmglmbomhemkkgccjef

Personal update:

Brought my mom to chennai; im getting home food again. close friend left to hometown. Mom asking me to buy stuff for the new home; so doing that. Going pretty well~