Create your own Ad Blocker Chrome Extension using React

Part I

In this post, I am going to tell the process of creating a simple AD Blocker chrome extension using React.

First of all, we will start with creating a react project using create-react-app. We will name it as adblocker.

npx create-react-app adblocker

Once the project is created, we can start configuring it. Every chrome extension requires a manifest.json file in the root folder. We have a manifest.json file in our project under public folder.

adblocker project

We will edit it with the following code.

{"name": "AD Blocker for Chrome","version": "1.0","manifest_version": 2,"description": "Extension to block Ads in websites","icons":{"16":"logo.png","48":"logo.png","128":"logo.png"},"browser_action": {"default_popup": "index.html","default_title": "Block Popups"},"permissions": []}

Name, version and description are self explanatory. Since our extension is wrapped up with a manifest.json file, we need to specify its version. Manifest version 2 is currently in production and version 1 is already deprecated.

We will then add icon for our extension. I have added the below image as icon. It should be in png format and square shaped. By default we should give 128x128 icon. 48x48 and 16x16 sizes are optional. We will provide single png file and chrome will automatically resize based on the requirements.

Browser action is a button that your extension adds to the browser’s toolbar. We can define numerous actions for this button and all such actions are available here. We will only add popup which opens on clicking the extension and title which comes as a tool tip when the mouse is moved over the extension.

We will see more about permissions later in the post.

Now we will create the build by running below command. It will create a build folder which will contain all the necessary files.

npm run build

With this, our chrome extension is ready for import. But we are still missing the actual code. We will import it in chrome and see how it looks like before adding the code.

I will go to Extensions in Chrome and enable Developer mode. After that i will click on Load Unpacked and select the folder “adblocker/build” which contains the index.html and manifest.json files.

Now the chrome extension is imported.

Now if we try to click on the extension, it will throw an error.

By default, Chrome blocks inline scripts in extensions. Since our code is an inline script, we are getting error message which is related to Content Security Policy (CSP) in the console. In the error message we will get a sha value which can be added to the manifest.json file to solve the problem. manifest.json will look like this after adding “content_security_policy”.

{"name": "AD Blocker for Chrome","version": "1.0","manifest_version": 2,"description": "Extension to block Ads in websites","icons":{"16":"logo.png","48":"logo.png","128":"logo.png"},"browser_action": {"default_popup": "index.html","default_title": "Open the popup","default_icon": "logo.png" },"content_security_policy": "script-src 'self' 'sha256-rTpuMVDTLP90//GVrwK+H6xwjTfatAeBhhFKY7X0EwE='; object-src 'self'","permissions": []}

Once we rebuild and import the extension again in chrome, everything should be fine. When we click on the extension, we should see a popup like below.

We are now having a template chrome extension. In the next part, where we will take advantage of webRequest API from Chrome to intercept http requests and build the extension which will do the actual stuff.

JavaScript in Plain English

Learn the web's most important programming language.

Radhakrishnan Kanagaraj

Written by

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade