Chrome Extension: Content Filter

I’ve developed & published my first Chrome Extension! Content Filter! The basic concept is that it censors text based on categories that the user selects (Adult content, profanity, etc).

content-filter-screenshot

Chrome Extension Architecture

I learned several things developing this Chrome extension. First, I learned about Chrome API calls and how the architecture of a Chrome extension works. Beginning with the critical Manifest JSON file, then the options page, and then the scripts and background page. There is a lot to learn!

MutationObserver

I also learned about MutationObserver. This is a nifty tool that is designed to watch for changes in the DOM. Websites are complex and lots of data comes in asynchronously – the days of page content not changing until a page refreshes are long gone! A good example is “read more comments.” You click the button, the data is called, and then it appears on the page. MutationObserver allows my filtering script to run after those new comments are pushed into the page.

HTML5 Local Storage

I’ve worked with HTML5 storage before, but this was the first time I worked with Chrome’s implementation. I used Chrome’s storage API to save the settings the user defined. What is interesting is that since this extension is on Chrome’s web store, the settings sync with the cloud. I noticed that when I logged into another computer that has my chrome user signed into the browser, my settings were synced! Pretty cool!

Feel free to try out the extension and let me know what you think!

Posted in

Leave a Comment