使用Angular构建Chrome插件

发布时间:2019-07-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用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以上的版本应该都是可以通用的。

使用Angular构建Chrome插件

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所在文件夹下

使用Angular构建Chrome插件

在Chrome浏览器中加载该插件即可,记得要打开开发者模式

使用Angular构建Chrome插件

效果如图:

使用Angular构建Chrome插件

具体如何开发Chrome插件和一些细节,这里就不提了。

有兴趣的可以看这个博客里的文章,个人觉得写得还是很不错的。

@L_512_5@

脚本宝典总结

以上是脚本宝典为你收集整理的使用Angular构建Chrome插件全部内容,希望文章能够帮你解决使用Angular构建Chrome插件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。