hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

Chrome插件开辟(三)

2019-11-18杂谈搜奇网36°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";
    }
})

经由过程开发者调试东西以下:

 

 从上图能够看出我们就是猎取到了url参数,然后将其生成一个二维码展现出来。

 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Chrome插件开辟(三)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282378.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>