win10 Edge浏览器插件开发
win10最好用的浏览器-Edge 支持插件了
是一个商机哦，可以把开发的插件发到应用商店，还能设置收费下载呢
Edge浏览器扩展API还在开发当中，目前已经支持了大部分的API 。查看具体的API支持情况，请参考supported APIs，查看API的开发进度-请参考extension API roadmap 。下面讲解下如何创建一个简单的插件并添加到Edge浏览器上。 首先创建一个文件夹，命名为edgeExt。在这个文件夹里，新建一个manifest.json 文件，写入如下代码： { "author": "muyuren", "description": "Get information of the active tab.", "icons": { "48": "icons/microsoft.png", "96": "icons/microsoft-96.png" }, "manifest_version": 2, "name": "edgeExt", "version": "1.0", "permissions": [ "tabs" ], "browser_action": { "default_icon": { "30": "icons/microsoft-30.png" }, "default_title": "edgeExt", "default_popup": "GetTabInfo.html" } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 { "author": "muyuren", "description": "Get information of the active tab.", "icons": { "48": "icons/microsoft.png", "96": "icons/microsoft-96.png" }, "manifest_version": 2, "name": "edgeExt", "version": "1.0", "permissions": [ "tabs" ], "browser_action": { "default_icon": { "30": "icons/microsoft-30.png" }, "default_title": "edgeExt", "default_popup": "GetTabInfo.html" } } icons: 设置了两个不同大小的图片，例如：48，指的是图片的长宽都是48px. permissions: 设置需要取得的权限，了解更多的权限请参考 permissions browser_action: 这部分跟chrome插件有点区别，Edge 插件不支持default_icon直接设值，如browser_action : {"default_icon" : "icon.png" }，而是要指定icon大小。最好是20px，25px，30px或者40px，除了这几个，还支持19px，35px，38px的 新建一个名为icons的文件夹来放放以下图片文件上面文件指定的图标(请自行准备相应的图标) default_popup设的值为“GetTabInfo.html”, 接下来就创建文件GetTabInfo.html，写入以下代码： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="GetTabInfo.css" /> </head> <body> <div id="info" style="display:none"></div> <script src="GetTabInfo.js" ></script> </body></html> 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="GetTabInfo.css" /> </head> <body> <div id="info" style="display:none"></div> <script src="GetTabInfo.js" ></script> </body></html> 创建文件GetTabInfo.js， 写入如下代码： window.onload = function () { 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"; }); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 window.onload = function () { 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"; }); }; 这里调用了两个API, tabs.query和tabs.get，这里就用到了之前配置的permission：tabs，拿到了当前窗口的Tab信息，取出url，title，添加到页面上。了解更多Tab属性请参考Tab。 创建文件GetTabInfo.css，写入以下代码： html { width: 350px; } 1 2 3 html { width: 350px; } 插件开发完毕，接下来就把刚开发好的插件添加到Edge浏览器。 打开Edge浏览器，地址栏输入about:flags，在 “开发者设置” 里将 “启用开发人员扩展功能(这可能让设备处于危险之中) ” 选项勾上，点击工具栏上的“...”按钮(即菜单键)，选择 “扩展”, 点击 “加载扩展”，选择刚刚创建的文件夹edgeExt，加载好之后，点击edgeExt, 开启“在地址栏旁边显示按钮”选项。然后就可以在右上角看到插件图标了，然后打开http://www.sublimetext.com/，点击插件图标，就会弹出tab的url和title信息。 至此已经开发好了一个简单的插件，debug插件方法请参考这Debugging extensions。
腾讯云开发者
