web extension starter

web-extension-starter

Démarreur d'extension Web pour créer "Écrire une fois exécuté sur n'importe quel navigateur"

? ‍️ fabriqué par @abhijithvijayan

Faire un don: Paypal , Patreon

---

❤️? Çons sur github ou tweetez à ce sujet.

? ‍️ React + TypeScript = Cette branche

? React + javascript = Checkout React-Javascript Branch

?? Html + javascript = branche maîtresse de caisse

Caractéristiques

• Prise en charge du navigateur croisé (API Web-Extensions)
• Génération manifeste sur mesure du navigateur
• Construire automatique sur les modifications de code
• Auto Packs Browser Specific Build Fichiers
• Style sass
• TypeScript par défaut
• Prise en charge des modules ES6
• Bibliothèque d'interface utilisateur React par défaut
• Rechargement intelligent

Support de navigateur

49 et plus tard ✔	52 et plus tard ✔	36 et plus tard ✔	79 et plus tard ✔	Dernier ✔	Dernier ✔	Dernier ✔

Utilisé par des extensions de production qui comptent plus de plus de 100 000 utilisateurs.

• Daily.dev dans Daily.dev Extension
• Jiffy Reader dans ANSH / JiffyReader.com
• Kutt-Extension à Abhijithvijayan / Kutt-Extension
• Doubanimdb à Lisongx / Doubanimdb
• Assistant MOOC à Unbyte / MOOC-Assistant
• Artipub à Crawlab-Team / Artipub

Et bien d'autres ...

Utilisez ce modèle

Créer un nouveau répertoire et exécuter

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

Démarrage rapide

Assurez-vous d'avoir

• Node.js 10 ou ultérieure

Ensuite, exécutez ce qui suit:

• npm install pour installer des dépendances.
• npm run dev:chrome pour démarrer le serveur de développement pour l'extension Chrome
• npm run dev:firefox pour démarrer le serveur de développement pour Firefox Addon
• npm run dev:opera pour démarrer le serveur de développement pour l'extension de l'opéra
• npm run build:chrome to Build Chrome Extension
• npm run build:firefox pour construire Firefox Addon
• npm run build:opera to Build Opera Extension
• npm run build Builds and Packs Extensions en une fois vers l'extension / répertoire

Développement

• npm install pour installer des dépendances.

• Pour regarder les modifications de développement des fichiers

  • Chrome
    • npm run dev:chrome
  • Incendier
    • npm run dev:firefox
  • Opéra
    • npm run dev:opera

• Extension de chargement dans le navigateur

• Chrome

  • Accédez à la barre d'adresse du navigateur et tapez chrome://extensions
  • Vérifiez le bouton Developer Mode pour l'activer.
  • Cliquez sur le bouton Load Unpacked Extension… .
  • Sélectionnez le dossier de vos navigateurs en extension/ .

• Incendier

  • Chargez le module complémentaire via about:debugging comme module complémentaire temporaire.
  • Choisissez le fichier manifest.json dans le répertoire extrait

• Opéra

  • Chargez l'extension via opera:extensions
  • Vérifiez le Developer Mode et chargez comme déballé à partir du répertoire extrait de l'extension.

Production

• npm run build construit l'extension de tous les navigateurs à extension/BROWSER respectivement.

Remarque: Par défaut, manifest.json est défini avec la version 0.0.0 . Le chargeur WebPack mettra à jour la version dans la version avec celle de la version package.json . Afin de publier une nouvelle version, mettez à jour la version dans package.json et exécutez le script.

Si vous ne souhaitez pas utiliser la version package.json , vous pouvez désactiver l'option ici.

Générer un manifeste spécifique du navigateur.json

Mettre à jour le fichier source/manifest.json avec les touches manifestes préfixées du fournisseur de navigateur

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

Si le vendeur est chrome cela compile pour:

 {
  "name" : "SuperChrome" ,
}

---

Ajoutez des clés à plusieurs fournisseurs en les séparant avec | dans le préfixe

 {
  __chrome|opera__name: "SuperBlink"
}

Si le vendeur est chrome ou opera , cela compile à:

 {
  "name": "SuperBlink"
}

Voir la lecture originale du package wext-manifest-loader pour plus de détails

Insectes

Veuillez déposer un problème ici pour les bogues, la documentation manquante ou le comportement inattendu.

Configuration de lignée et de typeScript

• Configuration d'eslint et plus jolie partagée - @abhijithvijayan/eslint-config
• Configuration de TypeScript partagée - @abhijithvijayan/tsconfig

Licence

MIT © Abhijith Vijayan