Chrome插件製做

時間 2019-12-13

標籤 chrome 插件製做欄目 Chrome 简体版

原文原文鏈接

因爲網上很難找到關於Chrome插件製做的中文教程，爲了總結和方便更多的開發者，本文以最多見的顯示效果爲browser_action的二維碼插件爲例，進行相關闡述。前端童鞋開發的話應該很簡單的，鄙人是開發Android的，寫這個還查了點資料(⊙﹏⊙)javascript

版本更新

支持生成二維碼的方式：一、輸入內容回車；二、輸入內容點擊生成二維碼按鈕；三、選中文字右擊生成二維碼css

顯示效果

目錄結構

根據編寫完成的二維碼插件，我認爲一個Chrome插件至少包含如下幾個文件：html

manifest.json // JSON格式的清單配置文件前端
icon.png // 在瀏覽器中顯示的圖標java
popup.html // 在瀏覽器中顯示的頁面jquery

下面列舉一下個人二維碼插件的目錄結構：git

chrome_extensions_qrcode
  |--icon.png
  |--lib
      |--jquery-1.7.2.min.js
      |--jquery.qrcode.min.js
  |--manifest.json
  |--popup.css
  |--popup.html
  |--popup.js

實現原理

製做交互式友好頁面，根據外部輸入內容，調用jQuery的二維碼插件庫，實現想要實現的功能，驗證正確後打包成CRX文件。github

實現步驟

manifest.json

建立根目錄，如：chrome_extensions_qrcode，而後進入根目錄建立manifest.json文件，編輯內容，可參考開發文檔-manifest，如下是個人文件內容：web

{
    "name": "簡易二維碼",  // 必要字段
    "version": "1.0.0",  // 必要字段，規則：用1個到4個數字來表示，中間用點隔開，這些數字必須在0到65535之間，非零數字不能0開頭
    "manifest_version": 2, // 必要字段，必須爲2，無引號
    "description": "經過輸入文本內容生成二維碼！",  // 可選字段，插件描述信息
    "author": "青峯 qingfeng@showjoy.com",  // 可選字段，插件做者信息
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    }, // 必要字段，文件格式必須爲"icons": {...}，不能爲"icons": "icon.png"
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    } // 可選字段，指定默認顯示頁面
}

HTML

添加必要的icon.png和jQuery插件庫，建立popup.html文件，進行HTML頁面編寫，我這邊的頁面很簡單，以下所示：chrome

<!doctype html>
<html>
    <head>
        <title>簡易二維碼</title>
        <meta charset="utf-8"/>
        <!-- 聽說：css和js文件不能在html文件內部編寫使用，必須外部引用 -->
        <link href="./popup.css" type="text/css" rel="stylesheet"/>
        <!-- 如下兩個jQuery的js文件都須要引用，切忌只引用jquery.qrcode.min.js -->
        <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery.qrcode.min.js"></script>
        <script type="text/javascript" src="./popup.js"></script>
    </head>
    <body>
        請輸入文本內容:<br/>
        <input type="text" id="content">
        <input type="button" id="confirm" value="生成二維碼">
        <!-- 動態生成二維碼圖片 -->
        <div id="qrcode"></div>
    </body>
</html>

CSS&JS

編輯CSS和JS文件：CSS文件中其實就一句話：#qrcode{margin-top: 10px}，JS文件內容以下所示：

$(function(){
    $("#confirm").click(function(){
        // 清空
        $("#qrcode").empty();
        // 得到內容
        var decodeContent = toUtf8($("#content").val());
        // 根據內容長度來肯定展現二維碼的大小
        if (decodeContent.length < 200) {
            $('#qrcode').qrcode(decodeContent);
        } else {
            $('#qrcode').qrcode({
                width: 300,
                height: 300,
                text: decodeContent
            });
        }
    });
})
// 兼容中文
function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        }
    }
    return out;
}

好了，是否是很簡單，其實我也沒講什麼，只是但願你們少走點彎路罷了，最後再講一下如何驗證咱們編寫的代碼可否正確使用以及把編寫完成的文件打包成CRX文件。