基本零配置的 Webextension 腳手架，用 React TypeScript Sass 開發瀏覽器擴展

Create React Typescript Sass Webextension

靈活強大的零配置 Webextension 開發腳手架。

• 支持 React, TypeScript 和 Sass
• Jest 測試，內含 sinon-chrome
• 提供虛擬瀏覽器擴展環境，方便開發 UI
• 自動生成 Webpack 入口
• 支持任意瀏覽器導出，能夠用不一樣的 Manifest

安裝

<pre>
git clone git@github.com:crimx/create-react-typescript-sass-webextension.git 你的倉庫名
cd 你的倉庫名
git remote set-url git@github.com:你的用戶名/你的倉庫名.git
yarn install
</pre>

使用

大多數狀況下你只須要處理 src 下的文件：

• 這個模板自帶一個典型擴展的三個主要部分： backgroud, content 和 popup 。不須要的話直接刪除就行，Webpack 入口會自動生成。
• 若是須要輸出更多的頁面或腳本，只需在 src 中新建目錄，目錄名會被用做入口名。目錄中應包含一個 index.(js|jsx|ts|tsx) 文件。若是須要輸出頁面的話再添加個 index.html 做爲模板。能夠參考 popup 頁面。

• background, components, assets 和 manifest 是預留名稱。

  • background 用於生成背景腳本，用其它的名字做入口的話虛擬擴展環境不會加載。
  • components 放共用的組件。
  • assets 放靜態文件。

  • manifest 用於生成 manifest.json 。

    • 不要刪除 common.manifest.json。若是你不但願合併設置，把它的內容改爲空 JSON {}。
    • 支持任意瀏覽器，添加相應文件便可，如 edge.manifest.json 。
• 若是須要在 src 目錄下添加目錄，卻又不但願其生成入口，用 _ 開頭的目錄名。

命令

構建

• yarn start 加載虛擬瀏覽器擴展環境，調整頁面樣式時有用。

  • 因擴展的安全政策，在真實的擴展環境中開發會很不方便。框架的 devtool 用不了，熱加載和自動刷新也很麻煩…… 因此我寫了個模擬環境，主要實現了 runtime message 和 storage 兩大塊，跟真實行爲基本一致。若是須要更多，在 config/fake-env/webextension-page.js 中添加。
  • 默認加載 popup 頁面。 若是要換其它入口，好比 options 頁面，能夠運行 yarn start --main=options。
  • background 腳本會默認加載 (若是存在的話)。
  • 修改 config/fake-env/fake-ajax 攔截 ajax 請求。
• yarn dev 跟 yarn start 同樣。

• yarn test 模塊測試。

  • yarn test --coverage 查看 coverage 結果。
  • 內含 sinon-chrome ，TypeScript 類型已調好，直接寫代碼就行。

• yarn build 完整構建項目。

  • 分別輸出 Chrome 和 Firefox 結果到 build 目錄中。
  • 要得到更新後的版本號，先 yarn release 再構建。

• yarn devbuild 不壓縮代碼快速構建項目，檢測文件變化。

  • 默認 chrome ，對於其它瀏覽器，如 Firefox ，運行 yarn devbuild --firefox 。
  • 瀏覽器對應的 manifest 文件必須存在 manifest 下，如 opera.manifest.json 。
• 在命令後添加 --debug 能夠開啓 process.env.DEBUG_MODE 。

Git

• yarn commit 使用 conventional 風格 commit 代碼。 VSCode 用戶還能夠用 vscode-commitizen 擴展。
• yarn release 自動計算增長版本號並更新 CHANGELOG 日誌。

高級配置

自動更新依賴

能夠設置 travis CI 和 greenkeeper 來自動更新依賴。

若是須要一併更新 lockfile ，使用 greenkeeper-lockfile 。

Commit 風格

本模板使用 conventional 風格。如需更換，參考 commitlint 和 commitizen 配置。

代碼風格

本模板使用 TypeScript 版本的 Standard JavaScript 代碼風格，能夠在 tslint.json 中修改。

更多配置

參考 create-reate-app ，大部分支持。