web extension starter

網絡擴展啟動器

Web擴展啟動器要構建“在任何瀏覽器上運行一旦寫入”擴展程序

@abhijithvijayan製造的？

捐贈：貝寶（Paypal） ，帕特雷恩（Patreon）

---

❤️嗎？ 它在github上或發推文。

？ ‍♂️ react + tyscript =此分支

？ React + JavaScript = Checkout React-JavaScript分支

？ html + javaScript =結帳主分支

特徵

• 交叉瀏覽器支持（Web-Extensions API）
• 瀏覽器量身定制的一代
• 自動構建代碼更改
• 自動包裝瀏覽器特定的構建文件
• Sass造型
• 默認情況下打字稿
• ES6模塊支持
• React UI庫默認
• 智能重新加載

瀏覽器支持

49及以後✔	52及以後✔	36及以後✔	79及以後✔	最新✔	最新✔	最新✔

由超過100,000多個用戶的生產擴展名使用。

• daily.dev in daily.dev擴展
• ansh/jiffyreader.com中的Jiffy閱讀器
• Abhijithvijayan/kutt-Extension中的kutt-extension
• Lisongx/doubanimdb中的doubanimdb
• MOOC助理在Unbyte/MOOC助理
• Artipub in Crawlab-Team/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啟動用於Chrome擴展的開發服務器
• npm run dev:firefox啟動Firefox插件開發服務器
• npm run dev:opera啟動用於Opera擴展的開發服務器
• npm run build:chrome構建Chrome Extension
• 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 。
  • 在提取的目錄中選擇manifest.json文件

• 歌劇

  • 通過opera:extensions
  • 檢查Developer Mode並從擴展名提取的目錄中解開包裝。

生產

• npm run build構建了所有瀏覽器的擴展程序，分別為extension/BROWSER目錄。

注意：默認情況下， manifest.json設置為版本0.0.0 。 WebPack Loader將使用package.json版本的版本中的版本更新版本。為了發布新版本，請在package.json中更新版本和運行腳本。

如果您不想使用package.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

錯誤

請在此處提出問題，以獲取錯誤，缺少文檔或意外行為。

linting＆打字稿配置

• 共享Eslint＆Priptier配置 - @abhijithvijayan/eslint-config
• 共享打字稿配置 - @abhijithvijayan/tsconfig

執照

麻省理工學院©Abhijith Vijayan