Most of us spend a lot of time inside the web browser. If you are Chrome Browser, Firefox Browseror Edge users, then you will know these browsers come with a huge number of Third party extensions to supplement features already built into the software.
But what if you need some specific extra functionality, some tools or features that aren’t included in existing add-ons? Then it might be time to consider writing your own browser extension. It may sound daunting, but it’s not that hard once you learn how. And once you’ve created your custom extension, you can keep it for your own use or make it public for anyone to use.
Some coding knowledge is required, so you’ll need to learn the basics of writing web pages and scripts if you don’t already know them. If you’re a beginner, you can start small and work your way up. There are also plenty of useful resources on the web if you need them, from code libraries to online courses.
Begin
There are several components that make up a browser extension. The first is the manifest, which has a file name of manifest.json and contains several bits of metadata that define the extension and its functionality. You name the extension in the manifest, describe its functionality, and specify the default actions the extension performs.
Check manifest file format Google’s documentation for Chrome. You can see some examples there, including a minimal manifest that only contains the basics. The manifest points to all the other files needed for the extension, which should be stored in the same directory as you developed it.
Some of the files that the manifest points to are icon files, which are the visual representation of your extension in the browser. Users will look for your icon to see your extension running, and they will click on the icon to access the extension settings or disable the extension. You should create an icon of at least 128 x 128 pixels, and icons of other sizes (as listed here) is recommended, so the extension looks the same everywhere it appears in the browser, from the settings screen to the tab bar. If you don’t provide an icon, a generic icon showing the first letter of the extension name will be used instead.
Then you have the scripts that do the actual work of the extension, and these can come in a variety of forms: HTML (Hypertext Markup Language) for basic web design, CSS (Cascading Style Sheets) for more advanced styling and manipulation of web objects, and JavaScript to do the bulk of the programming (assuming your extension does more than just load a page onto the screen).
