How I made my first chrome extension
By: João Ramiro
Tags: Chrome Extension, Development, Tools, JavaScript

What’s behind it

A couple a weeks ago I had no prior knowledge so I had the to learn all the basics to get this thing to work.

The main file is manifest.json which tells Chrome, (or any other chromium based browser such as Opera, Edge or Brave) what files to use.

Besides having the name and a description of the extension. It contains:

permissions: what components of the browser can the extension access

option_page: a page that mostly no one uses, which appear when you right-click the extension icon and select Options

browser_action or page_action: what is the icon and the popup that will appear when you click the extension

background: has all the information of all the scripts that run on the background alongside the browser

content_scripts: has the scripts to are run every time you open a new page, as well as which pages should it run on. http://*/* and https://*/* means that it will run on all pages.

Here’s how these things are connected:

The popup.js script runs every time the you see the open the extension popup. It uses libraries such as jQuery to make it pretty and some modules I created to keep the code clean and modularized.

extension popup

When you press Redact Once, or Turn ON, the extension uses the chrome messaging api to tell the content-script: Hey the user wants to redact the current page, and so it does.

It also notifies the background that and changes the extension icon to have a green indicating redacting is now On.

It uses chrome storage to store the user preferences, meaning does he/she want to redact, are images to be redacted or not etc.

The content-script also stores information but in the session storage. It stores whether the current tab is being redacted or not, so that even if the user navigates to some different link on the same tab, it will also be redacted.

Rules Engine

This is probably the part of the project the was hardest to implement. I wanted to give the user the ability to redact / replace only certain parts of the page.

Redact only h2s

For example as you can see in the image, it is possible to select only the text that is an <h2> tag and hide that.

There are 2 actions and 4 selection rules implemented. You can either redact, which will turn the text into the little square ■■■, or replace which will replace the text by a word of your choice.

Regarding selectors, you can use:

string: which will select a specific string of text to redact/replace. For example it can hide the name John or replace “cat” by “doggo and bunno” regular expressions: For all the nerds like me out there that know how to use the regexp black magic, you can select words that way. You can for instance to redact regexp [0-9] to hide any numbers that might appear on the page xpath: Through Xpath it is possible to select specific elements of the DOM, i.e. //h2 select all h2 tags, or all links with id 123 for example a[@id="abc"] css selectors: It does the exact same as xpath but it uses a different syntax. I added both css selector and xpath to cater to more people

redact string John replace string cat->doggo and bunno redact regexp [0-9] redact xpath //h1 redact jquerysel #footer

Lazy Loading

Many web pages nowadays, only load new content such as images whenever you scroll down and they appear on the screen. To redact new elements that are created, I got to learn about Mutation Observers, which can be set to listen to any sort of change that occurred in a page and then trigger a certain action. Lets see it in action in this site that load new images when i scroll down. The result? Well content that you wish to redact, will immediately be hidden and soon as the page dynamically loads it.

Conclusion

I learned a great deal while building this extension, of stuff that I wasn’t even expecting to learn. Not only I got to understand how a chrome extension works, I also got to know more in depth into how to interact with the DOM and how to use Mutation Observers to your advantage.

The extension can be foun on the Chrome google store:

The current source of this project can be found on the repository

How to use it: