Today, almost every website collects a lot of data on visitors. This data is commonly used to improve the user experience – for instance, by saving user session cookies. Saving session cookies is a cool feature that provides many opportunities for frontend developers. For example, developers can create UI themes and save a user’s settings when they switch themes. This can be done using any type of client storage (such as local storage or cookies). You don’t need a back end for this, as you can just save the website settings on the client-side.
But on the other hand, we face mass surveillance. Websites can track your last visit, browsing history, etc. Even if you aren’t logged in, websites with access to your client-side storage can identify you, track your actions, and then use this data for targeted advertising and to impose usage limitations.
To browse privately without being tracked, you can clear your browsing data once a page is fully loaded or after some period of time. Vladimir Yavdoshchuk, one of our frontend developers, crafted Browser Data Cleaner for this purpose. We asked Vladimir to explain how he built it. Here’s what he shared.
I created a Chrome extension that allows you to automatically clear browsing data for websites included in a hosts list after the page is fully loaded. Thus, your browsing becomes more private and sites have a harder time tracking your actions.
Almost every modern browser supports extensions that can extend their functionality. I use Google Chrome. As of August 2019, Chrome was the most popular browser in the world. The Chrome Web Store already contains extensions for clearing your browsing data. The reason I crafted Browser Data Cleaner is because similar solutions weren’t easy to use. I decided to make things simple. Additionally, I wanted to get to know the API for Chrome extensions.
Here was my list of requirements for the extension:
- Users can set the hosts list
- The extension must remove cookies and local storage data after a page is loaded
My first step was exploring the Chrome Extension APIs. They offer methods that can help us implement our ideas. A Chrome extension has two parts:
- The front part is a template (HTML/CSS) that the user sees when clicking on the extension icon in the menu bar.
- The background part is a script that’s executed in the background.
I needed to use both.
My first requirement was to create a hosts list and host list settings. To save the settings, I used the extension’s storage. To work with the storage, I used the storage API. This API is almost the same as the browser’s local storage API. We have two methods for working with storage: get and set. Let’s define the structure of the storage.
I needed to save the hosts list and settings values (indicating the kind of data that must be cleared). So the structure for the extension storage is the following:So
I won’t describe how to work with the store because it’s very similar to working with the browser’s local storage. (Just use the JSON.stringify and JSON.parse objects from the store as usual.)
After setting up the store, I needed to create a UI to work with it. I used the preact framework to implement the UI. This framework is a tiny (just 3 KB) alternative to React with the same modern API. You can use Vanilla JS or any other framework for this. Choose anything you like. I won’t describe how to work with the UI either: just create a simple list of hosts, a form, and a settings list with checkboxes. For switching between views, I used a preact-router and tabs interface. There are two tabs: a hosts list with an addition form and a settings list.
The only distinctive feature of developing a browser extension is using chrome.storage instead of window.localStorage. To work with chrome.storage, I created a helper:
The second requirement was implementing automatic clearing of browser data upon page load. To do this, I used a background script that’s executed once a browser tab is loaded. To implement that, I used two API methods: tabs (for detecting tab switching and tab loading) and browsingData, which provides methods for working with a client’s browser data.There’s a remove method in browsingData that allows you to remove various types of browsing data with a single call, which is much faster than calling multiple more specific methods. To use this method for my project, I needed to provide origins and the config from the extension storage with various types of browsing data. On load, I check the current hostname for the website opened in an active tab. If the hosts list includes this host, the extension clears the data specified in the settings.
Once the requirements were implemented, I set up some additional options for using this code as a Chrome extension. To do this, I created a special manifest.json file with data about the extension: extension name, description, etc.
Now I can go to the Extensions page, enable developer mode, and click “Load unpacked.”
The extension will be added to Chrome and will be ready for testing.
All I need to do is add some hosts to the hosts list:
Then I can go to a website not included in the hosts list and check the local storage and cookies without the extension:
You’ll see data from the website, such as device|deviceId, which tracks all actions on this website. Next, I’ll add this domain to the hosts list and check the local storage once again:
Now the local storage is empty, which means the extension works!
The result is an extension that removes the following data automatically:
- Cookies
- Local Storage
- Cache
- IndexedDB
- Service Workers
- Web SQL
The interface of the extension is very simple, and the settings for end users are minimal. Just install, set the hosts, and enjoy more private browsing.
