注：本文提到的代码示例下载地址> 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

如何在Microsoft Edge浏览器中添加一个Hello World插件的更多相关文章

  1. [保姆级教程] 如何在 Linux Kernel (V5.17.7) 中添加一个系统调用（System call）

    最近在学习 <linux Kernel Development>,本书用的linux kernel 是v2.6 版本的.看完"系统调用"一节后,想尝试添加一个系统调用, ...

  2. 如何在RCP程序中添加一个banner栏

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...

  3. 如何在ASP.NET Core中实现一个基础的身份认证

    注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET Core中实现一个基础的身份认证 ...

  4. [转]如何在ASP.NET Core中实现一个基础的身份认证

    本文转自:http://www.cnblogs.com/onecodeonescript/p/6015512.html 注:本文提到的代码示例下载地址> How to achieve a bas ...

  5. 006.Adding a controller to a ASP.NET Core MVC app with Visual Studio -- 【在asp.net core mvc 中添加一个控制器】

    Adding a controller to a ASP.NET Core MVC app with Visual Studio 在asp.net core mvc 中添加一个控制器 2017-2-2 ...

  6. Microsoft Edge浏览器下载文件乱码修复方法(二)

    之前有写过"Microsoft Edge浏览器下载文件乱码修复方法",发现很多情况下下载文件乱码问题还是存在,这里对之前内容做简单补充,希望可以帮到大家. 方法二: 默认如果提示下 ...

  7. 008.Adding a model to an ASP.NET Core MVC app --【在 asp.net core mvc 中添加一个model （模型）】

    Adding a model to an ASP.NET Core MVC app在 asp.net core mvc 中添加一个model (模型)2017-3-30 8 分钟阅读时长 本文内容1. ...

  8. 如何在ppt或word中添加高亮代码？

    如何在ppt或word中添加高亮代码? 问题: 如何ppt中添加带有语法高亮的程序代码,就如同下面的形式(在ppt嵌入高亮代码,且可以编辑,带有行号) 详细的要求如下: 1.代码带有语法高亮. 2.结 ...

  9. 如何在 GitHub 的项目中创建一个分支呢？

    如何在 GitHub 的项目中创建一个分支呢? 其实很简单啦,直接点击 Branch,然后在弹出的文本框中添加自己的 Branch Name 然后点击蓝色的Create branch就可以了,这样一来 ...

随机推荐

  1. 探究负边距（negative margin）原理

    W3C规范在介绍margin时有这样一句话: Negative values for margin properties are allowed, but there may be implement ...

  2. Apache Hadoop2.x 边安装边入门

    完整PDF版本:<Apache Hadoop2.x边安装边入门> 目录 第一部分:Linux环境安装 第一步.配置Vmware NAT网络 一. Vmware网络模式介绍 二. NAT模式 ...

  3. 解决Bash On Ubuntu On Window安装Zsh无效问题附安装说明

    前言 Zsh是一款非常棒的Shell,使用Linux和Mac系统的人,基本上都知道zsh的存在. 问题 在安装完Zsh后,zsh是可以使用的,但是重启之后,又恢复至默认的bash. 我在安装好之后,使 ...

  4. webParts与Web部件

    web部件是ASP.NET WebForm里面的服务器控件,它涵盖的内容比较多,鉴于这种状况的话鄙人不打算深究下去了,只是局限于了解web.config配置里面的配置内容则可. 那么也得稍微说说啥是W ...

  5. ICSharpCode.SharpZipLib 压缩、解压文件 附源码

    http://www.icsharpcode.net/opensource/sharpziplib/ 有SharpZiplib的最新版本,本文使用的版本为0.86.0.518,支持Zip, GZip, ...

  6. C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能

    前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...

  7. JDBC——Java代码与数据库链接的桥梁

    常用数据库的驱动程序及JDBC URL: Oracle数据库: 驱动程序包名:ojdbc14.jar 驱动类的名字:oracle.jdbc.driver.OracleDriver JDBC URL:j ...

  8. PHP变量

    变量的声明 PHP变量声明必须是$(美元符号)+变量名进行命名,同时在=(赋值操作符)后进行赋值 声明后的变量不是仅可以在一个<?php 这里是php代码 ?>使用,它还可以在当前页面所有 ...

  9. java基础2.-------interface接口类，实现接口

    1.为什么使用接口,是把功能方法都写在一个类中,在其他需要调用的时候,通过implements实现该接口 2.接口可以继承多个父类接口,在实现接口的时候,实现类实现所有方法 3.在接口类写方法时,自动 ...

  10. 在QMainWindow中利用多个QDockWidget构成标签页tab（原创）

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...