带你开发一个Chrome版的小程序

</head>

<body>

</div>

</body>

</html>

一个是 jQuery，是的你没看错，你可以应用 jQuery 来开辟 Chrome 法度榜样。

别的一个我们须要的组件就是 jquery.qrcode，它用来给指定的字符串生成二维码图片。这腊?绵讲解，有兴趣的同伙可以参考它的 Github 主页： https://github.com/jeromeetienne/jquery-qrcode 。

然后就是 popup.js, 这是我们扩大法度榜样的重要逻辑代码。

让我们再来看看它琅绫擎有什么：

functiongetCurrentTabUrl(callback){  
  var queryInfo = { 
    active: true, 
    currentWindow: true 
  }; 
   chrome.tabs.query(queryInfo, function(tabs){  
    var tab = tabs[0]; 
    var url = tab.url; 
    console.assert(typeof url == 'string', 'tab.url should be a string'); 
    callback(url);  
  }); 
}

起首定义一个 getCurrentTabUrl 函数，这个函数独一的感化就是获取当前用户打开标签的 URL 地址。这里用到了 Chrome 的内部 JS 函数 chrome.tabs.query。传入了两个参数，第一个 queryInfo 是萌芽前提，我们萌芽的是当前窗口的激活标签。

然后第二个参数是一个 callback，萌芽成功后，会吧响应的 tab 信息返回过来。我们取到这个 tab 的 URL，然后再调用 callback 返回给调用方即可。

这里要说到一点， Chrome 扩大法度榜样的大年夜多半接口都是异步调用的。就比如我们此次用到的 chrome.tabs.query。好了，具体细节不再赘述， Chrome 供给了异常丰富的 API 供我们调用。完全的 API 文档可以萌芽官方文档： https://developer.chrome.com/extensions/api_index

我们再持续看主法度榜样：

functionrenderStatus(statusText){    
  document.getElementById('url').textContent = statusText;  
}  
document.addEventListener('DOMContentLoaded', function(){  
  getCurrentTabUrl(function(url){  
    renderStatus(url); 
    var result = $('#image-result');   
    result.qrcode({ 
      text: url 
    });      
  }); 
});

这里应用 DOMContentLoaded 事宜，在扩大法度榜样打开的时刻调用膳绫擎我们定义的 getCurrentTabUrl 办法获取当前标签的 URL。然后应用这个 URL 调用 jquery.qrcode 的办法生成二维码图片并设置到我们 html 页面中 image-result 标签中。

renderStatus 办法只是把 URL 显示到页面的标签上，信赖你不难看懂。这里我们省略了 CSS 样式相干的代码，完全的代码我已经放到 Github 上，大年夜家可以在这里看到 https://github.com/swiftcafex/chrome-qrcode

2/3 首页上一页 1 2 3 下一页尾页

　　推荐阅读

　　软件定义存储的4个趋势

组织在安排本身的SDS解决筹划时碰到的最常见的问题之一是支撑周转。当他们碰到问题时，他们称他们的SDS软件供给商应当供给赞助，却被告诉是硬件问题。当然，硬件供给商也会责备是软件供给商的问题。 >>>详细阅读

本文标题：带你开发一个Chrome版的小程序

地址：http://www.17bianji.com/lsqh/34983.html

1/2 1