最近公司有業(yè)務(wù)需求需要做一個(gè)Chrome插件，原本想著用jQuery + Bootstarp搞定骤视。但是由于已經(jīng)使用Angular已經(jīng)太久了莱没，重新再用jQuery有點(diǎn)蛋疼扛吞。后面查了一下資料呻惕，發(fā)現(xiàn)有人用React寫(xiě)過(guò)Chrome插件。仔細(xì)看了下滥比，覺(jué)得實(shí)際上應(yīng)該是一樣的原理亚脆。嘗試了一下Angular + Material，果然可以盲泛，過(guò)程如下:
1.先貼配置
Angular CLI: 7.1.3
Angular: 7.1.3
Node: 10.11.0
Material UI: 7.2.1
配置理論上不需要跟我一樣濒持，我貼出來(lái)的原因是方便有個(gè)參考而已。Angular 4以上的版本應(yīng)該都是可以通用的寺滚。
2.Angular項(xiàng)目打包編譯
沒(méi)有項(xiàng)目的話(huà)用CLI新建一個(gè)
ng new OneAngularProject
已有項(xiàng)目的直接在項(xiàng)目下build
ng build
注意柑营，build時(shí)不用任何參數(shù)，以往我們?yōu)榱藟嚎s合并js,css等文件會(huì)添加參數(shù)村视，以保證build出來(lái)的是最小版本官套。但如果是構(gòu)建Chrome插件的話(huà)，就不能加參數(shù)了蚁孔。
3.編輯manifest.json
我項(xiàng)目里的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'" 注意這句一定要加上奶赔，不加上的話(huà)會(huì)報(bào)錯(cuò)
web_accessible_resources 字段看自己項(xiàng)目里的業(yè)務(wù)需求請(qǐng)自定義
4.將build好的文件放入manifest.json所在文件夾下
在Chrome瀏覽器中加載該插件即可，記得要打開(kāi)開(kāi)發(fā)者模式
效果如圖：
具體如何開(kāi)發(fā)Chrome插件和一些細(xì)節(jié)杠氢，這里就不提了站刑。
有興趣的可以看這個(gè)博客里的文章，個(gè)人覺(jué)得寫(xiě)得還是很不錯(cuò)的鼻百。
