编写一个Chrome extension--网页二维码生成

时间 2019-11-10

标签编写一个 chrome extension 网页二维生成栏目 Chrome 繁體版

原文原文链接

很早以前就想过要用Chrome扩展开发一些实用的，或者有意思扩展。今天在看了segmentfault的技术周刊后，决定先按照别人写过的东西去~~抄一遍~~模仿的作一遍。javascript

本篇文章是看了从小目标开始，编写一个简洁的二维码chrome扩展模仿的。这篇文章写得很详细。我主要写写本身模仿过程当中的一些问题。css

Chrome extension基础

编写Chrome 扩展以前咱们须要大体的了解一下Google提供的开发文档。鉴于我可怜的英文水平，我推荐花几分钟看一下下面的文档：html

360翻译的官方API文档java
Chrome扩展及应用开发 ←这本书不只介绍API用法，还提供了好多实例。git

编写过程

有了上面几分钟的基础后，咱们能够开始正式编写代码了。建立一个文件夹，将扩展所建立的文件都放在里面，方便完成后打包。github

首先编写`manifest.json`

这是全部扩展的入口文件。看到后缀咱们就知道这文件的语法结构必须符合json的写法。Chrome 扩展必须包含的属性有name、version、manifest_version。其余可选属性包括：background、permissions、browser_action、page_action、options_page、content_scripts等等。chrome

{
    //目前Chrome版本为2
    "manifest_version": 2,
    //扩展名称
    "name": "QRcode",
    //扩展版本，可自定义
    "version": "1.0",
    //扩展描述，显示在扩展程序中
    "description": "简洁的二维码生成器",
    //显示在扩展程序中的图标
    "icons": {
        "16": "images/icon16.png",
        "128": "images/icon128.png"
    },
    //权限声明
    "permissions":["tabs"]
}

接下来就要编写扩展弹出页面`popup.html`文件

popup页面在被用户点击时初始化，关闭后就会销毁。因此该页面更多的是用来展现结果的。数据处理则须要background这个属性来声明，这里暂时没用到就很少说了。须要注意的是，应该用css指定popup页面大小。另外，Google不容许HTML和JavaScript混写在同一个文件内。全部咱们把相应的JS提出来，在HTML中添加外部引用。json

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
    .box {
        height: 200px;
        width: 200px;
        background: #EEE;
    }
    .box .title{
        text-align: center;
        margin-bottom: 10px;
    }
</style>
<body>
<div class="box">
    <div class="title">扫描二维码浏览本页面</div>
    <center>
    <div class="qrcode" id="qrcode"></div>
    </center>
</div>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>
</body>
</html>

编写相应的`popup.js`文件

chrome.tabs这个API能够与浏览器的标签页系统进行交互。具体API说明参考标签--扩展开发文档
经过获取到的标签页url传给QRCode。经过QRCode.js生成二维码。segmentfault

onload=function(){
  chrome.tabs.getSelected(function(tab){
      //QRCode(元素id,相关配置文件)
      var qrcode = new QRCode("qrcode", {
              text: tab.url,
              width: 160,
              height: 160,
              colorDark : '#000000',
              colorLight : '#ffffff',
              // QRCode的容错级别
              correctLevel : QRCode.CorrectLevel.H
            });
    console.log(qrcode);
  });
}

到目前为止，一个简单的QRCode生成器边完成了。

浏览器

后续

若是想让二维码中间位置显示自定义图片(如上图)，那么只须要在popup页面自定义一段CSS便可。

修改`popup.html`文件

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
    .box {
        height: 200px;
        width: 200px;
        background: #EEE;
        position: relative;
    }
    .box .title{
        text-align: center;
        margin-bottom: 10px;
    }
    .box .qrcode{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .box .logo {
          top: 80px;
          left: 80px;
          width: 40px;
          height: 40px;
          position: absolute;

    }
</style>
<body>
<div class="box">
    <div class="title">扫描二维码浏览本页面</div>
    <center>
    <div class="qrcode" id="qrcode"></div>
    <div class='logo'>
    <img src="http://amoyiki.github.io/images/avatar.jpg" width="40" height="40"/>
    </div>
    </center>
</div>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>
</body>
</html>

动态获取网页icon

若是想让icon图标随着每一个网站不一样的icon进行变更的话，就只要利用tab的favIconUrl属性就能获得标签页面的图标url地址,改动以下

onload=function(){
  chrome.tabs.getSelected(function(tab){
      //QRCode(元素id,相关配置文件)
      var qrcode = new QRCode("qrcode", {
              text: tab.url,
              width: 160,
              height: 160,
              colorDark : '#000000',
              colorLight : '#ffffff',
              // QRCode的容错级别
              correctLevel : QRCode.CorrectLevel.H
            });
    if (tab.favIconUrl) {//tab有图标的状况下动态赋值
      var img = document.getElementsByTagName("img")[1].src = tab.favIconUrl;
    }
    console.log(img);
  });
}

详细代码能够查看github源码地址

编写一个Chrome extension--网页二维码生成

Chrome extension基础

编写过程

首先编写manifest.json

接下来就要编写扩展弹出页面popup.html文件

编写相应的popup.js文件

后续

修改popup.html文件

动态获取网页icon

首先编写`manifest.json`

接下来就要编写扩展弹出页面`popup.html`文件

编写相应的`popup.js`文件

修改`popup.html`文件