Recently I wrote my first chrome extension. In this post, I will walk through the main components of a chrome extension and my experience in building it and how you can build yours too.
- What are Chrome extensions
- Quick Launcher Extension
- Main components of extension
- Load your extension
- Debug your extension
- Important APIs of Chrome
- Publish to webstore
- Resources - Kick-start
How I got the idea of building Quick Launcher? Actually I work at a startup and there are around 10-15 internal/external tools or sites or projects and each site has a different URL for different environments like for uat, staging, production, etc. It was a real pain to access a particular environment of a site from 30-40 URLs. Of course, I have the URL list saved in notes but to go there and get a particular URL from it was time-consuming. One solution was to bookmark the URLs. But already I have tons of links bookmarked. I wanted to separate the projects/tools links from the rest of my bookmarks and wanted to bundle or organize the links related to a particular project. And yeah, that's how the idea of building a chrome extension came to my mind.
Quick Launcher is a smart URL organizer. A chrome extension especially for developers(can be used by non-developers too) to create collections of various related useful links. You can also add various apps deployed in different environments like uat, staging, production for quick access. Quick launcher also has a Most Visited Sites tab to quickly access sites that matter to you the most.
Organize your various related links under a particular collection. You can add as well as delete a collection. After creating a collection, you can either add an item under it manually or right click on any website and choose collection name in the menu, you will be prompted to add a title after which you can save that link under that collection.
Quickly access sites/products/tools deployed in different environments like uat, staging, production. You can add deployment URLs of various sites/tools in JSON format to quickly access them. Currently supports 3 environments per site.
Extensions start with their manifest. It is a JSON file which provides information about your extension like name, version, description, etc.
Here is the example of manifest.json file:
Let's have a look of some important fields in manifest.json:
name: Name of your extension
description: A short summary of your extension
browser_action: Used to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup. Read more..
default_popup: The HTML file which pop-ups when the user clicks on your chrome extension in the toolbar.
background: Used to manage events. It contains the scripts of your extension. More..
There are other fields too in the manifest. To learn in detail about each field, check out the documentation.
popup.htmlas mentioned above, pops-up when the user clicks on your extension's icon in the toolbar.
You need to supply several kinds of images to be used in the Chrome Web Store and the Google Chrome browser:
- App icon
- Promotional images
Refer to the official documentation to know more about images/icons requirements.
So our final directory structure looks like:
my-extension folder/ ├── manifest.json ├── background.js ├── popup.js ├── popup.html ├── style.css ├── img │ ├── icon_16x16.png │ ├── icon_48x48.png │ ├── icon_128x128.png │ ├── icon_19x19.png │ ├── icon_38x38.png │
Once you are ready with the above folder structure, you need to test if everything is fine by loading it in the browser. To load your extension:
- Open Chrome browser and navigate to
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the LOAD UNPACKED button and select the extension directory.
You can debug a chrome extension the same way you debug a normal website using chrome dev tools/inspect elements. To debug your extension:
- Open Chrome browser and navigate to
- Locate your extension and copy the extension ID
- Open the URL
- Use the dev-tools(Ctrl+Shift+I) to debug it. Read more..
Let's check out some important APIs I have used for building quick-launcher extension:
In Quick Launcher extension, I have used sync storage to save the
collections JSON object and
deployed apps environments which is added by the user.
Chrome Apps can’t use
localStorage. Instead, there’s a Chrome API,
chrome.storage.sync, with the same API, which is automatically synchronized between computers running the same app, similar to the way that Sync Files are synchronized. Learn more about storage.
When you right-click(or control-click on a Mac) with the mouse pointer inside a Chrome App window, you get a menu with some debugging options, such as
Reload App or
Inspect Element. That is called the context menu. You can have your own menu option on that menu along with click listener. In Quick Launcher, I have added
Add to collections menu which can be used by the user to add a URL under a particular collection. Read more..
There are other dozens of API Chrome offers which you can use. Visit the official developer guide
- Visit Developers Dashboard
- Sign in(if asked)
- Click on
Add new item, accept the TnC
- Compress your folder to
my-extension.zipand upload the zip file
- If it is your first app, you will be asked to pay a one-time fee which is $5.
After completing the above steps, you will have to fill the form with description, add promotional images, screenshots, etc. Make sure you upload all the necessary images so your extension gets listed well in webstore. Check the official documentation about image/promotional images requirements. Hit the PUBLISH button once you are done. It takes some times for your item to get visible on webstore.
So, its pretty simple to build a basic chrome extension as a developer. But it is definitely a challenge to build something creative among lakhs of existing chrome extensions. So, what are you waiting for? go build your chrome extension. If you are stuck, you can always visit the excellent documentation.
Got questions or feedback? Let me know in the comments!