扩大

上次给大家提到了App ，所以就探讨了开发一个扩展是多么的困难。 经过一番研究，我发现一点也不难。 让我向您展示如何开发二维码生成插件。

首先创建一个目录，用于存放扩展的所有资源，例如。 创建目录后，在此目录下创建名为.json的文件。 该文件用于存储有关程序的元信息：

{

 "manifest_version": 2,

 "name": "QR Code",

 "description": "Generate QR Code for web page.",

 "version": "1.0",

 "browser_action": {

 "default_icon": "icon.png",

 "default_popup": "popup.html",

 "default_title": "Generate QRCode"

 },

 "permissions": [

   "activeTab"

 ]

}

我们来简单解释一下这个清单文件。 表示清单版本号，目前2就足够了。 名称，以及用于指定应用程序的名称、描述和版本。

该属性是浏览器地址栏上的按钮。 它的子属性定义了按钮的图标、默认主页、标题等：

下一步是定义扩展的权限。 我们已经在这里申请了权限。 其实就是获取当前标签页的信息，并用它来生成二维码。

开始练习

准备工作完成了，我们首先需要开发.html，这是我们扩展的主界面。 没错，它实际上是一个html页面，因为扩展实际上是由内核解析的，所以最适合使用web技术来开发它。

其实就是一个普通的html页面。 只要有基本的Web开发基础，详细理解起来并不困难。 这里要说的是引入的几个js文件。

一是，是的，你没看错，你可以用它来开发程序。

我们需要的另一个组件是.，它用于为指定字符串生成二维码图像。 这里不多解释，有兴趣的朋友可以参考它的主页：。

然后是.js，这是我们扩展的主要逻辑代码。

让我们再看看里面有什么：

function getCurrentTabUrl(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);
   

 });

}

首先定义一个函数。 该函数唯一的作用就是获取当前用户打开的选项卡的URL地址。 内部JS函数.tabs。 在这里使用。 传入两个参数，第一个是查询条件。 我们正在查询当前窗口的活动标签。

那么第二个参数就是一。 查询成功后，会返回对应的tab信息。 我们获取该选项卡的 URL，然后调用它并将其返回给调用者。

这里需要提到的是，大多数扩展接口都是异步调用的。 就像我们这次使用的.tabs一样。 好吧，我不再赘述细节。 它提供了非常丰富的API供我们调用。 完整的API文档请查看官方文档：

我们继续看主程序：

function renderStatus(statusText) {

 document.getElementById('url').textContent = statusText;

}

document.addEventListener('DOMContentLoaded', function() {

 getCurrentTabUrl(function(url) {

   renderStatus(url);

   var result = $('#image-result');

   result.qrcode({

     text: url

   });

 });
 

});

这里使用事件来调用我们上面定义的方法，以在扩展打开时获取当前标签的 URL。 然后使用此 URL 来调用 . 方法生成二维码图像并将其设置到我们的html页面-标签中。

方法只是将URL显示在页面的标签上，相信你不难理解。这里我们省略了CSS样式相关的代码。 我已经把完整的代码放在上面了。 你可以在这里看到它。

开始调试

至此，我们简单的二维码扩展程序就已经开发完成了。 现在让我们在 中安装并尝试一下。 我们当前的目录结构应该如下所示：

程序写好了，现在唯一解决的就是如何安装到电脑中。 首先在地址栏输入://打开扩展页面：

勾选本页面左上角的“开发者模式”，就会出现上面的按钮。 单击“加载解压的扩展”，然后选择我们刚刚创建的文件夹，这样您就可以看到我们导入的扩展。 此时，浏览器左上角会出现扩展程序图标。 单击它，将显示我们的扩展：

如果您的扩展程序没有正确弹出，您还可以右键单击它并选择“检查弹出内容”来打开调试界面，这可以帮助您非常方便地定位错误：

总结

您是否发现开发扩展实际上很容易？ 我们这里只做开发，然后在环境中调试。 一个应用想要建立正常的生态系统，需要提交到应用商店。 稍后我也会写一篇关于提交到商店的文章。 如果您有什么创意或者想法，欢迎留言分享。 上面已经开源了这个小程序的完整代码。 我希望它对你有帮助：