Building a Chrome extension involves several key components. Here are the main ones: Popup UI (web): Think of it as a mini website running within the extension’s popup. The popup runs an HTML file, so you can use frameworks like React, Solid, and Vue to build the UI for the popup, and simply use index.html as the…

Continue Reading

When diving into the world of Chrome extensions, the manifest.json file is your essential roadmap. It’s the cornerstone that defines your extension’s identity, capabilities, and permissions. Think of it as the DNA of your extension, detailing everything from its name and version to the specific permissions it needs to function. Understanding this file is crucial for any…

Continue Reading

Content scripts are a powerful feature of Chrome extensions that allow you to run JavaScript code in the context of web pages. This enables your extension to interact with web pages directly, modifying content, listening for events, and enhancing the browsing experience. Content scripts are specified in the manifest.json file and can be programmed to run on…

Continue Reading

Simply put background scripts are service workers JavaScript files that handle the extensions main events. They operate independent of a webpage and/or the extension popup. Setting Up Background Scripts Here is code on how you declare a background script in the manifest.json file. { … “background”: { “service_worker”: “background.js”, “type”: “module” }, …} The JavaScript file background.js can be named anything…

Continue Reading

In this article we are going to looking at declaring permissions for chrome extensions. Permissions are declared in the manifest.json file to give the extensions access to variety of extension’s APIs and features. There are four types of permissions that can be declared in the manifest.json; “permissions”, “optional_permissions”, “host_permissions” and “optional_permissions”. Here is an example of how that would…

Continue Reading

Web Accessible Resources are files within your chrome extension that web pages and other external extensions can have access it to. By default webpages and other external extensions do NOT have access to these file, so the developer needs to declare in the manifest.json the extension files should certain webpages have access to. This feature is typical used…

Continue Reading

The chrome.tabs API is used for interacting with your browser tabs. You can do all sort of this with this API from creating new tabs, rearranging them, redirecting to a new URL, and even communicate to the content scripts running on those tabs. In this article we are going to look at several functions the chrome.tabs API provides. However,…

Continue Reading

By using the chrome.identity API it enables use to identify/retrieve signed-in users, authenticate via Google OAuth or other social OAuth options, get access token tokens and more. In this article we are going to cover how to initial a login sequence for Facebook and Google using the chrome.identity API. You see the official documentation on the API here: https://developer.chrome.com/docs/extensions/reference/api/identity How…

Continue Reading

In this article we are going to look at the chrome.windows API. Its an API used for interacting with the browser windows. Similar to the chrome.tabs API you can use the API to create and change browser windows. Types of Windows There are different types of windows you can create. Popup or Panel These are borderless windows. You can not…

Continue Reading

Context Menu is the menu that appears when a user right clicks (alternative clicks) on an element in a webpage. In this article we will cover the chrome.contextMenus API. https://developer.chrome.com/docs/extensions/develop/ui/context-menu. An API responsible for context menus for chrome extensions. There are 4 major functions normally used in this API chrome.contextMenus.create, chrome.contextMenus.update chrome.contextMenus.removeAll and chrome.contextMenus.onClicked.addListener. 3 of which, as you can see handle displaying the contextMenu and…

Continue Reading