在日常工作中，我们可能经常需要在手机端测试我们所做的页面，如果每次在手机端测试都手输网址，网址短的还好，如果长的网址也需要一个字母一个字母去敲，那无疑是一场噩梦，试想我们有一个工具只需要点击一个按钮就可以将当前网址生成二维码，而手机端仅仅需要扫一扫就可以打开我们想要测试的网址，是不是很美好呢？下面我们就自己动手从零开始实现一个生成当前网址二维码的插件。在开始编写之前，我们需要先做一点点知识预备：

1、我们之前在讲基础知识的时候有提到browser_action和page_action这两个东西，前者是表示这是一个浏览器行为，其图标显示在地址栏右侧，而后者表示这是一个页面行为，其图标现在在地址栏后面，当然在现在的浏览器上是看不出来这个区别的，他们两个不能同时定义，那么网址二维码生成是一个浏览器行为还是一个页面行为呢？就其行为而论网址二维码生成是将页面的网址生成二维码，所以毫无疑问它应该是一个页面行为。

2、我们需要使用到的API：

（1）chrome.pageAction.show 在特定标签特定行为情况下显示页面行为的图标，与之对应的还有chrome.pageAction.hide，在特定标签特定行为下隐藏页面行为的图标，使用方式：

 chrome.pageAction.show(tabId);

 chrome.pageAction.hide(tabId);

（2）chrome.tabs.onUpdated 这是一个回调函数，我们需要在tab更新的时候选择是要显示还是隐藏页面行为的图标。

 chrome.tabs.onUpdated.addListener(function(tabId, info) {

   chrome.pageAction.show(tabId);

 });

（3）chrome.tabs.getSelected 获取当前选中的选项卡的明细。由于上面使用了tabs相关API，别忘记需要在manifest.json中申请tabs权限。

3、网址生成二维码选择直接调用api，这里选择使用联图的API：

 http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=https://www.deanhan.cn

在了解了上面的基础点之后，是时候展示真正的技术了，首先规划一下目录结构：

核心文件manifest.json代码：

 {

     "name": "二维码生成器",

     "version": "1.0",

     "description": "二维码生成器",

     "manifest_version": 2,

     "icons":

     {

         "16": "images/icon-48.png",

         "48": "images/icon-48.png",

         "128": "images/icon-48.png"

     },

     "permissions": ["tabs", "https://*/*", "http://*/*"],

     "background":

     {

         "scripts": ["js/background.js"]

     },

     "page_action":

     {

         "default_popup": "popup.html"

     }

 }

popup.html的代码如下:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Popup</title>

     <link rel="stylesheet" href="css/style.css">

 </head>

 <body>

 <div id="contain">

     <img src="" alt="" id="qrcode">

 </div>

 <script type="text/javascript" src="js/popup.js"></script>

 </body>

 </html>

popup.js的代码如下：

 var imgNode = document.getElementById("qrcode"),

     prefix = "http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=";

 chrome.tabs.getSelected(function(w) {

     var url = w.url,

         img = new Image();

     img.src = prefix + url;

     img.onload = function() {

         imgNode.src = this.src;

         imgNode.style.display = "block";

     }

 })

背景页background.js的代码如下：

 chrome.tabs.onUpdated.addListener(function(tabId, info) {

     chrome.pageAction.show(tabId);

 });

style.css 代码如下

 #contain{

     background: url(../images/loading.gif) center center no-repeat;

     width: 200px;

     height: 200px;

 }

 #contain img{

     width: 100%;

     height: 100%;

     display: none;

 }

运行截图：

我们在popup.js 中输出一下当点击插件小图标时的值

var imgNode = document.getElementById("qrcode"),

    prefix = "http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=";

chrome.tabs.getSelected(function (w) {

    console.log('-------->', w); // 输出一下 w

    var url = w.url,

        img = new Image();

    img.src = prefix + url;

    img.onload = function () {

        imgNode.src = this.src;

        imgNode.style.display = "block";

    }

})

通过开发者调试工具如下：

从上图可以看出我们就是获取到了url参数，然后将其生成一个二维码展示出来。

Chrome插件开发（三）的更多相关文章

  1. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  2. Chrome插件开发，美化网页上的文件列表。chrome-extension，background

    上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...

  3. Chrome插件开发，美化网页上的文件列表。chrome-extension，content-scripts

    趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...

  4. [Chrome插件开发]001.入门

    Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...

  5. chrome插件开发-消息机制中的bug与解决方案

    序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...

  6. Chrome插件开发入门（二）——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  7. 手把手教你开发Chrome扩展三：关于本地存储数据

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...

  8. chrome插件开发学习（一）

    两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...

  9. jquery插件开发三种方法

    1.好像之前看视频记录下来的,不记得了. //类级别插件开发,主要是在jQuery中定义全局方法: //第一种写法 jQuery.myFunc = function(str){ alert(" ...

随机推荐

  1. ArcGIS Server10.1 动态图层服务

    动态图层的应用场景: 1 改变现有图层:符号,渲染方式和版本,这些都可以通过客户端请求的时候给定相应的参数来进行设置,从而来达到轻易改变地图的效果. 2 添加地图服务中没有的图层 添加的数据可以是矢量 ...

  2. css 精灵图的使用

    精灵图的使用 1.给一个容器定义一个大小(宽高) 2.引入背景图 3.定位到自己你想要的图片位置 例如:  background-position: 0 0;  background-position ...

  3. SpringCache - 请求级别缓存的简易实现

    前言 在SpringCache缓存初探中我们研究了如何利用spring cache已有的几种实现快速地满足我们对于缓存的需求.这一次我们有了新的更个性化的需求,想在一个请求的生命周期里实现缓存. 需求 ...

  4. SpringBoot系列：Spring Boot使用模板引擎Thymeleaf

    一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...

  5. 02-28 scikit-learn库之线朴素贝叶斯

    目录 scikit-learn库之朴素贝叶斯 一.MultinomialNB 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.GaussianNB 三.Bernoul ...

  6. Linux内存描述之内存区域zone–Linux内存管理(三)

    服务器体系与共享存储器架构 日期 内核版本 架构 作者 GitHub CSDN 2016-06-14 Linux-4.7 X86 & arm gatieme LinuxDeviceDriver ...

  7. Flutter 的setState与FutureBuilder及EasyRefresh示例

    用setState改变状态 class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListSt ...

  8. 用 Sphinx 搭建博客时，如何自定义插件？

    之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建. 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清 ...

  9. python学习（内置函数）

    1.id()返回对象的内存地址 a = 1 print id(a) print id(1) 2.int()用于将数据类型转换为整型 a = " b = 2 print int(a) + b ...

  10. HTTPS 验证访问略记

    背景 互联网刚刚兴起的时候,网络安全并没有被很好的重视.HTTP 是明文传输的,这为意图谋不道德之事者提供了诸多的便利.当越来越多的人利益受到侵害的时候,开始重视网络传输的安全问题了. HTTPS 加 ...