使用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
使用Vuejs 开发chrome 插件的注意事项的更多相关文章
- 使用 Vuejs 开发 chrome 插件的注意事项
使用 Vuejs 开发 chrome 插件 chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 ch ...
- 自己开发chrome插件生成二维码
摘要: 最近在开发微信项目时,需要在微信调试,所以经常会在微信中输入本地服务地址,输入起来特别麻烦,所以自己就想了想微信中的扫一扫,然后开发了这款chrome插件,将当前url生成二维码,用微信扫一扫 ...
- 开发chrome插件(扩展)
官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...
- 替代Infinity绝佳的自主开发chrome插件
最近闲来无事在好朋(da)友(shen)的帮助下开发一个chrome插件,目的是为了替换infinity主页插件, 当然在此也推荐一波infinity确实不错,界面和易用性都是非常好用的水准了. 主页 ...
- blazor wasm开发chrome插件
用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家 先简单介绍下WebAssembly的原理: "WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式 ...
- 开发Chrome插件,实现网站自动登录
近期被一个事情困扰着,我们采购了一款软件,里面有一个数据大屏页,当登录过期后,数据就会保持原状,不再更新.和供应商反馈了很多次,都无法彻底解决数据显示的问题,没办法,自己周末在家研究,网站自动登录的事 ...
- 试着开发chrome插件
我的第一个chrome插件,是app形式的 代码如下 创建一个文件: 1.manifest.json { "version": "1.0", "man ...
- 使用Python开发chrome插件
本文由 伯乐在线 - xianhu 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:pythonspot.com.欢迎加入翻译小组. 谷歌Chrome插件是使用HTML.JavaScrip ...
- Web前端开发Chrome插件
参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...
随机推荐
- java8的捕获多个异常的一个写法
这是按intellij idea的提示知道的, 可以写成 catch(xxxException | yyyException | zzzException e){ } 这样的形式,对几个不同的异常使用 ...
- Codechef RIN 「Codechef14DEC」Course Selection 最小割离散变量模型
问题描述 提供中文版本好评,一直以为 Rin 是题目名字... pdf submit 题解 参考了 东营市胜利第一中学姜志豪 的<网络流的一些建模方法>(2016年信息学奥林匹克中国国家队 ...
- Python Django 支付宝 扫码支付
安装python-alipay-sdk pip install python-alipay-sdk --upgradepip install crypto 如果是python 2.7安装0.6.4这个 ...
- Business Model Design 业务模型设计
Note This section is split into two parts, which describe the use of two different Object-relational ...
- automaticallyAdjustsScrollViewInsets
参考链接: https://www.jianshu.com/p/a1987a7c11ba
- Oracle 快速配置连接服务
[net Manager配置] oracle客户端连接,或者代码连接时,需要配置本地连接服务. [快速配置] ①找到 tnsnames.ora 文件,使用记事本打开 ② TEST{#服务名} = (D ...
- 【Gradle】Gradle插件
Gradle插件 插件的作用 把插件应用到项目中,插件会扩展项目的功能,帮助在项目构建过程中做很多事情. 1.可以添加任务到项目中,帮助完成测试.编译.打包等. 2.可以添加依赖配置到项目中,可以通过 ...
- Spring Boot 2 + Redis例子
Redis是一个key-value数据库,支持存储的value类型包括string(字符串).list(链表).set(集合).zset(sorted set --有序集合)和hash(哈希类型).在 ...
- mssql sqlserver 将逗号分隔的一列数据转换为多列数据的方法分享
转自:http://www.maomao365.com/?p=10278 摘要: 下文讲述sqlserver中将使用逗号组合的单列数据,分隔为多列数据的方法 实验环境:sql server 2012 ...
- Linux设置免密登陆
生成秘钥 ssh-keygen -t rsa -C "XX@qq.com",然后一路回车就行 生成之后会在用户的根目录生成一个 ".ssh"的文件夹 进入&qu ...