使用Angular构建Chrome插件

最近公司有业务需求需要做一个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插件开发教程