第一次chrome插件开发——二维码生成器



  • 最近有chrome插件开发的需求,所以学学做做搞了三天,终于把这个入门插件给搞定了。今天我给大家分享一下chrome插件的开发。
    如果要开发一些比较复杂功能的插件,比如需要进行服务器交互通信的、与页面交互通信的,最好先查阅官方文档或者通读这篇博客【干货】Chrome插件(扩展)开发全攻略


    我相信你已经看完了上述的文档,我也相信你现在有跃跃欲试的冲动了。但是别忘了,这个的水,很深。。。

    三大关系

    首先我们先来说说background.js、content-script.js、popup.js这三者之间的关系(因为我在这个小项目中需要用到)。下面这幅图可以比较清楚地展现出三者之间的关系。

    • background.html是在浏览器启动后就自动生成的页面,因此是所有浏览器页面都可以访问到的,它所对应的js文件是background.js,可以用来进行保存全局变量等全局性的操作。
    • popup.html是点击右上角的icon后弹出的页面。由于是弹出性质的,所以会重新执行html中的script脚本代码。通常popup.js与popup.html绑定在一起,popup.js就可以访问弹出页面中的DOM元素了。
    • main page是浏览时的页面,如果我们需要在插件中与main page中的DOM元素打交道的话,需要通过content-script.js来实现。

    0_1569484870301_捕获.PNG

    由于三者有明显界限,所以三者之间无法直接通信。比如我想要在popup.js中获取main page中的DOM元素的文本,这就存在两个页面间的通信问题,需要通过chrome提供的API来实现。

    调试手段

    上述三个页面的调试手段各有不同,在文档里都有注明了,我在这里重申一下,顺便带一点注:

    • 安装插件
      进入扩展程序,点击左上角的 “加载已解压的扩展程序” ,选择插件所在的目录即可。

    • background.html
      进入扩展程序,点击 “背景页” 进入background.html的调试。
      0_1569488530946_5efe006e-f57b-4dbc-8457-e4705cd3b52d-image.png

    • popup.html
      在图标上右击,选择 “审查弹出内容” ,进入popup.html的调试界面。
      0_1569488656006_f690b291-620c-45f4-9a99-dfeaef62cadb-image.png

    • content-script
      在浏览器上按下F12进入开发者模式。在Console中的top选项更改为自己的插件,console界面会显示content-script.js中的输出信息。
      0_1569488768899_e77ed56a-0c69-40f2-8b98-9d52830072ca-image.png

    • 注:如果更改了popup.html、popup.js的时候,可以直接更新。如果更改了content-script.js,那么需要删除这个插件,重新安装,然后按下F5刷新页面,这样才能正常显示插件的内容。


    到这里,我相信你已经了解了chrome插件开发的具体事项了。现在我们来尝试开发一个二维码生成器吧。

    需求

    用户想要用手机获取网页上的网址,用手输入网址十分不便,如果能显示二维码就好了。如果用户能够选定一段网址后,点击插件按钮,就可以弹出网址对应的二维码,那就太好了。
    0_1569489189387_edc5b32f-5b88-4a56-bf65-bb13b7b66a09-image.png

    开发实战

    要完成这个小插件,我们必须弄明白什么部分是分别在上述三个模块中的。由于项目很小,我们可以直观了解到,渲染二维码的动作是在popup.js中的,获取选定的文本是在content-script中的,而background没有用到。popup.js需要与content-script进行通信,需要用到chrome.runtime.sendMessage()方法。
    我们可以构建以下的项目结构:
    0_1569489423021_306e9e03-fffd-4783-91a0-f29e426790fe-image.png

    manifest.json的配置为:

    //manifest.json
    {
      "manifest_version": 2,
      "name": "二维码生成器",
      "version": "1.0.0",
      "description": "简单的生成可扫描的二维码",
      "icons": {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
      },
      "background": {
        "scripts": ["./background.js"],
        "persistent": false
      },
      "browser_action": {
        "default_icon": "img/icon.png",
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
      },
      "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content-script.js"]
        }
      ],
      "permissions": ["tabs","http://*/*", "https://*/*"]
    }
    

    现在的基本配置已经搭建好了,我们来开始写代码吧。。。。
    首先是弹出页面:

    <!-- popup.html -->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <!-- qrcode.js 是生成二维码的js库,可以在github上下载源码 -->
      <script src="./qrcode.js" type="text/javascript"></script>
      <script src="./popup.js" type="text/javascript"></script>
      <style>
        #box {
          text-align: center;
        }
    
        #qrcode {
          width: 256px;
          margin: auto;
        }
      </style>
    </head>
    
    <body>
      <div id="box" class="box">
        <h2 id="url"></h2>
        <div id="qrcode"></div>
      </div>
    </body>
    
    </html>
    

    然后是content-script:

    //content-script.js
    //这里的document是网页dom,window是网页的window对象
    //不能将window当作sendResponse的参数传出,否则会报错
    //window.getSelection()是获取网页选定区文本的方法
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      var sendData;
      switch(request.cmd)
      {
        case 'select':
            sendData = window.getSelection().toString()
        break
        default:
        break
      }
      sendResponse(sendData)
      return true
    })
    

    最后是popup.js:

    //popup.js
    function sendMessageToContentScript(message, callback) {
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        console.log(tabs)
        chrome.tabs.sendMessage(tabs[0].id,message, function (response) {
          if (callback) {
            callback(response)
          }
        })
      })
    }
    
    sendMessageToContentScript({cmd:'select'}, function(res)
    {
      console.log('来自content的回复:',res)
      document.getElementById('url').innerHTML = res;
      if(res){
        //这里的document是弹出页面的DOM
        new QRCode(document.getElementById('qrcode'),{
          text: res,
          width: 256,
          height: 256,
          colorDark : '#000000',
          colorLight : '#ffffff',
          correctLevel : QRCode.CorrectLevel.H
        })
      }
    })
    

    三个模块关系是这样的:

    0_1569490385273_0686399e-678c-4813-a728-936bfca22977-image.png

    ok! 到这里,我相信你已经完成了这个小插件,是不是感觉自己很有优越感呢?现在的这个插件的功能十分基础,实现起来也并不是特别的困难,如果插件一旦复杂起来,比如实现自动填写表格、自动答题、广告屏蔽等等的功能,那么光看这个文章还是不够的,希望你能继续学习下去。


    参考资料



  • 学到了 (/大拇指)


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.