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.browsingData API deals with removing browsing data from the local user’s browser. This includes caches, cookies, downloads, passwords, history and many more. You can see a comprehensive list of browser data the chrome extension can remove using this API here: https://developer.chrome.com/docs/extensions/reference/api/browsingData#method-remove How to declare it in Manifest.json { … “permissions”: [ “browsingData”, ], …} How to clear Browsing Data You’ll…

Continue Reading

The chrome.management API enable the extensions to retrieve details and manage other installed extensions on the client’s browser. Essentially, the chrome.management can enable, disable or uninstall other extensions in browser. For more info you can see Google Chrome Documentation on it: https://developer.chrome.com/docs/extensions/reference/api/management How to declare it in Manifest.json { … “permissions”: [ “management” ], …} How to get other Extension…

Continue Reading

The chrome.commands API is used to enable the chrome extension run actions from keyboard shortcuts. You can bind a defined-command with a combinations for keyboard keys. Let’s show you had it is done. You find the official documentation by the Google Chrome Team here: https://developer.chrome.com/docs/extensions/reference/api/commands How to Declare it in Manifest.json You’ll notice the commands keyword is not in permissions array. {…

Continue Reading

By using the chrome.sidePanel API you can render your own HTML in the chrome browser’s side panel alongside the loaded website. Official Documentation: https://developer.chrome.com/docs/extensions/reference/api/sidePanel Why Use it? How to declare it in Manifest.json Use the sidePanel keyword in permissions to use the chrome.sidePanel API function in code like so {… “permissions”: [ “sidePanel” ],…} Use the side_panelkeyword outside permissions to define default settings for the…

Continue Reading