The process of creating any Chrome Extension can be broken down into 4 key steps:
- Declaring a manifest file
- Loading an unpacked extension into Chrome (for debugging)
- Writing meta details for your extension as “browser actions”
- Writing code specific to your goals!
In this blog post, I will cover how to create an extension that will communicate with an API and request random Chuck Norris facts.
A manifest.json file is responsible for telling Chrome how your extension is going to run and what permissions it needs to facilitate this.
Create a new directory for your project and create a `manifest.json` file inside it with the following content:
Now we have a manifest file, we can load our extension into Chrome.
Uploading to Chrome
Open Chrome and visit `chrome://extensions/`, click “Developer mode” (toggle located in the top right corner).
Choose “Load unpacked extension”, select the folder where you created your manifest file. If your code is valid, you will see your extension appear in the installed list.
Every time you save your project, revisit this tab and refresh the page - doing so will reload your extension with the latest changes!
A browser action tells Chrome some basic details about your extension, such as how you would like to load it.
The “default_icon” is the icon for our Chrome Extension and the “default_title” is the text that appears when you hover over the icon.
The “default_popup” references the HTML file that will be rendered when you click on your extension in the browser.
Rob is responsible for delivering cutting edge new projects as well as continuously improving some of our longer-lived applications. With an interest in infrastructure as code and being at the forefront of deployment and technical processes he can usually be found telling people that there "is a Docker container for that". In his spare time he loves nothing more than a game of cricket and a night in the pub after.