How to write your own Clear History extension for Firefox or Chrome

1. Create a basic project setup for writing extensions
2. Write a very simple extension
3. Package that simple extension
4. Upload it to Mozilla developer hub

IDE doesnt matter. Anything that you like works since the project will be very basic. A lot of people seem to like <a href="https://code.visualstudio.com">VS Code</a> nowadays.</p>

Choose your project location and create a new file called manifest.json.</p><p></p><p>Every extension starts with a manifest.json file. It is the core project setup file that contains all the basic information of the extension. An example of an basic manifest file with comments.

Since we are using the browsers history API we will need to ask for the clients permission to do so. Underneath the API the sites visited are stored in sqlite database in the user directory. If you wish to know about other permissions you can read about them on the <a href=\\\\\\"https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions\\\\\\">MDN</a>. </p>\\",

Create a new file called main.js

We are going to write a simple JS function that call delete API and tells it to delete all history created between now and 1 minute ago.

Event listener

Next we are going to write a simple event listener that listens for click events in browser. If one fulfills our conditions it executes the function we previously wrote.

Markup

Now we are listening for a click event on a HTML tag that has a class called delete. With this we have all the JavaScript code will need for this simple extension

Next create a new file in the same directory called main.html.

This file will contain all markup information we need to create a pop-up when someone clicks the extensions' logo on the taskbar.

Design

This is all we really need for markup. If we want we can include a CSS file for design.

To top it off you can create a simple logo for your extension. You don't need to have a separate directory for images but you can. The only that matters is that you change the path to your icon in the manifest.json. I put quickly put together two images from <a href=\\\\\\"https://icons8.com/icons\\\\\\">Icons8</a> for this simple logo.

Testing and debugging

Open up about:debugging in your browser. Click on this Firefox section. Click on the Load Temporary add-on button and navigate to you manifest.json file. Now you should have your temporary add-on loaded. You can confirm it by seeing whether your little icon has popped up on the taskbar. Clicking on the Inspect button in the same menu will allow you to see the console output and use the browser implemented debugger in case you have errors within the code. Everything should work here currently. So we can move on to packaging the extension

Packaging the extension can be a whole separate build process in which you compile the files down to production build with something like Webpack or Rollup. For simplicity-s sake we are going to skip that step. We will just package the development files into our final add-on. For that you need an archive manager like 7zip. Something similar can work also. Let Google be your friend here.

Now just use the archive manager to create a ZIP file of all the files we just created. That ZIP file should include the following files:

• manifest.json
• main.js
• main.html
• (Your icon)

Once that's done its only left to upload your package to the developer hub.

Most developer hubs like Google Chrome's and Microsoft Edges app stores require you to pay once in a lifetime fee of 5 dollars to reduce spam in their hubs. It's a common practice that's extremely prevalent in the current mobile app market. Last I checked Mozilla didn't have this requirement, so we are going to use that for now. If you wish to publish your apps in those app stores then nothing other than monetary investment is stopping you. Edge and Chrome are based on Google developed Chromium. Firefoxes Geck and Chromium have similar API implementations. That's why this extension can work with those as well. To upload your archive to Mozilla you first need to sign up to their developer hub. After that it is just the matter of clicking a few buttons, uploading the file and passing the code reviews. With that you have created you're a new browser extension. A very basic one but it is best to get your feet wet for the first time in the shallower water before tackling the ocean.