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.
Contents
- What are Chrome Extensions?
- Need For a Chrome Extension
- Some Popular Chrome Extensions
- Setting Up The Environment
- Summary
What are Chrome Extensions?
Google defines Chrome Extensions as
Chrome Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
In other words, a Chrome extension is just a small software that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.
Why do you need an extension in chrome?
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.
Well-known examples of trusted extensions
Below are a few extensions that are trusted by millions and are very useful indeed
Google Translate
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
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.
Google Keep
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.
Setting Up The Environment
Prerequisites
Here are a few things that should help you start writing codes for your Chrome Extension right away. Here is a list.
- Prior Basic understanding of HTML and Javascript.
- 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.
Architecture
An extension’s architecture will depend on its functionality, but many robust extensions will include multiple components:
- Manifest
- Background script
- Content script
- Options page
- UI Elements
Manifest
Every extension contains a JSON-formatted manifest file, named manifest.json, that provides important information about the Chrome Extension.
Background Script
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.
Content Script
Extensions that read or write to web pages utilize a content script. The content script contains JavaScript that executes in the contexts of a page that has been loaded into the browser. Content scripts read and modify the DOM of web pages the browser visits.
Content scripts can communicate with their parent extensions by exchanging messages and storing values using storage API
Options page
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.
UI Elements
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.
Extension UI pages, such as a popup, can contain ordinary HTML pages with JavaScript logic. Extensions can also call tabs.create or window.open() to display additional HTML files present in the extension.
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.
Summary
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.
Chapter Navigation
Chapter 1: An Introduction to Extensions
Chapter 3: Changing the background color of a paragraph with Chrome Extension
Chapter 4: Replacing paragraph text with your user-given text using Chrome Extension
Chapter 5: Replacing images in a website using Chrome Extension
Chapter 6: Replacing images with your own images using Chrome Extension
Chapter 7: Deploy and Publish your Chrome Extension
Chapter 8: The Atomic Habit Tracker
References
‘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
2 thoughts on “How to Build a Chrome Extension | Chapter 1: An Introduction”