使用Angular構建Chrome插件

最近公司有業務需求須要作一個Chrome插件，本來想着用jQuery + Bootstarp搞定。

可是因爲已經使用Angular已經過久了，從新再用jQuery有點蛋疼。

後面查了一下資料，發現有人用React寫過Chrome插件。

仔細看了下，以爲實際上應該是同樣的原理。嘗試了一下Angular + Material，果真能夠，過程以下:

1.先貼配置

Angular CLI: 7.1.3
Angular: 7.1.3
Node: 10.11.0
Material UI: 7.2.1

配置理論上不須要跟我同樣，我貼出來的緣由是方便有個參考而已。Angular 4以上的版本應該都是能夠通用的。

2.Angular項目打包編譯

沒有項目的話用CLI新建一個
ng new OneAngularProject

已有項目的直接在項目下build
ng build

注意，build時不用任何參數，以往咱們爲了壓縮合並js,css等文件會添加參數，以保證build出來的是最小版本。但若是是構建Chrome插件的話，就不能加參數了。

3.編輯manifest.json

我項目裏的mainfest.json以下

{
    "manifest_version": 2,
    "name": "Angular Chrome Extension",
    "description": "Miner app as chrome extension using angular7",
    "version": "1.0",
    "browser_action": {
        "default_icon": "favicon.ico",
        "default_popup": "index.html"
    },
    "permissions": [],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "web_accessible_resources": [
        "assets/css/*",
        "assets/js/*",
        "assets/fonts/*"
    ]
}

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 注意這句必定要加上，不加上的話會報錯

web_accessible_resources 字段看本身項目裏的業務需求請自定義

4.將build好的文件放入manifest.json所在文件夾下

在Chrome瀏覽器中加載該插件便可，記得要打開開發者模式

效果如圖：

具體如何開發Chrome插件和一些細節，這裏就不提了。

有興趣的能夠看這個博客裏的文章，我的以爲寫得仍是很不錯的。

chrome插件開發教程