How I made my first chrome extension
Redactor, an extension that automatically redacts parts of a webpage
In this article, we are going to see how to create a redacting extension, that will allow us to redact parts and elements of the DOM.
Not too long ago, I wanted to show off a project of a Web Bot that I made to interact with a website. But as that website had some confidential information, I simply could not show it :/ . To circumvent it I ended up creating Redactor. A chrome extension that lets me and anyone Redact pages on the web. In this post I show you all about it.
This extension is very simple to use. Simply by clicking on the Big Redact Once button, you got a fully redacted page. Images, text you name it.
This is not very useful unless for some obscure use I don’t know of.
The true power comes from the rule system. You can specify what to redact. Want to hide an email address? a phone number? all <h2> tags of an html? All this redaction are possible and many more just by using regular expressions (for the ones proficient with it), using XPath to select specific elements of the DOM among other ways.
But I am getting ahead of myself, let me tell you about the inner workings of this project.
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.
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.
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.
//h2select all h2 tags, or all links with id 123 for examplea[@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 Johnreplace string cat->doggo and bunnoredact regexp [0-9]redact xpath //h1redact 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:
