最近公司有业务需求需要做一个 Chrome 插件，原本想着用 jQuery + Bootstarp 搞定。
但是由于已经使用 Angular 已经太久了，重新再用 jQuery 有点蛋疼。
后面查了一下资料，发现有人用 React 写过 Chrome 插件。
仔细看了下，觉得实际上应该是一样的原理。尝试了一下 Angular + Material，果然可以，过程如下:
1. 先贴配置
Angular CLI: 7.1.3Angular: 7.1.3Node: 10.11.0Material UI: 7.2.1
配置理论上不需要跟我一样，我贴出来的原因是方便有个参考而已。Angular 4 以上的版本应该都是可以通用的。
2.Angular 项目打包编译
没有项目的话用 CLI 新建一个 ng new OneAngularProject
已有项目的直接在项目下 buildng 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 插件开发教程