web extension starter

Web-Extension-Starter

Weberweiterungsstarter zum Erstellen "Schreiben Sie einmal auf einem beliebigen Browser" -Einweiterung

? ‍Eitung von @abhijithvijayan hergestellt

Spenden: Paypal , Patreon

---

❤️ es? ️ es auf Github oder Tweet darüber.

? ‍Eitung React + TypeScript = dieser Zweig

? React + JavaScript = Checkout React-JavaScript-Zweig

? HTML + JavaScript = Checkout Master Branch

Merkmale

• Cross Browser-Unterstützung (Web-Extensions-API)
• Browser maßgeschneiderte Manifestgeneration
• Automatische Erstellung auf Codeänderungen
• Automatische Packungen browserspezifische Build -Dateien
• Sass -Styling
• Standardmäßig TypeScript
• ES6 -Module Unterstützung
• Reagieren Sie die UI -Bibliothek standardmäßig
• Smart Reload

Browserunterstützung

49 & später ✔	52 & später ✔	36 & später ✔	79 & später ✔	Letzte ✔	Letzte ✔	Letzte ✔

Wird von Erweiterungen in der Produktion verwendet, die über mehr als 100.000 Benutzer enthält.

• täglich.dev in Daily.dev Erweiterung
• Jiffy -Leser in Ansh/Jiffyreader.com
• Kutt-Erweiterung in Abhijithvijayan/Kutt-Extension
• DouBanimdb in Lisongx/DouBanimdb
• MOOC-Assistent in Unbyte/MOOC-Assistant
• Artipub in Crawlab-Team/Artipub

Und noch viel mehr ...

Verwenden Sie diese Vorlage

Erstellen Sie ein neues Verzeichnis und führen Sie aus

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

Schneller Start

Stellen Sie sicher, dass Sie haben

• Node.js 10 oder später installiert

Dann führen Sie Folgendes aus:

• npm install , um Abhängigkeiten zu installieren.
• npm run dev:chrome um den Entwicklungsserver für die Chrome -Erweiterung zu starten
• npm run dev:firefox um den Entwicklungsserver für Firefox Addon zu starten
• npm run dev:opera zum Starten des Entwicklungsservers für die Opera -Erweiterung
• npm run build:chrome zum Aufbau von Chromerweiterungen
• npm run build:firefox zum Bau von Firefox Addon
• npm run build:opera zur Erstellung der Opera -Erweiterung
• npm run build Builds und Packs -Erweiterungen auf einmal auf Erweiterung/ Verzeichnis

Entwicklung

• npm install , um Abhängigkeiten zu installieren.

• Dateiänderungen in der Entwicklung ansehen

  • Chrom
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • Oper
    • npm run dev:opera

• Lasterweiterung im Browser laden

• Chrom

  • Gehen Sie in die Browseradressleiste und geben Sie chrome://extensions ein
  • Überprüfen Sie die Taste Developer Mode , um sie zu aktivieren.
  • Klicken Sie auf die Schaltfläche Load Unpacked Extension… .
  • Wählen Sie Ihren Browser -Ordner in extension/ aus.

• Firefox

  • Laden Sie das Add-On about:debugging als vorübergehendes Add-On.
  • Wählen Sie die manifest.json -Datei im extrahierten Verzeichnis aus

• Oper

  • Laden Sie die Erweiterung über opera:extensions
  • Überprüfen Sie den Developer Mode und laden Sie, wie aus dem extrahierten Verzeichnis der Erweiterung ausgepackt.

Produktion

• npm run build Build baut die Erweiterung für alle Browser zum extension/BROWSER .

Hinweis: Standardmäßig wird das manifest.json mit Version 0.0.0 festgelegt. Der WebPack Loader aktualisiert die Version im Build mit der der package.json -Version. Um eine neue Version zu veröffentlichen, aktualisieren Sie die Version in package.json und führen Sie das Skript aus.

Wenn Sie package.json -Version nicht verwenden möchten, können Sie hier die Option deaktivieren.

Generieren browserspezifischer Manifest.json

Aktualisieren Sie source/manifest.json -Datei mit dem Browser -Anbieter, den Sie vorangestellt sind

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

Wenn der Verkäufer chrome ist, kompiliert dies zu:

 {
  "name" : "SuperChrome" ,
}

---

Fügen Sie mehreren Anbietern Schlüssel hinzu, indem Sie sie mit | trennen im Präfix

 {
  __chrome|opera__name: "SuperBlink"
}

Wenn der Anbieter chrome oder opera ist, kompiliert dies zu:

 {
  "name": "SuperBlink"
}

Weitere Informationen finden Sie in der ursprünglichen Readme des wext-manifest-loader -Pakets

Käfer

Bitte stellen Sie hier ein Problem für Fehler, fehlende Dokumentation oder unerwartetes Verhalten ein.

LINTING & TISTICSCISCE -Konfiguration

• Shared Eslint & Prottier Configuration - @abhijithvijayan/eslint-config
• Shared TypeScript -Konfiguration - @abhijithvijayan/tsconfig

Lizenz

Mit © Abhijith Vijayan