Chrome插件开辟（三）

2019-11-18杂谈搜奇网27°c

A⁺ A^-

在一样平常工作中，我们能够常常须要在手机端测试我们所做的页面，假如每次在手机端测试都手输网址，网址短的还好，假如长的网址也须要一个字母一个字母去敲，那无疑是一场恶梦，试想我们有一个东西只须要点击一个按钮就能够将当前网址生成二维码，而手机端仅仅须要扫一扫就能够翻开我们想要测试的网址，是否是很美好呢？下面我们就本身着手从零最先完成一个生成当前网址二维码的插件。在最先编写之前，我们须要先做一点点学问准备：

1、我们之前在讲基本学问的时刻有提到browser_action和page_action这两个东西，前者是示意这是一个浏览器行动，其图标显如今地址栏右边，而后者示意这是一个页面行动，其图标如今在地址栏背面，当然在如今的浏览器上是看不出来这个区分的，他们两个不能同时定义，那末网址二维码生成是一个浏览器行动照样一个页面行动呢？就其行动而论网址二维码生成是将页面的网址生成二维码，所以毫无疑问它应该是一个页面行动。

2、我们须要运用到的API：

（1）chrome.pageAction.show 在特定标签特定行动情况下显现页面行动的图标，与之对应的另有chrome.pageAction.hide，在特定标签特定行动下隐蔽页面行动的图标，运用体式格局：

1 chrome.pageAction.show(tabId);
2 chrome.pageAction.hide(tabId);

（2）chrome.tabs.onUpdated 这是一个回调函数，我们须要在tab更新的时刻挑选是要显现照样隐蔽页面行动的图标。

1 chrome.tabs.onUpdated.addListener(function(tabId, info) {
2   chrome.pageAction.show(tabId);
3 });

（3）chrome.tabs.getSelected 猎取当前选中的选项卡的明细。因为上面运用了tabs相干API，别忘记须要在manifest.json中请求tabs权限。

3、网址生成二维码挑选直接挪用api，这里挑选运用联图的API：

1 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代码：

 1 {
 2     "name": "二维码生成器",
 3     "version": "1.0",
 4     "description": "二维码生成器",
 5     "manifest_version": 2,
 6     "icons":
 7     {
 8         "16": "images/icon-48.png",
 9         "48": "images/icon-48.png",
10         "128": "images/icon-48.png"
11     },
12     "permissions": ["tabs", "https://*/*", "http://*/*"],
13     "background":
14     {
15         "scripts": ["js/background.js"]
16     },
17     "page_action":
18     {
19         "default_popup": "popup.html"
20     }
21 }

popup.html的代码以下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Popup</title>
 7     <link rel="stylesheet" href="css/style.css">
 8 </head>
 9 
10 <body>
11 <div id="contain">
12     <img src="" alt="" id="qrcode">
13 </div>
14 <script type="text/javascript" src="js/popup.js"></script>
15 </body>
16 
17 </html>

popup.js的代码以下：

 1 var imgNode = document.getElementById("qrcode"),
 2     prefix = "http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=";
 3 chrome.tabs.getSelected(function(w) {
 4     var url = w.url,
 5         img = new Image();
 6     img.src = prefix + url;
 7     img.onload = function() {
 8         imgNode.src = this.src;
 9         imgNode.style.display = "block";
10     }
11 })

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

1 chrome.tabs.onUpdated.addListener(function(tabId, info) {
2     chrome.pageAction.show(tabId);
3 });

style.css 代码以下

 1 #contain{
 2     background: url(../images/loading.gif) center center no-repeat;
 3     width: 200px;
 4     height: 200px;
 5 }
 6 #contain img{
 7     width: 100%;
 8     height: 100%;
 9     display: none;
10 }

运转截图：

我们在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";
    }
})