-
1 Understanding Chrome Extensions for Beginners
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…
-
2 Understanding Chrome Extensions Manifest.json
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…
-
3 Understanding Chrome Extensions Content Scripts
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…
-
4 Understanding Chrome Extensions Background Scripts
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…
-
6 Understanding Chrome Extensions Permissions
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…
-
7 Understanding Chrome Extensions Web Accessible Resources
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…
-
21 Understanding Chrome Extensions Text to Speech
The chrome.tts API is used to convert text into audible speech generated by the text-to-speech system. It takes advantage of the already built in TTS capabilities of the operating system. The official Chrome Extensions documentation on TTS is here: https://developer.chrome.com/docs/extensions/reference/api/tts How to declare in the Manifest.json {… “permissions”:[ “tts” ],…} How to generate Speech from text Run a…
-
2 Understanding Chrome Extensions Manifest.json
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…
-
22 Understanding Chrome Extensions Desktop Capture
The chrome.desktopCapture API is used to capture the screen, window or individual tabs and can be used to make a creating a screen recorder. We’d encourage reading the official chrome documentation here: https://developer.chrome.com/docs/extensions/reference/api/desktopCapture and how navigator.mediaDevices.getUserMedia function works. How to declare it in Manifest.json {…”permissions”:[ “desktopCapture”]…} How to use the API? The are to major functions in this API chrome.desktopCapture.chooseDesktopMedia and chrome.desktopCapture.cancelChooseDesktopMedia showing the popup…
-
5 Understanding Chrome Extensions Communication
The flow of data within our browser extensions is a vital part in creating any incredible and useful tool. In this article we hope to show you how data can moves within the different parts of the extension. So far, in the articles we’ve written prior, we’ve covered that there are 3 major parts of…
Category: Understanding Chrome Extensions
Ultimate guide for Understanding chrome extensions.
