用VueJS写一个Chrome浏览器插件的实现方法


Posted in Javascript onFebruary 27, 2019

浏览器基本已经天下大统了,放眼望去都是Chromium的天下。那么,能写一个浏览器插件也算是一种回报率不错的技能。

基本知识

浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码。你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情。

常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单。

程序目录结构

最简单的扩展程序只需要3个文件,或者更少。

my-addon
 |- manifest.json
 |- icon.png
 └─ popup.html
  • manifest.json:清单文件,用来描述插件本身,必须。
  • icon.png:图标文件,如果你不想用默认图标这也是必须的。
  • popup.html:算是插件的功能页吧,你至少得有点功能才有存在的意义吧。

当然上面的例子是最精简的情况了,一般的插件会有多个html,还有js目录,css目录等等,你可以把插件当成一个静态网站,唯一的区别是多了一个manifest文件用来描述这个静态网站。

清单文件示例

下面是一个精简版的manifest.json。

{
 "manifest_version": 2,

 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",

 "permissions": [
  "https://secure.flickr.com/"
 ],
 "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
 }
}

看上去是不是很直观,名字,版本,描述,权限,行为。如果要深入再查查官方文档就OK了。

Hello World插件

有了基础知识,我们速度来个Hello World,先写manifest.json。

{
  "manifest_version": 2,
  "name": "Hello",
  "version": "1.0.0",
  "description": "Hello, Chrome extension.",
  "icons":
  {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  "browser_action": 
  {
    "default_icon": "img/icon.png",
    "default_title": "Hello World",
    "default_popup": "popup.html"
  },
  "permissions":
  [
    "<all_urls>"
  ],
  "homepage_url": "https://github.com/tobyqin/"
}

再补一下图标文件和popup.html。

<!DOCTYPE html>
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>

打开浏览器插件页面,右上角打开开发者模式,加载插件目录。

用VueJS写一个Chrome浏览器插件的实现方法

这时我们的第一个插件就好了,点击插件图标就可以显示Hello World。

用VueJS写一个Chrome浏览器插件的实现方法

把Vue加进来

好像很容易嘛,我们直接用CDN的Vue,改造一下popup.html。

<!DOCTYPE html>
<html>
<body>
<div id="app">
  {{ message }}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
</body>
</html>

不用卸载刚才安装的插件目录,只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对,和期望的结果不一样。

用VueJS写一个Chrome浏览器插件的实现方法

而且注意看插件页面,出现错误了。

用VueJS写一个Chrome浏览器插件的实现方法

Refused to load the script 'https://cdn.bootcss.com/vue/2.6.6/vue.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-fMtOu4CF/4bYGHZuo6ltgNQyLcxFW9rBnAYSk3yz53w='), or a nonce ('nonce-...') is required to enable inline execution.

默认情况下,浏览器插件权限是非常低的,不允许访问除了插件本身的文件以外的文件,不能调用页面内脚本(inline script),也不能使用eval之类的函数。

你需要在manifest文件中配置好Content Security Policy(CSP)才能使用Vue。

{
 "manifest_version": 2,
 // ...
 "browser_action": {
  // ...
 },
 "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;"
}

因为这个CSP写起来实在不怎么友好,伟大的网友做了一个工具可以帮你一把。

https://github.com/foundeo/content-security-policy.com/

接下来,把页面内的script内容搬到单独的文件。

// popup.html

<!DOCTYPE html>
<html>
<body>
<div id="app">
  {{ message }}
</div>

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script src="app.js"></script>

</body>
</html>

// app.js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

刷新一下插件,搞定了。

用VueJS写一个Chrome浏览器插件的实现方法

如何调试插件

调试插件和调试一个普通的网页一样简单,右键选择审查元素就好了。

用VueJS写一个Chrome浏览器插件的实现方法

包括插件的配置页面,新弹出的页面等等,都可以用一样的方法调试。

如何发布插件

当你完成插件开发后,在启用开发者模式的插件中心就可以看到打包插件按钮,这个按钮可以帮你快速打包crx文件,第一次打包你不需要提供密钥,它会帮你生成一个密钥,之后的版本升级你需要用同一个密钥打包,否则就被认为是一个新的插件了,所以切记保存好密钥。

用VueJS写一个Chrome浏览器插件的实现方法

拿着打包好的crx文件你就可以到商店发布啦,不过发布到谷歌商店是要交钱的,一年9.9美刀的开发者会员。国内的各种商店收不收费不知道。

比较恶心的是,如果你的插件没有在谷歌浏览器的商店里上架,Chrome浏览器是不认的,以前还可以拖到插件页面安装,现在怎么都绕不过去了。但基于Chromium开发的第三方浏览器还是可以装的,比如Opera,QQ,360等等。

一些技巧

他山之石

可能你要做的插件别人已经做过了,或者你想借鉴别人的插件,有两个方法。

  1. 右键审查别人的插件页面,看看代码怎么工作的。
  2. 安装一个下载crx的插件,然后把别人的插件从商店下载到本地,重命名为zip并解压,就可以看到源码了。

当然啦,别人的源码可能做过混淆加密。

插件页面大小

如果你的插件会弹出一个页面,浏览器默认会根据内容自适应页面大小,就像上面例子里的那个hello world,很丑是吧。一般插件页面都是限制body高度和宽度的,这样才不会歪。

安全请求

现在很难找到不是https的页面里,所以你的插件里如果会往后台发送请求的话,也是需要支持https协议的,否则会被拦截的。

插件配置

如果你的插件是可配置的,怎么保存配置信息呢?直接用localStorage就行了。localStorage对每个站点都是独立的,每一个插件可以看成独立的站点,所以当你在插件里调用localStorage对象时就是当前插件的localStorage。如果你希望配置是可同步的,那么请考虑chrome.storage对象,里面提供了storage.local storage.sync

完整的例子

不想推荐文档什么的,自己需要会去搜索的。那么有没有一个完整的例子?当然有啦,去看我的github吧,觉得不错就点个赞。

https://github.com/tobyqin/chrome_vue_ext_demo

用VueJS写一个Chrome浏览器插件的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JS之相等操作符详解
Sep 13 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
jQuery each和js forEach用法比较
Feb 27 #jQuery
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 #Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 #Javascript
JavaScript中filter的用法实例分析
Feb 27 #Javascript
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 #Javascript
js中对象与对象创建方法的各种方法
Feb 27 #Javascript
You might like
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python文件操作的简单方法总结
2019/11/07 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
旅游管理专业生自荐信范文
2014/01/02 职场文书
小学班主任寄语大全
2014/04/04 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
家长学校教学计划
2015/01/19 职场文书
单身证明范本
2015/06/15 职场文书
辞职离别感言
2015/08/04 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Python进度条的使用
2021/05/17 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs