用VueJS写一个Chrome浏览器插件的实现方法
浏览器基本已经天下大统了，放眼望去都是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>
打开浏览器插件页面，右上角打开开发者模式，加载插件目录。
这时我们的第一个插件就好了，点击插件图标就可以显示Hello World。
把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>
不用卸载刚才安装的插件目录，只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对，和期望的结果不一样。
而且注意看插件页面，出现错误了。
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!'
}
})
刷新一下插件，搞定了。
如何调试插件
调试插件和调试一个普通的网页一样简单，右键选择审查元素就好了。
包括插件的配置页面，新弹出的页面等等，都可以用一样的方法调试。
如何发布插件
当你完成插件开发后，在启用开发者模式的插件中心就可以看到打包插件按钮，这个按钮可以帮你快速打包crx文件，第一次打包你不需要提供密钥，它会帮你生成一个密钥，之后的版本升级你需要用同一个密钥打包，否则就被认为是一个新的插件了，所以切记保存好密钥。
拿着打包好的crx文件你就可以到商店发布啦，不过发布到谷歌商店是要交钱的，一年9.9美刀的开发者会员。国内的各种商店收不收费不知道。
比较恶心的是，如果你的插件没有在谷歌浏览器的商店里上架，Chrome浏览器是不认的，以前还可以拖到插件页面安装，现在怎么都绕不过去了。但基于Chromium开发的第三方浏览器还是可以装的，比如Opera，QQ，360等等。
一些技巧
他山之石
可能你要做的插件别人已经做过了，或者你想借鉴别人的插件，有两个方法。
- 右键审查别人的插件页面，看看代码怎么工作的。
- 安装一个下载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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
让webpack+vue-cil项目不再自动打开浏览器的方法
当我们用vue-cil建立一个完整的webpack+vue的项目之后,它的设置选项还是蛮多的.比如,当我们输入npm run dev开始跑起项目之后,就会自动的打开浏览器,并把页面打开. 按理说,这是一个很方便的配置.问题是,我们在调试的过程中,可能需要不断的重启项目.每一次重启,就会开一个网页,让我非常头疼. 查看了一下,找到了解决方法,分享给各位看官. 打开 /build/dev-server.js 文件 末尾,代码如下: // when env is testing, don't need
-
快速解决Vue项目在IE浏览器中显示空白的问题
vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu
-
详解vue填坑之解决部分浏览器不支持pushState方法
前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器.部分app以及IE9浏览器由于不支持pushState方法,会导致页面加载不出来. 解决这个问题的思路是: 当浏览器支持pushState方法时,开启history模式,不支持则开启hash模式 对链接做判断,当跳转的链接与路由模式不匹配时,则跳转至正确的链接 nginx对域名下的路径访问均重写向至index.html 以下为具体实现方法: 判断使用何种路由模式 let isHans =
-
vue之浏览器存储方法封装实例
如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v
-
vue+iview 兼容IE11浏览器的实现方法
最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来.后来和产品说了,同意兼容IE11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆 然后 打包之后一直 const 去不掉,查了之后是 webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的 1.IE new Date() 失败 new D
-
默认浏览器设置及vue自动打开页面的方法
以下为windows 系统操作,仅供参考. 一.修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器. 1.首先打开"开始菜单",点击"控制面板": 2.在"控制面板"里面找到"默认程序",进入后点击"设置默认程序": 3.加载好后选择 "谷歌浏览器": 4.选择"将此程序设置为默认值",如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果.
-
解决Vue2.0自带浏览器里无法打开的原因（兼容处理）
本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom
-
用VueJS写一个Chrome浏览器插件的实现方法
浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码.你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情. 常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单. 程序目录结构 最简单的扩展程序只需要3个文件,或者
-
10 款珍藏已久的 Chrome 浏览器插件(程序员必装)
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览器,我想那就试试吧,期初我觉得用起来很别扭,毕竟我不是一个"喜新厌旧"的人.但用的次数越来越多,也就习惯了. Chrome 浏览器有一个好处,就是插件极其丰富,只有你想不到的,没有你找不到的,这恐怕是 Chrome 浏览器被众多爱好者钟爱的原因吧.当然了,Chrome 浏览器本身也非常强大
-
vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件
当前最新版本:vue-devtools 6.0.0-beta.7 用这个版本主要是为了支持vue3 推荐直接下载 https://www.crx4chrome.com/crx/107268/ 本地下载地址 自行构建 https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.6 安装 安装依赖(这里用npm比较快,记得用淘宝源) npm install --global windows-build-tools 等等等.......
-
通过vue写一个瀑布流插件代码实例
这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i
-
写一个Vue loading 插件
作者:imgss 出处:http://www.cnblogs.com/imgss 什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使
-
基于Vuejs和Element的注册插件的编写方法
1.首先要在HTML文档中引入jQuery版本2.0以下的.一个vuejs库 一个Element-UI库 <script src="js/jquery-1.11.0.min.js"></script> <script src="js/vue.js"></script> <script src="js/Element-UI.js"></script> 2.HTML的布局 &l
-
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/javascript" src="/js/jquery.uploadify-3.1_min.js?ver=<?php echo rand
-
使用React手写一个对话框或模态框的方法示例
打算用React写对话框已经很长一段时间,现在是时候兑现承诺了.实际上,写起来相当简单. 核心在于使用React的接口React.createPortal(element, domContainer).该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body),并保证只嵌入一次. 所以,我们可以这样写一个对话框或模态框: function Dialog() { return React.createPortal( <div>Dialog conte
-
一步一步教你写一个jQuery的插件教程(Plugin)
jQuery 的plugin开发需要注意的事情,1. 明确jQuery的命名空间只有一个.2. 明白options参数用来控制plugin的行为.3. 为默认的plugin设定提供公共的访问权限.4. 为子函数提供公共的访问权限.5. 私有的函数绝对是私有访问6. 支持metadata plugin.我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件. 1. 明确jQu
-
Vue+Koa2+mongoose写一个像素绘板的实现方法
前言 GitHub: server| 前端 为什么是绘板:v2ex 作为一名前端,总会有意无意接触到 NodeJS .有意无意会去看文档.有意无意会注意到框架,但真当需要我们需要在工作中善用它时,多半还是要感叹一句"纸上得来终觉浅".所以一周前我决定进行一个实践尝试,希望能把以往无意中学到的知识融汇贯通,最终选择把以前的一个画板 Demo 重写并添加 server 端. 技术栈 [vue + vuex + vue-router] 页面渲染 + 数据共享 + 路由跳转 [axios] 以