使用 Vuejs 开发 chrome 插件的注意事项
使用 Vuejs 开发 chrome 插件
chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件。
一个好的 chrome 插件可以提高我们的开发效率,甚至方便我们的生活。例如 Vue-devtools
,是 Vuejs 的开发者不可或缺的利器,再如最常见的谷歌翻译插件,可以翻译整个网页中的英文内容,可以很方便的帮助我们查阅英文文档。
chrome 插件使用前端技术开发,但是提供了一些高级的接口(文件操作,操作USB设备,系统信息等),所以可以开发出一些桌面级别的应用。
chrome 插件开发文档:Chrome扩展及应用开发(首发版)
分享一个本人使用 Vuejs 开发的一个 chrome 插件: Easy-todo
CSP
CSP(Content Security Policy),内容安全策略,CSP 通常是在 header 或者 HTML 的 meta 标签中定义的,它声明了一系列可以被当前网页合法引用的资源,如果不在 CSP 声明的合法范围内,浏览器会拒绝引用这些资源,CSP 的主要目的是防止跨站脚本攻击(XSS)。
为什么介绍 CSP 呢?因为 Chrome 扩展应用了 CSP ,严格的内容安全策略将导致不能在 javascript 中使用 eval
, new Function
等方法,一些js框架或者库不能正常工作。
Chrome扩展允许开发者放宽一点点CSP的限制,如果希望能在 Chrome 插件中使用 Vue ,需要在 manifest
中做一点配置:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
更多关于 CSP 的描述:http://www.ituring.com.cn/book/miniarticle/73949
有些朋友可能会有疑问,能在 Chrome 插件中使用 vue-router
, vuex
和一些组件库吗?只要你配置了上面的 CSP ,这些将都可以正常工作 。
如何本地存储 todolist 中的数据呢?简单的可以使用 html5
的 localStorage
,或者使用 chrome 封装的 chrome.storage
API,两者的区别及 chrome.storage
使用方法:http://www.ituring.com.cn/book/miniarticle/60274
总结
使用 Vuejs 开发 chrome 插件最重要的步骤就是配置 "content_security_policy"
了,其他的就是翻阅开发文档了,一般过一遍就能知道个大概。虽然都是用 html css js 写的,但是还是有一些区别,特别是js文件之间的通信会有些繁琐。