注：本文提到的代碼示例下載地址> How to add a Hello World extension to Microsoft Edge
Microsoft Edge 隨着Win 10一起推出，是微軟現在主推的瀏覽器。Edge 相比較於IE， 有更強的交互性，安全性，提供了更好的用戶體驗。而且這次Edge瀏覽器也開始支持瀏覽器插件嘍。
Edge 上的插件跟其他Chrome, FireFox等瀏覽器上的插件類似。但其API還在開發當中，截止到目前，已經可以支持大部分的API了。如果想要看具體的API支持情況，請戳這邊->supported APIs，你也可以看下API的開發進度->extension API roadmap。
接下來我就給大家介紹以下，如何創建一個簡單的插件，並添加到Edge瀏覽器上。當然大前提是，你的PC已經安裝了Win 10，而且你可以正常使用Edge瀏覽器。
OK. 一切就緒。
首先我們來創建一個文件夾，命名為JSHelloWorldEdgeEx。在這個文件夾里，我們再建一個manifest.json 文件。把下面的代碼貼進去。
{ "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: 設置我們需要取得的權限，如果要了解更多的權限，戳這邊-> permissions
3. browser_action: 這部分跟chrome插件有點區別，Edge 插件不支持default_icon直接設值，如browser_action : {"default_icon" : "icon.png" }，而是要指定icon大小。最好是20px，25px，30px或者40px，除了這幾個，還支持19px，35px，38px的。我們這邊是提供了30px的。
對於這些圖標，我們來新建一個文件夾，取名為“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