編寫一個Chrome extension--網頁二維碼生成

時間 2019-11-10

標籤編寫一個 chrome extension 網頁二維生成欄目 Chrome 简体版

原文原文鏈接

很早以前就想過要用Chrome擴展開發一些實用的，或者有意思擴展。今天在看了segmentfault的技術週刊後，決定先按照別人寫過的東西去~~抄一遍~~模仿的作一遍。javascript

本篇文章是看了從小目標開始，編寫一個簡潔的二維碼chrome擴展模仿的。這篇文章寫得很詳細。我主要寫寫本身模仿過程當中的一些問題。css

Chrome extension基礎

編寫Chrome 擴展以前咱們須要大體的瞭解一下Google提供的開發文檔。鑑於我可憐的英文水平，我推薦花幾分鐘看一下下面的文檔：html

360翻譯的官方API文檔java
Chrome擴展及應用開發 ←這本書不只介紹API用法，還提供了好多實例。git

編寫過程

有了上面幾分鐘的基礎後，咱們能夠開始正式編寫代碼了。建立一個文件夾，將擴展所建立的文件都放在裏面，方便完成後打包。github

首先編寫`manifest.json`

這是全部擴展的入口文件。看到後綴咱們就知道這文件的語法結構必須符合json的寫法。Chrome 擴展必須包含的屬性有name、version、manifest_version。其餘可選屬性包括：background、permissions、browser_action、page_action、options_page、content_scripts等等。chrome

{
    //目前Chrome版本爲2
    "manifest_version": 2,
    //擴展名稱
    "name": "QRcode",
    //擴展版本，可自定義
    "version": "1.0",
    //擴展描述，顯示在擴展程序中
    "description": "簡潔的二維碼生成器",
    //顯示在擴展程序中的圖標
    "icons": {
        "16": "images/icon16.png",
        "128": "images/icon128.png"
    },
    //權限聲明
    "permissions":["tabs"]
}

接下來就要編寫擴展彈出頁面`popup.html`文件

popup頁面在被用戶點擊時初始化，關閉後就會銷燬。因此該頁面更多的是用來展現結果的。數據處理則須要background這個屬性來聲明，這裏暫時沒用到就很少說了。須要注意的是，應該用css指定popup頁面大小。另外，Google不容許HTML和JavaScript混寫在同一個文件內。全部咱們把相應的JS提出來，在HTML中添加外部引用。json

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
    .box {
        height: 200px;
        width: 200px;
        background: #EEE;
    }
    .box .title{
        text-align: center;
        margin-bottom: 10px;
    }
</style>
<body>
<div class="box">
    <div class="title">掃描二維碼瀏覽本頁面</div>
    <center>
    <div class="qrcode" id="qrcode"></div>
    </center>
</div>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>
</body>
</html>

編寫相應的`popup.js`文件

chrome.tabs這個API能夠與瀏覽器的標籤頁系統進行交互。具體API說明參考標籤--擴展開發文檔
經過獲取到的標籤頁url傳給QRCode。經過QRCode.js生成二維碼。segmentfault

onload=function(){
  chrome.tabs.getSelected(function(tab){
      //QRCode(元素id,相關配置文件)
      var qrcode = new QRCode("qrcode", {
              text: tab.url,
              width: 160,
              height: 160,
              colorDark : '#000000',
              colorLight : '#ffffff',
              // QRCode的容錯級別
              correctLevel : QRCode.CorrectLevel.H
            });
    console.log(qrcode);
  });
}

到目前爲止，一個簡單的QRCode生成器邊完成了。

瀏覽器

後續

若是想讓二維碼中間位置顯示自定義圖片(如上圖)，那麼只須要在popup頁面自定義一段CSS便可。

修改`popup.html`文件

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
    .box {
        height: 200px;
        width: 200px;
        background: #EEE;
        position: relative;
    }
    .box .title{
        text-align: center;
        margin-bottom: 10px;
    }
    .box .qrcode{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .box .logo {
          top: 80px;
          left: 80px;
          width: 40px;
          height: 40px;
          position: absolute;

    }
</style>
<body>
<div class="box">
    <div class="title">掃描二維碼瀏覽本頁面</div>
    <center>
    <div class="qrcode" id="qrcode"></div>
    <div class='logo'>
    <img src="http://amoyiki.github.io/images/avatar.jpg" width="40" height="40"/>
    </div>
    </center>
</div>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>
</body>
</html>

動態獲取網頁icon

若是想讓icon圖標隨着每一個網站不一樣的icon進行變更的話，就只要利用tab的favIconUrl屬性就能獲得標籤頁面的圖標url地址,改動以下

onload=function(){
  chrome.tabs.getSelected(function(tab){
      //QRCode(元素id,相關配置文件)
      var qrcode = new QRCode("qrcode", {
              text: tab.url,
              width: 160,
              height: 160,
              colorDark : '#000000',
              colorLight : '#ffffff',
              // QRCode的容錯級別
              correctLevel : QRCode.CorrectLevel.H
            });
    if (tab.favIconUrl) {//tab有圖標的狀況下動態賦值
      var img = document.getElementsByTagName("img")[1].src = tab.favIconUrl;
    }
    console.log(img);
  });
}

詳細代碼能夠查看github源碼地址