In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter of your liking by clicking on the links provided at the end of this post. For now, here are the contents of Chapter: An Introduction to Chrome Extensions.
- What are Chrome Extensions?
- Need For a Chrome Extension
- Some Popular Chrome Extensions
- Setting Up The Environment
Google defines Chrome Extensions as
A Chrome Extension acts as a catalyst that facilitates the completion of a business project by offering additional features and functionality. When you incorporate or develop new extensions for Chrome, it improves the functionality of the browser, making it more personalized while introducing new features to it.
This may also include modification of existing program behavior in order to keep it convenient for users. Businesses using Chrome as one of their default browsers bring much more personalized and results-oriented experience for users, thanks to chrome extensions.
You can visit the Chrome store to find some really useful extensions that are available free for use.
Below are a few extensions that are trusted by millions and are very useful indeed
View translations easily as you browse the web. By the Google Translate team. Highlight or right-click on a section of text and click on the Translate icon next to it to translate it to your language. Or, to translate the entire page you’re visiting, click the translate icon on the browser toolbar.
Grammarly Chrome Extension will make sure your messages, documents, and social media posts are clear, mistake-free, and impactful. Adding Grammarly to Chrome means that your spelling and grammar will be vetted on Gmail, Facebook, Twitter, Linkedin, Tumblr, and nearly everywhere else you write on the web.
Found a webpage, image, or quote that you want to save for later? With the Google Keep Chrome Extension, easily save the things you care about to Keep and have them synced across all of the platforms that you use — including web, Android, iOS, and Wear. Take notes for additional detail and add labels to quickly categorize your note for later retrieval.
Evernote Web Clipper
Use the Evernote extension to save things you see on the web into your Evernote account. Clip the web pages you want to keep. Save them in Evernote. Easily find them on any device. This extension enables you to clip any article or web page, clip to a specific notebook and assign tags
and use Evernote to find clips on any device. Evernote Web Clipper can also be used for highlighting key text from any website or article, using text and visual callouts to draw attention, share and email clips or create a URL link.
Here are a few things that should help you start writing codes for your Chrome Extension right away. Here is a list.
- Source Code editing software installed in your computer (I prefer using Visual Studio Code)
- A folder in any location to store the Chrome Extension files like manifest.json, background.js, popup.html, and so on.
An extension’s architecture will depend on its functionality, but many robust extensions will include multiple components:
- Background script
- Content script
- Options page
- UI Elements
Every extension contains a JSON-formatted manifest file, named manifest.json, that provides important information about the Chrome Extension.
The background script is the extension’s event handler. It contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.
Just as extensions allow users to customize the Chrome browser, the options page enables customization of the extension. Options can be used to enable features and allow users to choose what functionality is relevant to their needs.
An extension’s user interface should be purposeful and minimal. The UI should customize or enhance the browsing experience without distracting from it. Most extensions have a browser action or page action, but can contain other forms of UI, such as context menus, use of the omnibox, or creation of a keyboard shortcut.
An extension using a page action and a popup can use the declarative content API to set rules in the background script for when the popup is available to users. When the conditions are met, the background script communicates with the popup to make its icon clickable to users.
That’s all. Now your environment is established and you are ready to code.
In the next chapter, we’ll be learning how to display an alert message using a bookmarklet. Feel free to reach out for any queries.
Extensions are bundles of codes that can be used to customize Google Chrome browsing experience.
Hope, the introduction to chrome extensions was informative and was able to pique your interest and in coming up with your own extensions. We’ll look at some ways you can do so in the upcoming chapters.
‘Importance of Chrome Extension Development’ https://medium.com/@codeit_llc/the-importance-of-chrome-extension-development-b8cbb9405bf2
‘Definition of Chrome Extensions’ https://developer.chrome.com/extensions
‘Google Translate, Grammarly, Google Keep, Evernote Web Clipper’ https://chrome.google.com/webstore/category/extensions