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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏你不就像风一样

破解智慧树视频弹题及实现自动播放下一节

打开对应的两个js文件,我们分析可以看到,videoList.js应该是智慧树页面的一些业务逻辑,videoPlayer.min.js是视频播放器插件。 ...

1192
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

1091
来自专栏我是攻城师

Java程序排查问题利器之Btrace

3734
来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

744
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(2) -- 基本了解及urllib的使用

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

3376
来自专栏实用工具入门教程

如何部署 Jenkins 服务

Jenkins是一个开源自动化服务器,可以自动执行持续集成和交付软件所涉及的重复技术任务。Jenkins是基于Java的,可以从Ubuntu软件包安装,也可以通...

563
来自专栏Python攻城狮

Django教程(一)- Django视图与网址1.简介2.环境搭建3.安装pycharm4.Ubuntu下 正确安装VMware Tools5.Django主要模块6.Django基本命令7. Dj

Django 是用Python开发的一个免费开源的Web框架,可以用于快速搭建高性能,优雅的网站!

732
来自专栏晨星先生的自留地

django(1)初次见面-我叫姜哥

1315
来自专栏hotqin888的专栏

ONLYOFFICE历史版本功能的开发技术之一

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

782
来自专栏技术之路

golang调试工具Delve

Devle是一个非常棒的golang 调试工具,支持多种调试方式,直接运行调试,或者attach到一个正在运行中的golang程序,进行调试。   线上gol...

3115

扫码关注云+社区