Edge 插件開發簡單示例

時間 2020-08-05

標籤 edge 插件開發簡單示例简体版

原文原文鏈接

Edge瀏覽器支持載入本身開發的插件，最近須要一個獲取當前網頁二維碼的功能，找了一下如何開發一個簡單的Edge插件，記錄一下。

文件結構

manifest.json

配置文件，能夠填入一些插件信息。
permissions 中聲明須要調用的權限，此處的 tabs 代表須要獲取標籤信息
default_popup 中聲明調用的 html 文件，插件功能在這個文件中實現。

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/qrcode.js"></script>
    <div id="qrcode"></div>
    <script src="js/GetQRCode.js"></script>
</body>

</html>

點擊插件按鈕顯示的頁面文件。
這個地方我用了 qrcodejs，下載見git地址：qrcodejs
主要功能在 GetQRCode.js 文件中實現，我一開始試着直接寫在html文件中發現始終沒成功，仍是寫在js文件裏實現了。

GetQRCode.js

browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    browser.tabs.get(tabs[0].id, function (tab) {
        new QRCode(document.getElementById("qrcode"), tab.url);
    });
    root.style.display = "block";
});