Chrome 擴充套件外掛開發DEMO

weixin_34041003發表於2017-08-18
Chrome套件

任務背景

工作中常用到一些小工具，而網上現成的線上工具用起來不爽，於是想通過自己實現一些 Chrome 擴充套件外掛來解決這些問題。

任務目標

通過chrome外掛，一鍵生成瀏覽器當前網頁連結地址的二維碼。

工程結構

---
--- icon.png
--- manifest.json
--- popup.html
--- js
--- popup.js
--- qrcode.min.js

icon.png 是 Chrome 外掛圖示；
manifest.json 是配置檔案；
popup.html 是外掛彈出頁；
js 是 JavaScript 指令碼存放目錄；
popup.js 是外掛彈出頁JS指令碼；
qrcode.min.js 是二維碼生成JS工具庫。

素材資源

  1. icon.png
    在 iconfont 上找合適的圖示：http://www.iconfont.cn

  2. JavaScript 版二維碼工具庫：
    qrcode.js 官網主頁：https://davidshimjs.github.io/qrcodejs

主要程式碼

manifest.json :
{
    "manifest_version": 2,
    "name": "QR Code generator",
    "description": "Dotions - 二維碼生成器",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "點這裡生成當前頁二維碼！"
    },
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "permissions": ["activeTab","tabs"]
}
popup.html :
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>QR Code Generator</title>
        
        <script type="text/javascript" src="js/qrcode.min.js"></script>
        <script type="text/javascript" src="js/popup.js"></script>
    </head>
    <body>
        <div style="width:150px;" id="qr_code"> </div>
    </body>
</html>
popup.js :
function load() {
    window.console.info('ready.....');
    
    // 獲取到當前啟用態的 tab 物件
    chrome.tabs.query({
        "active" : true
    }, function(tabArr) {
        var tab = tabArr[0];
        window.console.info("title=" + tab.title);
        window.console.info("url=" + tab.url);

        var qrcode = new QRCode(document.getElementById("qr_code"), {
            width: 150,
            height: 150,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        
        qrcode.clear();
        qrcode.makeCode(tab.url);
    });
};
window.onload = load();

載入外掛 & 除錯

開啟chrome 外掛管理器

在chrome位址列中輸入以下地址開啟外掛管理器：

chrome://extensions
開啟開發者模式
1247999-57ac386939a82b33.png
開啟開發者模式
載入已寫好的外掛
1247999-a3770b916e5bc793.png
載入已寫好的外掛
效果演示

點選自己的二維碼圖示，生成了一個當前頁的二維碼：


1247999-d2866c0636a02296.png
效果展示
打包外掛
1247999-42be296dec7e50f2.png
打包外掛1
1247999-56e9512dfb09e698.png
打包外掛2

在專案路徑上層路徑下會生成兩個檔案：project_name.crx, project_name.pem


1247999-476064303aafda43.png
打包外掛3

到此外掛開發完成。

相關文章