使用 Vuejs 开发 chrome 插件的注意事项
2017-06-01 16:42
831 查看
使用 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.storageAPI,两者的区别及
chrome.storage使用方法:http://www.ituring.com.cn/book/miniarticle/60274
总结
使用 Vuejs 开发 chrome 插件最重要的步骤就是配置"content_security_policy"了,其他的就是翻阅开发文档了,一般过一遍就能知道个大概。虽然都是用 html css js 写的,但是还是有一些区别,特别是js文件之间的通信会有些繁琐。
相关文章推荐
- jQuery插件jQuery-JSONP开发ajax调用使用注意事项
- [转]多操作系统平台协同开发时 GIT 的注意事项: 不同操作系统中的换行符(不要使用git的换行符自动转换功能,并且,尽可能保证代码的换行符都是unix); 避免使用第三方插件(如 EGit );
- chrome插件开发文档及注意事项
- CSS覆盖height注意事项,暨Chrome插件的使用
- (礼拜三log)前端开发:好用的日历插件推荐 plus table使用的注意事项
- 多操作系统平台协同开发时 GIT 的注意事项: 不同操作系统中的换行符(不要使用git的换行符自动转换功能,并且,尽可能保证代码的换行符都是unix); 避免使用第三方插件(如 EGit );
- jQuery插件jQuery-JSONP开发ajax调用使用注意事项
- 使用Backbone.js开发Chrome便签插件
- SolidWorks异步模式开发,使用COM接口获取Array数据时的注意事项
- 使用Git 作为项目管理工具开发时的方式和注意事项
- iPhone开发进阶(11)--- 多线程的使用与注意事项
- 开发在Excel中使用的ActiveX控件时的注意事项--exd 临时文件问题
- Netbeans使用xdebug插件调试PHP程序的一个注意事项
- 使用.net框架应用C#语言开发窗口程序的一些注意事项
- IPHONE 开发 8 -- Object C Foundation.h它包括所有的类 方法 集合,-(id)init,iphone上使用Sqlite的注意事项小结
- 64位系统使用VS2010开发32位ASP.NET应用--注意事项
- iPhone开发多线程使用与注意事项
- 学习:使用SHAREPOINT对象模型开发时注意事项(转)
- iPhone开发进阶(11)— 多线程的使用与注意事项
- [开发知识点] 使用JQuery 将DataTable 转化成JSON数据,前端无法处理JSON数据的注意事项