web extension starter

Web-Extension-Starter

「ブラウザで実行されると書き込み」拡張機能を構築するWeb拡張スターター

@abhijithvijayan製

寄付： Paypal 、 Patreon

---

❤§それ？ €githubまたはそれについてツイートする。

？‍♂ ‍♂️YOCT + TYPESCRIPT =このブランチ

？ React + JavaScript = Checkout React-JavaScriptブランチ

?? HTML + JavaScript =チェックアウトマスターブランチ

特徴

• クロスブラウザサポート（Web-ExtensionsAPI）
• ブラウザテーラードマニフェスト生成
• コード変更に関する自動ビルド
• Auto Packブラウザ固有のビルドファイル
• サススタイリング
• デフォルトでタイプスクリプト
• ES6モジュールはサポートしています
• デフォルトでUIライブラリを反応します
• スマートリロード

ブラウザのサポート

49および後の✔	52および後の✔	36＆後の✔	79および後の✔	最新の✔	最新の✔	最新の✔

100,000人以上のユーザーがいる生産の拡張機能によって使用されます。

• Daily.dev in Daily.dev拡張機能
• ansh/jiffyreader.comのJiffy Reader
• Abhijithvijayan/Kutt-ExtensionのKutt-Extension
• lisongx/doubanimdbのdoubanimdb
• Unbyte/MOOCアシスタントのMOOCアシスタント
• crawlab-team/artipubのartipub

そしてもっと...

このテンプレートを使用します

新しいディレクトリを作成して実行します

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

クイックスタート

あなたが持っていることを確認してください

• node.js 10以降はインストールされています

次に、以下を実行します。

• npm install依存関係をインストールします。
• npm run dev:chrome for Chrome拡張機能の開発サーバーを起動する
• npm run dev:firefox Firefoxアドオンの開発サーバーを起動する
• npm run dev:opera Opera Extensionの開発サーバーを開始する
• npm run build:chromeを構築するChrome
• npm run build:firefox Firefoxアドオンを構築します
• npm run build:operaを構築するオペラ
• npm run buildビルドとパック拡張機能はすべて拡張/ディレクトリに拡張機能をすべて一度にパックします

発達

• npm install依存関係をインストールします。

• 開発のファイルの変更を見る

  • クロム
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • オペラ
    • npm run dev:opera

• ブラウザに拡張機能をロードします

• クロム

  • ブラウザアドレスバーに移動し、 chrome://extensionsを入力します
  • Developer Modeボタンを確認して、有効にします。
  • Load Unpacked Extension…ボタン。
  • extension/でブラウザフォルダーを選択します。

• Firefox

  • アドオンをabout:debugging ASTAMELT ADD-ONとしてロードします。
  • 抽出されたディレクトリでmanifest.jsonファイルを選択します

• オペラ

  • opera:extensionsを介して拡張機能をロードします
  • 拡張機能の抽出されたディレクトリから解放されたDeveloper Modeとロードを確認します。

生産

• npm run buildそれぞれすべてのブラウザへのextension/BROWSERディレクトリの拡張機能をビルドします。

注：デフォルトでは、 manifest.jsonはバージョン0.0.0で設定されています。 WebPackローダーは、Buildのバージョンをpackage.jsonバージョンのバージョンとともに更新します。新しいバージョンをリリースするために、 package.jsonと実行スクリプトのバージョンを更新します。

package.jsonバージョンを使用したくない場合は、ここでオプションを無効にすることができます。

ブラウザ固有のManifest.jsonを生成します

ブラウザベンダーを使用したsource/manifest.jsonファイルを更新しましたマニフェストキー

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

ベンダーがchromeの場合、これは次のようにコンパイルします。

 {
  "name" : "SuperChrome" ,
}

---

|で分離して、複数のベンダーにキーを追加しますプレフィックスで

 {
  __chrome|opera__name: "SuperBlink"
}

ベンダーがchromeまたはopera場合、これは次のようにコンパイルします。

 {
  "name": "SuperBlink"
}

詳細については、 wext-manifest-loaderパッケージの元のreadmeを参照してください

バグ

バグ、不足しているドキュメント、または予期しない動作については、ここに問題を提出してください。

Linting＆TypeScript Config

• 共有ESLINT＆THE PRETTIER構成 - @abhijithvijayan/eslint-config
• 共有TypeScript構成 - @abhijithvijayan/tsconfig

ライセンス

MIT©Abhijith Vijayan