使用Vuejs 开发chrome 插件的注意事项

Posted 2022-01-10 huangcong

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