如何在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