平时用ad这些谷歌浏览器拦截插件，觉得挺有意思的，就萌发写一个浏览器插件。

文章目录

前言
一、我的第一个插件
- 项目结构：
二、how to do
- 1. 最简单的插件
- 2. 浏览器加载插件
- 3. browser_action
- 4. popup.html
- 5. permissions
项目地址
总结

前言

本来以为会挺难的，其实也不是，多看官方文档就行

非官方文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、我的第一个插件

用过firefox浏览器的都知道，有一个把当前页面的url生成二维码给手机扫描的功能

如图：

我的第一个插件决定就做它了。

效果：

项目结构：

二、how to do

1. 最简单的插件

新建文件夹，目录下建manifest.json文件

{"name": "urlToQRCode","version": "1.0","description": "a chrome extension which make tab url to qrcode for user scan by their phone","manifest_version": 2,
}
"icons": { "128": "qrcode128.png" },

注意manifest_version 须大于2，
icons可选，大小最后选128x128

2. 浏览器加载插件

打开开发者模式，点击加载已解压的扩展程序。选择你刚才的目录。你的第一个插件就已经完成了。

3. browser_action

在manifest.json增加下面字段

{"name": "urlToQRCode","version": "1.0","description": "a chrome extension which make tab url to qrcode for user scan by their phone","manifest_version": 2,"icons": { "128": "qrcode128.png" },"browser_action": {"default_icon": "qrcode.png","default_title": "点击生成当前页面二维码","default_popup": "popup.html"},"permissions": ["http://*/","https://*/*","tabs","activeTab"]
}

就是点击显示popup.html 。

4. popup.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link href="popup.css" rel="stylesheet" type="text/css" />
</head><body><div class="container"><div id="qrcode"></div><span id="info">扫一扫，直接在手机上打开</span></div></body>
<script text="text/javascript" src="qrcode.js"></script>
<script text="text/javascript" src="popup.js"></script></html>

新建：popup.css

.container {display: flex;display: -webkit-flex;flex-direction: column;align-items: center;width: 300px;height: 300px;justify-content: center;border-radius: 5px;
}#info {margin-top: 5px;font-size: 20px;
}

引入qrcode.js 这是个开源项目，可在https://github.com/davidshimjs/qrcodejs,获得，或者本项目gitee中获取：https://gitee.com/yu_sheng_sheng/tab-url-to-qrcode-chrome-extension

同目录建popup.js，

window.onload = function() {chrome.tabs.query({ active: true, windowId: chrome.windows.WINDOW_ID_CURRENT }, (res) => {var qrcode = new QRCode(document.getElementById("qrcode"), {width: 200,height: 200});qrcode.makeCode(res[0].url);})
}

注意不可在popup.html 使用行内样式或者js脚本,官方要求。

chrome.tabs.query 官方api 作用是获取tab，

5. permissions

所需要的权限。这里用到tab

全部弄好刷新

该插件就完成了。

项目地址

https://gitee.com/yu_sheng_sheng/tab-url-to-qrcode-chrome-extension

总结

这里只是简单的功能，
复杂的还有两个字段content_script 和background ，
把这三个popup.html, content_script ,background api看懂，并且三者通信搞懂，基本可以没啥插件你不会开发了。

popup.html: 用户点击后展示页面，插件使用者使用
content_script.js: 插入脚本到浏览器当前页面
background.js：插件后台，可与你的服务器交互

下一个插件：模仿firefox 的取色器。

谷歌浏览器插件初体验相关推荐

vue-cli3插件初体验
vue-cli3发布自2018年8月,距离现在还不是特别久,最好搭建项目刚好用到,所以写下这篇文章,记录一下踩坑经历. vue的作者说过,vue-cli的本质是模版的拉取,太多的配置导致了模版的难以 ...
css-doodle插件初体验
官方解释:css-doodle组件将根据其内部的规则(纯CSS)生成一个div网格.您可以使用CSS轻松操纵这些单元格以提供图形模式或动画图形插件官网:https://css-doodle.com/ ...
Maven插件初体验【附源码】
B站视频地址学过Java的小伙伴对Maven一定很熟悉了,但对于Maven除了用来进行版本管理之外,你还用它做过什么呢? 或许很多人和我一样,用了几年的Maven压根就没想过Maven除了版本管理还 ...
ABAQUS 使用RSG绘制插件初体验
大概工作流为: 将操作过程记录并修改为.py文件,即将操作转为函数,也就是后面kernel调用的对象. 为函数的变量定义默认参数,并且在RSG里面定义对应的参数名称,变量类型. 在RSG里面进行界面排 ...
MEF 插件式开发 - DotNetCore 初体验
背景叙述在传统的基于 .Net Framework 框架下进行的 MEF 开发,大多是使用 MEF 1,对应的命名空间是 System.ComponentModel.Composition.在 Do ...
Windows Embedded CE 6.0开发初体验(二)CE开发环境收藏
上一篇<Windows Embedded CE 6.0开发初体验>之"嵌入式开发流程": http://blog.csdn.net/aawolf/archive/200 ...
webpack从入门到精通（一）初体验
1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...
我的Go+语言初体验--Go+之环境安装与程序编码初体验
一.Go+ 简介对于 Go+ 工程而言: Go+ 将支持所有 Go 功能(包括部分支持 cgo): Go+ 提供了更简单优雅的语法,比 Go 更接近自然语言: Go+ 易于学习,不必在一开始就处理工 ...
文档数据库RavenDB-介绍与初体验
不知不觉,".NET平台开源项目速览"系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分 ...

谷歌浏览器插件初体验