使用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文件之间的通讯会有些繁琐。

CPS版本下载：https://github.com/vuejs/vue/blob/csp/dist/vue.min.js