如何在Microsoft Edge瀏覽器中添加一個Hello World插件

時間 2019-11-20

標籤如何 microsoft edge 瀏覽器添加一個 hello world 插件欄目 Windows 简体版

原文原文鏈接

注：本文提到的代碼示例下載地址> How to add a Hello World extension to Microsoft Edgecss

Microsoft Edge 隨着Win 10一塊兒推出，是微軟如今主推的瀏覽器。Edge 相比較於IE，有更強的交互性，安全性，提供了更好的用戶體驗。並且此次Edge瀏覽器也開始支持瀏覽器插件嘍。html

Edge 上的插件跟其餘Chrome, FireFox等瀏覽器上的插件相似。但其API還在開發當中，截止到目前，已經能夠支持大部分的API了。若是想要看具體的API支持狀況，請戳這邊->supported APIs，你也能夠看下API的開發進度->extension API roadmap。node

接下來我就給你們介紹如下，如何建立一個簡單的插件，並添加到Edge瀏覽器上。固然大前提是，你的PC已經安裝了Win 10，並且你能夠正常使用Edge瀏覽器。chrome

OK. 一切就緒。json

首先咱們來建立一個文件夾，命名爲JSHelloWorldEdgeEx。在這個文件夾裏，咱們再建一個manifest.json 文件。把下面的代碼貼進去。api

{
  "author": "Microsoft OCOS Team",
  "description": "Get information of the active tab.",
  "icons":
    {
      "48": "icons/microsoft.png",
      "96": "icons/microsoft-96.png"
    },
  "manifest_version": 2,
  "name": "HelloWorld",
  "version": "1.0",
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": {
      "30": "icons/microsoft-30.png"
    },
    "default_title": "HelloWorld",
    "default_popup": "GetTabInfo.html"
  }
}

這裏除了author, name, version這三個必填項以外，咱們來看下其餘的幾個配置.瀏覽器

1. icons: 咱們設置了兩個不一樣大小的圖片，例如：48，指的是圖片的長寬都是48px.安全

2. permissions: 設置咱們須要取得的權限，若是要了解更多的權限，戳這邊-> permissionsapp

3. browser_action: 這部分跟chrome插件有點區別，Edge 插件不支持default_icon直接設值，如browser_action : {"default_icon" : "icon.png" }，而是要指定icon大小。最好是20px，25px，30px或者40px，除了這幾個，還支持19px，35px，38px的。咱們這邊是提供了30px的。ide

對於這些圖標，咱們來新建一個文件夾，取名爲「icons」，裏面放如下圖片文件：

microsoft-30.png　microsoft.png　　　microsoft-96.png

咱們能夠看到default_popup設的值是「GetTabInfo.html」, 那咱們接下來就來建個文件命名爲「GetTabInfo.html」，貼入如下代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <link rel="stylesheet" href="GetTabInfo.css" />
  </head>

  <body>
    <div class="tabInfo">Get Tab Info</div>
    <div id="info" style="display:none"></div>
    <script src="GetTabInfo.js" ></script>
  </body>
</html>

html內容很簡單，只有兩個div，js腳本放在「GetTabInfo.js」裏面。再建一個腳本文件「GetTabInfo.js」，貼入以下代碼：

document.addEventListener("click", function(e) {
    if (!e.target.classList.contains("tabInfo")) {
        return;
    }

    var root = document.getElementById("info");
    root.innerHTML = "";
    browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        browser.tabs.get(tabs[0].id, function (tab) {
            var node = document.createElement("div");
            var textnode = document.createTextNode("Url: " + tab.url);
            node.appendChild(textnode);
            root.appendChild(node);
            var node2 = document.createElement("div");
            var textnode2 = document.createTextNode("Title: " + tab.title);
            node2.appendChild(textnode2);
            root.appendChild(node2);
        });
        root.style.display = "block";
    });
});

這段代碼裏面，咱們給「<div class="tabInfo">Get Tab Info</div>」這個div加入了click事件，這個事件裏面咱們調用了兩個API, tabs.query和tabs.get（這邊就用到了以前咱們配置的permission：tabs），拿到了當前窗口的Tab信息，取出url，title，添加到頁面上。要了解更多Tab的屬性，能夠看這裏->Tab。

css文件「GetTabInfo.css」代碼以下：

html {
  width: 350px;
}

.tabInfo {
  margin: 3% auto;
  padding: 4px;
  text-align: left;
  font-size: 1.5em;
  background-color: #E5F2F2;
  cursor: pointer;
}

.tabInfo:hover {
  background-color: #CFF2F2;
}
#info{
    border:2px solid black;
}

文件所有準備完畢，接下來就講講怎麼把咱們建好的插件添加到Edge上去（樓主的是英文版的）

1. 打開Microsoft Edge，地址欄輸入「about:flags」，在Developer settings下面將「Enable extension developer features (this might put your device at risk)」選項勾上

2. 點擊工具欄上的「...」按鈕，選擇Extensions, 點擊Load extension，選擇剛剛咱們建立的文件夾JSHelloWorldEdgeEx，加載好以後，點擊HelloWorld, 開啓「Show button next to the address bar」選項。而後你能夠在右上角看到咱們的圖標。

3. 咱們在地址欄輸入microsoft.com, 點擊插件圖標

4. 點擊Get Tab Info，咱們就能在它下面看到tab的url和title信息

OK, 演示結束~

一個簡單的插件就這樣完成啦~

固然，有的同窗想要把本身的Chrome插件轉成Edge插件，微軟也有提供工具去轉，具體能夠參考這裏Porting an extension from Chrome to Microsoft Edge。

還有如何去debug本身的插件，請參考這邊Debugging extensions。

最後的最後，示例中代碼在這邊取哦->How to add a Hello World extension to Microsoft Edge