• 使用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 中使用 evalnew 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

  • 相关阅读:
    记账本程序三
    记账本程序二
    记账本程序一
    <<人月神话>>笔记1
    库存管理系统
    Java实现数据库
    第九周作业
    四则运算总结
    java异常处理
    第十周学习进度报告
  • 原文地址:https://www.cnblogs.com/huangcong/p/11026025.html
Copyright © 2020-2023  润新知