Angular schematics to add live reload to chrome extension
npm install ngx-chrome-extension-live-reload這是一個 Angular 的 schematics,可快速配置 Chrome Extension 的開發環境,讓你在開發時,可以自動 reload Chrome Extension。
``bash`
ng new my-app
cd my-app
ng add ngx-chrome-extension-live-reload
npm start
`bash`
// 產出上架的 zip 檔案
npm run build:extension
此 schematics 會幫你做以下事情:
- 安裝本地開發 chrome extension 所需套件。
- package.json 增加開發與打包所需的 scripts。manifest.json
- 增加 chrome extension 所需的 、content-script.js、background.js。angular.json
- 增加 goToTop component,作為示範。
- 增加 popup component,作為示範。
- 增加 options component,作為示範。
- 調整 的 build` 的相關設定。
- 配置 開發所需的 webpack。
在 chrome / edge 新增 extension 成功後。
可到 angular.dev 測試,如右下角有出現按鈕,即代表成功。