If you are a web developer like me, you might have wondered how to create a chrome extension at some point, but you won’t get a chance to learn or create one. This is because most web applications ( e-commerce, social site, admin panel, dashboard ) won’t need an extension in addition to the features already available in the app. But there is a huge market for web extensions.
In this article, we will learn how browser extensions work, and later we will be creating a simple chrome extension.
Why do we need a web extension?
With cloud technology the things that we can’t deliver through a web app are limited ( If you think you know the limit, check out my tutorial on webassembly you will be surprised ), so why need an additional platform within a browser to do stuff that we could have done in a web app? the answer is there are things you can do more efficiently with extensions than inside a website. below are some extensions and their use cases.
- Grammarly: This is an extension for correcting grammar in the sentence that you type on a website. For instance, if this was made like a web app, then one practical solution would be to type on that site, correct the sentence, and make use of it.
- Honey: Using this extension you can get discounts from a website ( applying it directly with a click of a button ). A web app cannot do this efficiently.
- GoFullPage: This is a simple extension for taking a screenshot of an entire webpage. For achieving this without an extension we might need software installed on our systems.
How does a browser extension work?:
Here are some additional points you need to know before we continue.
- Browser extensions have their own execution space and dev tools in a browser. If we inspect any extension, you can see that dedicated dev tools will open.
- We cannot access variables and functions declared inside the website from an extension.
- Extensions carry more security risks compared to a website, so for accessing storage and executing scripts we need prior permission ( which we will specify in our manifest.json file ).
Coding a chrome extension:
In this section we will code a small chrome extension, that will display random images when clicking a button. Let’s jump in.
Note: I have specifically created this article for chrome extensions, but the concepts are the same for all the browsers
Our folder structure will look like this.
As mentioned before this file tells the browser how an extension should be rendered. There are a lot of configurations available but we will see only the required ones for this tutorial ( you can check the whole list here ).
- name key represents the name given to our extension.
- next, you can give a brief description of your extension. This will be useful when you publish in a store.
- version is our extension’s version.
- manifest_version is the version of the manifest we are using, when I wrote this article the current version was 3 ( check out this link for the latest version).
- next, we have an activation key, this key includes configurations like the HTML page that we want to use and icons for our extensions ( you can check out the full configuration here. )
- default_popup, says that our extension should appear as a popup. There are additional interface options that you can use to render your extensions like a tooltip, or display badge ( click here for a full list ).
- Lastly, we have the permissions key, as described earlier extensions carry a lot of security risks as they can have access to the current tab’s content and requests. So we need to mention what our extension is up to ( click here to see the available permission list ).
Here we have a simple HTML page that has a card view and two buttons, Generate button will fetch and display the new image in the card section we have the Close button that will close our extension.
Here we have two simple click listeners for both Generate and Close buttons. I am using picsum for getting random images, we need to send the current date-time for getting new images every time we hit the API.
Note: Inline scripts won’t work in extensions due to security reasons, for example
<button onclick="alert()">click me</button>will throw you an error, you can read more on CSP( Content Security Policy ).
Installing in chrome:
In this section, we will install our app as a chrome extension.
- Open Chrome browser and navigate to chrome://extensions/ and enable the developer option ( located in the right top corner )
- Click on ( you can find this option after the top navbar ) and select our project folder.
- After loading you should see your app in the list.
- You can click on the Details button to see additional information like list size, permissions, and descriptions.
That’s it now you can find your app on the Extensions menu in the top right corner of your browser.
Note: After making changes to your code click the refresh button on the list for the latest code to take effect. If there is any error you will be notified here, check the below screenshot.
here we can see our extension popup, when you click on Generate button new image will be fetched and displayed.
There is a huge market for browser extensions, there are many scenarios and requirements that can be solved efficiently with extensions. Below are some latest updates on the browser extensions.
- All the top companies ( Google, Apple, Microsoft, Mozilla ) are using Web extension API which is a common API across browser platforms for handling extensions, this means that extensions working on chrome will work on safari as well( more on this here ).
- Apple announced that it would ship browser extensions to iPhones and iPads, this will in turn open a massive market in the mobile and tablet space.
- Google has announced many security improvements by introducing manifest v3, check out more on this here.
Github link: https://github.com/kishork2120/simple-chrome-extension.