Create a Local Google Chrome Extension

5 min readJan 6, 2020

Have you ever used a site frequently and been annoyed by one of their features? Maybe the headline is a weird color, or every page has a popup, or you just really have a thing for mint-green backgrounds.

Whatever it is, you can create a Google Chrome extension to fix that. The best part — you can build this in less than15 minutes with this tutorial. Follow along below to learn how.

Project Example

For this example, I’ll be writing a Chrome extension to remove the ad sidebar from an article about the best coffee shops in Seattle.

Follow along!

Create a new project

First things first, create a new folder on your device to house this project. All of the files will be housed in this folder so name it something appropriate ex.

mkdir no-ads-extension

After you’ve created a folder, you’ll need to create a manifest.json file and a .js file inside it. Technically, only the manifest.json is required, but you’ll need the .js file to handle the logic to edit your webpages.

// Make these inside the file created abovetouch manifest.json ad-blocker.js

Once you have these two files created, open your new folder in your IDE.

Build the manifest.json file

As mentioned before, the manifest.json file is the only file that you technically need to have a chrome extension, but it won’t do anything by itself. It would just allow you to have an extension sitting there on your browser.

Still, it is necessary to set up correctly. The only required fields are manifest_version, name, and version. For a simple, workable extension, the only other field that we will use is content_scripts, which we will add in a later step.

Build out your manifest.json file as follows:

{
  "manifest_version": 2,
  "name": "No Ads",
  "version": "1.0"
}

Remember: this is JSON so everything is stringified. Pay attention and ensure you are using proper formatting.

There are plenty of optional keys that you can add to your manifest.json file. Peruse the chrome extension documentation here to see if any apply to your project. For this example, we will keep it simple.

Upload to Chrome extensions

Now that the basic manifest.json file is set up, let’s upload it to your Google extensions to ensure everything is working as it should.

Open up ‘extensions’ from your Chrome settings, then select ‘load unpacked’ from the extensions page and select the folder that houses your project.

You should see your new extension in your extensions list now. Congrats!

Determine what needs to be manipulated in the DOM

Now that your project is properly loading as an extension, it’s time for the fun part to begin.

We should have two files in our project folder right now. A manifest.json file and our ad-blocker.js file. If you didn’t create that .js file before, do it now.

The next step is to tell our manifest file that when we come across a certain webpage, we need to run a script. In our manifest file, update it to included the new “content_scripts” key.

{
  "manifest_version": 2,
  "name": "No Ads",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [ "https://*/thestranger.com/*" ],
      "js": [ "ad-blocker.js" ]
    }
  ]
}

In this example I want to remove an ad bar from an article on The Stranger, but you can do anything you’d like here.

For our example, we’re looking to remove a section of the html represented in the DOM. For most cases like this one, there should be either a class name or id that you can use to identify the field to be edited.

We’ve selected the element to remove on the left, and we can see a class for it in the console.

You can see that this sidebar has a few classes, but “sidebar-ads” seems the most appropriate, so let’s manipulate those items that have that class.

Write your logic

Now that we know what to do, and where, let’s write it in our .js file.

We know that we want to locate an item by class name, then remove it. That looks like this:

// Write this in your ad-blocker.js filefunction removeAds() {
  let popUp = document.querySelector('#js--banner');
  console.log(popUp);
  popUp.parentNode.removeChild(popUp);
}

Let’s test this. Save the file and go back to your extensions and reload the extension. Now go to the webpage you’re editing and see what happens.

Is it still there?

Hmm, the ads are still showing up on the right-hand sidebar. Let’s fix this.

If so, it’s likely that the script ran before the page was fully loaded, so it didn’t actually do anything. To get around this, update your code as follows:

// Write this in your ad-blocker.js filefunction removeAds() {
  let popUp = document.querySelector('#js--banner');
  console.log(popUp);
  popUp.parentNode.removeChild(popUp);
}function pageLoad() {
  setTimeout(() => {
    removeAds();
    console.log('Ad sidebar removed');
  }, 2000);
}document.addEventListener('DOMContentLoaded', pageLoad());

Now save your project and reload your extension again. You can also clear the errors that likely came up saying that the element couldn’t be found or was ‘null’.

Go back to the website in question and reload it and the sidebar should disappear.