Super simple DIY ad blocker chrome extension

Manifest.json

First we will need to create a manifest.json file if you are making this project from scratch. Manifest files are just headers that hold details about the current project. The only two key that are required are “permissions” and the “background”. The rest can just be personal information. Here is my manifest for example.

"permissions":[ "webRequest", "webRequestBlocker", "<all_urls>"] => We want to give permissions to chrome webRequest API, and then the last option is <all_urls>"background": { "scripts": ["adblock.js"] } => This is the reference to the JavaScript file we will have our main code in

Chrome webRequest

The chrome webRequest API allows us to examine the web request life cycle and provides some events for us to use as entry points to block the ads.

chrome.webRequest.onBeforeRequest => How we access the API, the event listener onBeforeRequest will fire before we send request to the url and this will be the earliest and easiest point to block the url.

Load Unpacked Extensions

In our browser we navigate to chrome://extensions.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store