这个比微软官网上的例子简单很多,适合入门。总共4个文件: https://files.cnblogs.com/files/blogs/714801/cet6wordpicker.zip 36KB

  • 1.png
  • injected.js
  • popup.html
  • manifest.json

下载后解压到比如D:\cet6wordpicker下,就可以在Edge里安装。我已经发布到了Microsoft Store,但要7个工作日后才有审核结果。

原理

加载Extension后,刷新旧页面或打开新页面,injected.js就被注入到页面里了。这个干了这些事:

// 添加style ``间为多行字符串
function add_style(s){
var e=d.createElement('style'); e.type='text/css'
e.appendChild(d.createTextNode(s)); document.head.appendChild(e)
}
add_style(`
#cet6wp_panel {
display:none; position:fixed; top:0; left:0; width:25em;
... // 添加隐藏的div
var e=document.createElement('div'); e.innerHTML=`
<div id="cet6wp_panel">
...
<p id="cet6wp_words"></p></div>`
d.body.append(e) // 监听Ctrl-F6
d.addEventListener('keyup',function(e){if(e.ctrlKey&&e.keyCode==117)pick(),cet6wp_panel.style.display='block'}) // 数据。按行切分raw得到dic,如{'abandons':abandon, 'abandonment':abandon}
var raw=`
abandon abandons abandoned abandoning abandonment
abbreviation abbreviate abbreviates abbreviated
...
`
// 按Ctrl-F6时执行该函数并把隐藏div显示出来,按X可再次隐藏
function pick(){
var words=document.body.innerText.split(/[^a-zA-z-]/), od={}, s='<p>'
for(i=0; i<words.length; i++){
w=dic[words[i]]
if(w in dic && !(w in od))od[w]=1,s+=dic[w] + ' '
}
cet6wp_words.innerHTML = s + '</p>'
} // 以上代码用(function(){})()包起来不污染名字空间。DOM元素使用前缀

manifest.json里有一行:"content_scripts": [{"matches": ["<all_urls>"], "js": ["injected.js"]}] 指定了injected.js被注入。

当你点击Edge工具栏上此Extension的按钮时,popup.html会显示在下方,这是在manifest.json里如此指定的:

"browser_action": {"default_popup": "popup.html"},

这个就显示了一张图和一句话而已:

<meta charset="gbk">
<style>
body{width:16.5em; background:#050}
*{padding:0; margin:1}
b{font:14pt 'Segoe UI'; color:white; position:relative; top:-5px}
</style>
<center><img src="1.png"><b>按Ctrl-F6挑出单词。</b></center>

加载

点击Edge工具栏最右边的...按钮,在菜单里选择扩展,点击弹出窗口最下面的管理扩展。点击加载解压缩的扩展,选择比如D:\cet6wordpicker,点击确认

打开新网页或刷新旧网页,按Ctrl-F6:

下一步

Edge extension可以做很多事,比如在popup.html和页面之间互相通信,文本转语音等等。更多信息请阅读博客园其它高级文章,或搜索How to write an edge extension, Extension concepts and architecture, Publish a Microsoft Edge extension等。

一个超简单的Microsoft Edge Extension的更多相关文章

  1. 打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

    为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...

  2. 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...

  3. 【小白学PyTorch】1 搭建一个超简单的网络

    文章目录: 目录 1 任务 2 实现思路 3 实现过程 3.1 引入必要库 3.2 创建训练集 3.3 搭建网络 3.4 设置优化器 3.5 训练网络 3.6 测试 1 任务 首先说下我们要搭建的网络 ...

  4. 一听就懂:用Python做一个超简单的小游戏

    写它会用到 while 循环random 模块if 语句输入输出函数

  5. 手写一个超简单的Vue

    基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...

  6. DIY一个超简单的画图程序

    编译环境:VS2017+Easy_X 最近笔者一直在翻阅Easy_X的帮助手册,学习到了一些关于获取鼠标状态消息函数的知识,感觉收获颇大,于是想试验一番,将所学知识运用出来.先补充一下在Easy_X中 ...

  7. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  8. python3使用pyqt5制作一个超简单浏览器

    我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webvie ...

  9. 最近采集写的一个超简单实用的HTML解析类

    1. [文件] HtmlDom.php <?php$oldSetting = libxml_use_internal_errors( true ); libxml_clear_errors(); ...

随机推荐

  1. 作为Bootstrap中文站维护者-我们再次翻译BootstrapVue项目

    点击立即进入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue Bootstrap-Vue 基于全球最流行的前端框架组合应用系统 项目介绍 Bootst ...

  2. Mac 安装 RabbitMQ 出现的问题

    安装 RabbitMQ 在官网这里按照步骤来就行 出现Error: Permission denied @ apply2files - /usr/local/lib/docker/cli-plugin ...

  3. 大爽Python入门教程 1-1 简单的数学运算

    大爽Python入门公开课教案 点击查看教程总目录 1 使用pycharm建立我们的第一个项目 打开pycharm,点击菜单栏,File->New Project 在Location(项目地址) ...

  4. 九. Go并发编程--context.Context

    一. 序言 前几篇中提到 等待多个 goroutine 协作的方式可以使用WaitGroup. 但是有一种场景我们无论是使用Mutex, sync/Once,都无法满足. 场景如下 现在有一个 Ser ...

  5. [loj3333]混合物

    假设选择的调味瓶为$k_{1}<k_{2}<...<k_{s}$,即判定是否存在正有理数解$\{x_{1},x_{2},...,x_{s}\}$,满足$$(\sum_{i=1}^{s ...

  6. [atAGC045E]Fragile Balls

    构造一张有向图$G=([1,n],\{(a_{i},b_{i})\})$(可以有重边和自环),定义其连通块为将其看作无向图(即边无向)后分为若干个连通块 记$in_{i}$为$i$的入度(即最终盒子中 ...

  7. 解决WSL2中Vmmem内存占用过大问题教程

    Windows的linux子系统最大占用可到本机器的80%,所以必须限制一下它的性能来达到优化目的 按下Windows + R 键,输入 %UserProfile% 并运行进入用户文件夹 新建文件 . ...

  8. 开源一个简单的react-native 菜单栏抽屉组件,带缩放效果

    效果如图所示,源码地址:https://github.com/pofabs/PoSideMenu

  9. 统计学习3:线性支持向量机(Pytorch实现)

    学习策略 软间隔最大化 上一章我们所定义的"线性可分支持向量机"要求训练数据是线性可分的.然而在实际中,训练数据往往包括异常值(outlier),故而常是线性不可分的.这就要求我们 ...

  10. Codeforces 497E - Subsequences Return(矩阵乘法)

    Codeforces 题目传送门 & 洛谷题目传送门 一道还算不错的矩乘 tea 罢,不过做过类似的题应该就比较套路了-- 首先考虑对于一个固定的序列 \(\{a\}\) 怎样求其本质不同的序 ...