Chrome 扩展快速入门

什么是 Chrome 扩展程序？
扩展程序的组成
manifest.json 的配置信息
从实战出发
打包扩展程序为 .crx 格式
上传至 Chrome 网上应用店

什么是 Chrome 扩展程序？

从 Chrome网上应用店可以看到各式各样的扩展程序，简单说就是通过实现某一功能打包成 Web App 在浏览器中使用，并且可以使用 Chrome 的API。

其余浏览器扩展开发要求：

Firefox
- 使用 XUL 作为标记语言，是 Mozilla 基于 XML 的语言。
Safari
- 开发前需在 Safari Developer Program 注册，获得签名证书后扩展才可以被安装

通过例举其他浏览器的开发要求，可以看出 Chrome 开发成本最低，掌握基本的前端知识即可开发。

扩展程序的组成

一个 manifest 文件
一个或多个 HTML 文件
一个或多个 JavaScript 文件（可选）
任何需要的其他文件（可选）

从实战出发

从“二维码生成器”案例为起点，快速上手 Chrome 扩展开发，实现获取页面 title 和 URL，使用获取的 URL 生成二维码，并将URL中为 localhost 和 127.0.0.1 的字段替换为本地主机 IP。

qrcode_hotscreen.png-42.2kB

一、创建一个目录用于存放所有的文件

二、配置文件 manifest.json 文件

{
    "manifest_version": 2, // 文件自身格式的版本号，必须指定为 2
    "name": "侘寂二维码生成器", // 扩展程序的名称
    "description": "做一款简单易用无广告的二维码生成器", // 扩展程序的描述信息
    "version": "1.0", // 版本号
    "browser_action": {
        "default_title": "侘寂二维码生成器", // 悬浮提示，不填为 name 的值
        "default_icon": "icon19.png", // 19x19
        "default_popup": "popup.html" // 弹出页
    },
    "icons": {
        "19": "icon19.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": ["tabs", "privacy"] // tabs 权限用于获取 title 和 url privacy 权限用于隐私 比如获取 ip
}

三、弹窗页 popup.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侘寂二维码生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 220px;
        }
        #qrcode {
            margin: 20px auto;
            width: 180px;
            height: 180px;
        }
        .page-name {
            margin: 0 auto 10px;
            display: block;
            width: 180px;
            height: 30px;
            line-height: 30px;
            border: 0;
        }
        .page-url {
            display: block;
            margin: 0 auto 10px;
            width: 180px;
            height: 30px;
            line-height: 30px;
            border: 0;
        }
    </style>
</head>
<body>
    <div id="qrcode"></div>
    <input class="page-name">
    <input class="page-url">

    <script src="js/qrcode.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

qrcode.min.js 从这里下载，传入二维码宽高和 URL 导出Canvas 二维码。

四、编写 JS 文件

getLocalIPs(function(ips) {
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, (tabs) => {
        document.querySelector(".page-name").value = tabs[0].title;
        var localUrl = tabs[0].url;
        if (localUrl.indexOf("localhost") != -1) {
            localUrl = localUrl.replace(/localhost/, ips[0]);
            document.querySelector(".page-url").value = localUrl.replace(/localhost/, ips[0]);
        } else {
            localUrl = localUrl.replace(/127.0.0.1/, ips[0]);
            document.querySelector(".page-url").value = localUrl.replace(/127.0.0.1/, ips[0]);
        }

        new QRCode(document.getElementById("qrcode"), {
            text: localUrl,
            width: 180,
            height: 180
        });
    });
});

function getLocalIPs(callback) {
    var ips = [];

    var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;

    var pc = new RTCPeerConnection({
        iceServers: []
    });

    pc.createDataChannel("");

    pc.onicecandidate = function(e) {
        if (!e.candidate) {
            pc.close();
            callback(ips);
            return;
        }
        var ip = /^candidate:.+ (\S+) \d+ typ/.exec(e.candidate.candidate)[1];
        if (ips.indexOf(ip) == -1) {
            ips.push(ip);
        }
    };
    pc.createOffer(function(sdp) {
        pc.setLocalDescription(sdp);
    }, function onerror() {

    });
}

五、制作一张 19x19 的 icon 图

六、在地址栏输入chrome://extensions/，将目录拖拽到页面中

简单的几步后，一个简单的扩展程序就完成了，通过点击右上角的扩展图标可以打开我们的 popup.html 页面。

manifest.json 参数说明

必要参数

{
    "manifest_version": 2, // 文件自身格式的版本号，必须指定为 2
    "name": "My app", // 扩展程序的名称
    "version": "1.0", // 版本号
}

_browseraction（建议要）

{
    "browser_action": { // 配置扩展程序在工具栏的状态
        "default_title": "My app alt", // 悬浮提示，不填为 name 的值
        "default_icon": "icon19.png", // 扩展程序图标
        "default_pop": "popup.html" // 点击扩展程序图标后弹出的窗口
    }
}

_optionspage（可选）

{
    "options_page": "options.html" // 右键扩展程序图标的选项页
}

permissions（可选）

{
    "permissions": [ // 需要使用的权限
        "tabs", // 访问浏览器选项卡
        "activeTab", // 获取当前活动选项卡
        "notifications", // 浏览器通知
        "storage" // 存储
    ]
}

background（可选）

{
    "background": { // background可使扩展常驻后台
        "scripts": ["js/background.js"] // ?
    }
}

_chrome_urloverrides（可选）

{
    "chrome_url_overrides": { // 自定义页面替换 Chrome 的默认页面，比如新标签页、书签页、历史记录
        "newtab": "tab.html"
    }
}

打包扩展程序为 .crx 格式

更多工具 -> 扩展程序 -> 打开“开发者模式” -> 打包扩展程序 -> 选择扩展程序的目录 -> 完成

参考资料：

https://developer.chrome.com/extensions/api_index

ONE-SUNDAY / Blog

Chrome 扩展快速入门 #3