推荐文章

html+css右上角红点提示

html+css右上角红点提示

右上角提示红点,用在未读信息提醒或待处理提示等等
AI图标编辑SVG的方法

AI图标编辑SVG的方法

使用Adobe Illustrator制作无锯齿图标
UEditor在线编辑器

UEditor在线编辑器

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
UEditor工具条配置toolbars

UEditor工具条配置toolbars

UEditor工具条toolbars配置
Ueditor辑器中的 setContent()方法的使用

Ueditor辑器中的 setContent()方法的使用

Ueditor辑器中的 setContent()方法的使用

edge插件开发

日期:2019-03-21 点击:888 来源:PB2.CN
一、项目结构

manifest.json :清单文件 必须有,此插件配置清单,命名必须是manifest.json
images:放置插件图标
js:放置插件执行的js文件



二、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.放在images目录下
2. permissions: 插件权限,参考 permissions
3. browser_action: 设置插件默认的图片
4.default_title:标题随意取
5.content_scripts:向网页内容注入的js脚本,

   其中:matches字段必须要有,对匹配的网页注入.   js对应js文件,   run_at:何时注入 这里选择加载文当前


三、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>


三、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";
    });
});




四、在edge中配置插件
1.地址栏输入“about:flags” 2.勾选选项 3.右侧选中''' 4. 点击扩展 5.点击加载扩展(选择自制插件地址) 6.注意打开此扩展程序


这篇文档对您是否有帮助?

html+css右上角红点提示

html+css右上角红点提示

右上角提示红点,用在未读信息提醒或待处理提示等等
AI图标编辑SVG的方法

AI图标编辑SVG的方法

使用Adobe Illustrator制作无锯齿图标
UEditor在线编辑器

UEditor在线编辑器

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
UEditor工具条配置toolbars

UEditor工具条配置toolbars

UEditor工具条toolbars配置
Ueditor辑器中的 setContent()方法的使用

Ueditor辑器中的 setContent()方法的使用

Ueditor辑器中的 setContent()方法的使用