使用 Vuejs 开发 chrome 插件的注意事项
使用 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文件之间的通信会有些繁琐。
使用 Vuejs 开发 chrome 插件的注意事项的更多相关文章
- 使用Vuejs 开发chrome 插件的注意事项
chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方 ...
- 自己开发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有许多优秀的插件可以帮助前端开发人员 ...
随机推荐
- springboot入门之简单demo
项目构建 我们采用maven构建SpringBoot工程,首先创建一个maven工程,对应的pom文件如下: <properties> <java.version>1.8< ...
- nginx代理websocket协议
以下是代码段.location /wsapp/ { proxy_pass http://wsbackend; proxy_http_version 1.1; proxy_set ...
- vue微信分享链接添加动态参数
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...
- (转)MySQL登陆后提示符的修改
MySQL登陆后提示符的修改 方法一:mysql命令行修改方式 mysql>prompt \u@night \r:\m:\s-> PROMPT set to '\u@night \r:\m ...
- C++ STL 初探
学过C++的人肯定会很熟悉STL标准模板库,STL其实就是封装了一系列的接口,供我们调用.很多函数或者算法的实现不需要我们从头开始写,大大提高我们的编程效率.这篇博客在简单介绍STL的情况下,会详细的 ...
- Tomcat性能调优-让小猫飞奔
一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü 吞吐量 ü Responsetime ü Cpuload ü MemoryUsa ...
- BugFree3.0.4Linux环境安装指南
bugfree安装的前提是配置LAMP(apache+mysql+php),我安装的linux系统是centos6.0 一.安装Apache服务器 1.安装apache yum install htt ...
- linux安装unzip及使用
安装完linux ,发现没有UNZIP,没办法,重新安装. 1.获取unzip源码 sudo wget http://downloads.sourceforge.net/infozip/unzip55 ...
- linux解压.tar.xz压缩包
今天,打算更新一下node版本(v6.11.1 -> v8.9.4),结果阿里云服务器使用nvm命令下载慢如牛,于是直接在node官网找到合适的v8.9.4压缩包下载到电脑里,然后up到阿里云服 ...
- golang channel的使用
channel常常结合go程使用,作为通信消息队列 var testChan chan int fmt.Println(testChan) // nil 未初始化,没地址 testChan ) fmt ...