Chapter 6
Chrome extensions
An extension popup, designed the same way, with the code in JavaScript.
Creating an extension
When you create the app, choose Chrome extension. The design is the popup that opens when you press the extension icon (800 × 600 at most) and the code is the same JavaScript as Electron, with the same components (all but the menu).
The studio generates a complete Manifest V3 extension in build/extension: manifest.json, popup.html and React packed inside (an extension cannot load outside code). It needs Node.js the first time, like Electron.
What an extension adds
| From code | What it does |
|---|---|
await this.storage.get(key, fallback) | Reads saved data (chrome.storage) |
await this.storage.set(key, value) | Saves data (text, number, list or object) |
await this.currentTab() | The active tab: { id, url, title } |
this.openTab(url) | Opens an address in a new tab |
await this.runInPage(function, ...args) | Runs the function inside the open page and returns what it returns |
this.badge(text, color) | Puts text on the icon badge |
class Form1 extends FormDesign {
async Count_click() {
const text = await this.runInPage(() => document.body.innerText);
const words = text.split(/\s+/).filter(Boolean).length;
this.Words.text = words + " words";
this.badge(String(words));
}
}The runInPage function runs in the page, not in the extension: it only sees what is in the page and what it receives in args. Chrome pages (chrome://…) cannot be read.
Test, load in Chrome and publish
- Run (F9) opens a preview of the popup: data is saved in the preview and the active tab is a sample one. Debug opens it with the developer tools.
- Load in Chrome prepares the extension, copies its folder and opens
chrome://extensions: turn on Developer mode, press Load unpacked and choose that folder. After every change, save and press ↻ on the extension card. - Export the extension creates its folder and a
.zip, which is what you upload to the Chrome Web Store.