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

使用Vuejs 开发chrome 插件的注意事项的更多相关文章

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

    使用 Vuejs 开发 chrome 插件 chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 ch ...

  2. 自己开发chrome插件生成二维码

    摘要: 最近在开发微信项目时,需要在微信调试,所以经常会在微信中输入本地服务地址,输入起来特别麻烦,所以自己就想了想微信中的扫一扫,然后开发了这款chrome插件,将当前url生成二维码,用微信扫一扫 ...

  3. 开发chrome插件(扩展)

    官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...

  4. 替代Infinity绝佳的自主开发chrome插件

    最近闲来无事在好朋(da)友(shen)的帮助下开发一个chrome插件,目的是为了替换infinity主页插件, 当然在此也推荐一波infinity确实不错,界面和易用性都是非常好用的水准了. 主页 ...

  5. blazor wasm开发chrome插件

    用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家 先简单介绍下WebAssembly的原理: "WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式 ...

  6. 开发Chrome插件,实现网站自动登录

    近期被一个事情困扰着,我们采购了一款软件,里面有一个数据大屏页,当登录过期后,数据就会保持原状,不再更新.和供应商反馈了很多次,都无法彻底解决数据显示的问题,没办法,自己周末在家研究,网站自动登录的事 ...

  7. 试着开发chrome插件

    我的第一个chrome插件,是app形式的 代码如下 创建一个文件: 1.manifest.json { "version": "1.0", "man ...

  8. 使用Python开发chrome插件

    本文由 伯乐在线 - xianhu 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:pythonspot.com.欢迎加入翻译小组. 谷歌Chrome插件是使用HTML.JavaScrip ...

  9. Web前端开发Chrome插件

    参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...

随机推荐

  1. java8的捕获多个异常的一个写法

    这是按intellij idea的提示知道的, 可以写成 catch(xxxException | yyyException | zzzException e){ } 这样的形式,对几个不同的异常使用 ...

  2. Codechef RIN 「Codechef14DEC」Course Selection 最小割离散变量模型

    问题描述 提供中文版本好评,一直以为 Rin 是题目名字... pdf submit 题解 参考了 东营市胜利第一中学姜志豪 的<网络流的一些建模方法>(2016年信息学奥林匹克中国国家队 ...

  3. Python Django 支付宝 扫码支付

    安装python-alipay-sdk pip install python-alipay-sdk --upgradepip install crypto 如果是python 2.7安装0.6.4这个 ...

  4. Business Model Design 业务模型设计

    Note This section is split into two parts, which describe the use of two different Object-relational ...

  5. automaticallyAdjustsScrollViewInsets

    参考链接: https://www.jianshu.com/p/a1987a7c11ba

  6. Oracle 快速配置连接服务

    [net Manager配置] oracle客户端连接,或者代码连接时,需要配置本地连接服务. [快速配置] ①找到 tnsnames.ora 文件,使用记事本打开 ② TEST{#服务名} = (D ...

  7. 【Gradle】Gradle插件

    Gradle插件 插件的作用 把插件应用到项目中,插件会扩展项目的功能,帮助在项目构建过程中做很多事情. 1.可以添加任务到项目中,帮助完成测试.编译.打包等. 2.可以添加依赖配置到项目中,可以通过 ...

  8. Spring Boot 2 + Redis例子

    Redis是一个key-value数据库,支持存储的value类型包括string(字符串).list(链表).set(集合).zset(sorted set --有序集合)和hash(哈希类型).在 ...

  9. mssql sqlserver 将逗号分隔的一列数据转换为多列数据的方法分享

    转自:http://www.maomao365.com/?p=10278  摘要: 下文讲述sqlserver中将使用逗号组合的单列数据,分隔为多列数据的方法 实验环境:sql server 2012 ...

  10. Linux设置免密登陆

    生成秘钥 ssh-keygen -t rsa -C "XX@qq.com",然后一路回车就行 生成之后会在用户的根目录生成一个 ".ssh"的文件夹 进入&qu ...