win10最好用的浏览器-Edge 支持插件了
是一个商机哦,可以把开发的插件发到应用商店,还能设置收费下载呢
Edge浏览器扩展API还在开发当中,目前已经支持了大部分的API 。查看具体的API支持情况,请参考supported APIs,查看API的开发进度-请参考extension API roadmap 。下面讲解下如何创建一个简单的插件并添加到Edge浏览器上。
首先创建一个文件夹,命名为edgeExt。在这个文件夹里,新建一个manifest.json 文件,写入如下代码:
12345678910111213141516171819202122 {"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,写入以下代码:
12345678910 <!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, 写入如下代码:
1234567891011121314151617 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,写入以下代码:
123 html {width: 350px;}插件开发完毕,接下来就把刚开发好的插件添加到Edge浏览器。
打开Edge浏览器,地址栏输入about:flags,在 “开发者设置” 里将 “启用开发人员扩展功能(这可能让设备处于危险之中) ” 选项勾上,点击工具栏上的“...”按钮(即菜单键),选择 “扩展”, 点击 “加载扩展”,选择刚刚创建的文件夹edgeExt,加载好之后,点击edgeExt, 开启“在地址栏旁边显示按钮”选项。然后就可以在右上角看到插件图标了,然后打开http://www.sublimetext.com/,点击插件图标,就会弹出tab的url和title信息。
至此已经开发好了一个简单的插件,debug插件方法请参考这Debugging extensions。