Mellowtel Zonder Bundlers voor Browser Extensies Gids

Deze gids legt uit hoe je Mellowtel in je browserextensie kunt integreren zonder gebruik te maken van bundlers zoals Webpack of Vite. In plaats daarvan gebruik je een enkel vooraf gebundeld bestand dat werkt in zowel content scripts als service workers.

Project Setup

Begin met een basisstructuur voor een browserextensie:

your-extension/
├── icons/
├── popup/
│   ├── popup.html
│   └── popup.js
├── background.js           # Je service worker
├── content_script.js
├── manifest.json
└── mellowtel.js           # Wordt toegevoegd in de volgende stap

Het verkrijgen van de Mellowtel Bundle

Je hebt twee opties om het mellowtel.js bestand voor je extensie te verkrijgen:

Optie 1: Gebruik Vooraf Gebundeld Bestand

De eenvoudigste manier om te beginnen is door het vooraf gebundelde mellowtel.js bestand te gebruiken uit de mellowtel-bundled repository.

Ga naar de mellowtel-bundled repository
Download het mellowtel.js bestand
Kopieer het naar je extensie directory

Optie 2: Genereer Je Eigen Bundle

Als je liever zelf de bundle genereert, volg dan deze stappen:

Maak een Tijdelijke Bundeling Directory

Maak een tijdelijke directory aan om Mellowtel te installeren en de bundle te genereren:

mkdir mellowtel-bundling
cd mellowtel-bundling
npm init -y
npm install mellowtel

Dit creëert een aparte map met het Mellowtel pakket dat je alleen voor bundeling zult gebruiken.

Bundle Mellowtel met esbuild

Vanuit de mellowtel-bundling directory, maak je een enkele bundle die werkt in zowel service workers als content scripts:

npx esbuild node_modules/mellowtel/dist/index.js --bundle --format=iife --global-name=Mellowtel --footer:js="globalThis.Mellowtel = Mellowtel.default" --platform=browser --outfile=mellowtel.js --minify --legal-comments=none

Deze opdracht:

Neemt de Mellowtel bron van node_modules/mellowtel/dist/index.js
Bundelt alle afhankelijkheden in een enkel bestand
Gebruikt IIFE formaat met een globale naam voor universele compatibiliteit
Voegt een footer toe om de default export wereldwijd beschikbaar te maken
Optimaliseert voor browseromgeving en minimaliseert de output
Creëert mellowtel.js in de bundeling directory

Kopieer de Bundle naar Je Extensie

Na het uitvoeren van de esbuild opdracht, kopieer je het gegenereerde bestand naar je extensie directory:

cp mellowtel.js ../your-extension/

Nu kun je de tijdelijke bundeling directory verwijderen omdat je alleen het uitvoerbestand nodig had:

cd ..
rm -rf mellowtel-bundling

Je extensie map bevat nu het gebundelde Mellowtel bestand klaar voor gebruik.

Configureer Je Manifest (Beide Opties)

Ongeacht welke optie je hierboven hebt gekozen, configureer je manifest.json om de Mellowtel bundle op te nemen in content scripts:

{
  "manifest_version": 3,
  "name": "Je Extensie Naam",
  "version": "1.0",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["mellowtel.js", "content_script.js"]
    }
  ],
  "permissions": [
    "storage",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]
}

Belangrijk:

Het veld "type": "module" stelt ES module imports in je service worker in staat.
In de content scripts array moet mellowtel.js voor content_script.js worden geladen zodat de Mellowtel globale variabele beschikbaar is wanneer je content script wordt uitgevoerd.

Gebruik Mellowtel in Je Extensie

Voor je service worker (background.js), importeer je het gebundelde bestand:

// background.js
import './mellowtel.js';

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Vervang met je configuratiesleutel
    await mellowtel.initBackground();
})();

Voor content scripts is Mellowtel beschikbaar als een globale variabele (geen import nodig, aangezien het via de manifest wordt geladen):

// content_script.js
// Mellowtel is beschikbaar als een globale variabele van mellowtel.js

(async () => {
  const mellowtel = new Mellowtel("<configuration_key>"); // Vervang met je configuratiesleutel
  await mellowtel.initContentScript();
})();

Testen van Je Extensie

Om je extensie te testen:

Ga naar chrome://extensions/ in Chrome (of equivalent in andere browsers)
Schakel “Ontwikkelaarsmodus” in
Klik op “Pakket zonder verpakking laden” en selecteer je extensie map

Deze aanpak geeft je de voordelen van het gebruik van Mellowtel zonder de complexiteit van het opzetten van een volledig build systeem zoals Webpack of Vite.

​Project Setup

​Het verkrijgen van de Mellowtel Bundle

​Optie 1: Gebruik Vooraf Gebundeld Bestand

​Optie 2: Genereer Je Eigen Bundle

​Maak een Tijdelijke Bundeling Directory

​Bundle Mellowtel met esbuild

​Kopieer de Bundle naar Je Extensie

​Configureer Je Manifest (Beide Opties)

​Gebruik Mellowtel in Je Extensie

​Testen van Je Extensie