您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    带你开发一个Chrome版的小程序
    时间:2017-04-26 14:55 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    开发一个 Chrome 扩展程序, 其实非常简单,而且很有趣。

    Chrome 扩展程序

    上次跟大家提到 Chrome 应用商店,于是探究了一下开发一个 Chrome 扩展程序有多难, 经过一番研究,发现其实并不难。 下面就带你体验一下如何开发一个二维码生成插件。

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

    首先创建一个目录用于存放 Chrome 扩展程序的所有资源,比如 qrcode。 目录创建好后,然后在这个目录中创建一个文件名为 manifest.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"     

      ] 

    咱们来简单讲解一下这个清单文件。 manifest_version 表示清单版本号,目前用 2 即可。 name , description 和 version 用于指定应用的名称,描述和版本。

    browser_action 属性就是在浏览器地址栏上面的按钮, 它的子属性定义了按钮的图标,默认主页,标题等:

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

    接下来的 permissions 用于定义扩展程序的权限,我们这里申请了 activeTab 权限,其实就是获取当前标签页的信息,用于生成二维码。

    开始实践

    准备工作完成了, 我们首先要开发 popup.html, 这个是我们扩展程序的主界面。 没错,它其实就是一个 html 页面,因为扩展程序都是其实也都是 Chrome 内核来解析的,用 web 技术来开发自然最合适不过。

    <!doctype html> 

    <html> 

      <head> 

        <title>QR Code</title> 

        <!-- 省略样式表代码 --> 

        <script src="jquery-3.2.1.min.js"></script> 

        <script src="jquery.qrcode.min.js"></script> 

        <script src="popup.js"></script> 

     

      </head> 

      <body> 

        <div id="title">QR Code</div> 

        <div id="url"></div> 

        <div id="image-result" style="width:270px;height:270px;">     

        </div> 

      </body> 

    </html> 

    其实就是一个普通的 html 页面,只要有基本的 web 开发基础,详细这个都不难看懂。 这里要说一下的就是引入的几个 js 文件。

    一个是 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; 

    (责任编辑:admin)