用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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Angular.js中数组操作的方法教程
2017/07/31 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue如何搭建多页面多系统应用
2020/06/17 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python读取指定日期邮件的实例
2019/02/01 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
UNIX特点都有哪些
2016/04/05 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
国家助学金感谢信
2015/01/21 职场文书
2015年公务员工作总结
2015/04/24 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript