一个超简单的Microsoft Edge Extension
这个比微软官网上的例子简单很多,适合入门。总共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的更多相关文章
- 打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释
为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...
- 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...
- 【小白学PyTorch】1 搭建一个超简单的网络
文章目录: 目录 1 任务 2 实现思路 3 实现过程 3.1 引入必要库 3.2 创建训练集 3.3 搭建网络 3.4 设置优化器 3.5 训练网络 3.6 测试 1 任务 首先说下我们要搭建的网络 ...
- 一听就懂:用Python做一个超简单的小游戏
写它会用到 while 循环random 模块if 语句输入输出函数
- 手写一个超简单的Vue
基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...
- DIY一个超简单的画图程序
编译环境:VS2017+Easy_X 最近笔者一直在翻阅Easy_X的帮助手册,学习到了一些关于获取鼠标状态消息函数的知识,感觉收获颇大,于是想试验一番,将所学知识运用出来.先补充一下在Easy_X中 ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- python3使用pyqt5制作一个超简单浏览器
我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webvie ...
- 最近采集写的一个超简单实用的HTML解析类
1. [文件] HtmlDom.php <?php$oldSetting = libxml_use_internal_errors( true ); libxml_clear_errors(); ...
随机推荐
- python一对一教程:Computational Problems for Physics chapter 1-B Code Listings 1.7 - 1.12
作者自我介绍:大爽歌, b站小UP主 ,直播编程+红警三 ,python1对1辅导老师 . 本博客为一对一辅导学生python代码的教案, 获得学生允许公开. 具体辅导内容为<Computati ...
- 使用.NET5、Blazor和Electron.NET构建跨平台桌面应用
Electron.NET是一个嵌入了ASP.NET Core的Electron的封装,通过Electron.NET可以构建基于.NET5的跨平台的桌面应用,使得开发人员只需要使用ASP.NET Cor ...
- [loj3339]美食家
令$f[i][j]$表示第$i$个时刻走到点$j$的最小时间,暴力的$dp$复杂度为$o(tm)$ 如果没有限制,由于$w\le 5$,记录前5个时刻的状态即可求出当前状态,用矩阵乘法可优化到$o(n ...
- js防止重复提交代码
if (checkSubmitFlg == true) { console.log("禁止频繁操作.."); layer.close(ide); return false; } c ...
- HDU 6987 - Cycle Binary(找性质+杜教筛)
题面传送门 首先 mol 一发现场 AC 的 csy 神仙 为什么这题现场这么多人过啊啊啊啊啊啊 继续搬运官方题解( 首先对于题目中的 \(k,P\),我们有若存在字符串 \(k,P,P'\) 满 ...
- mysql-加密函数AES_DECRYPT函数
向user表插入数据age字段值为888,并用AES_DECRYPT函数进行加密,key为age(可以自己随意设置,记住就行) insert into user(name,sex,age) value ...
- VMware和Centos的安装及配置
目录 1. 安装VMware 2. 安装CentOS6及配置 2.1 Centos安装 2.1.1 配置网络连接的三种形式 2.1.1.1 桥连接 2.1.1.2 NAT模式 2.1.1.3 主机模式 ...
- 40-3Sum Closest
3Sum Closest My Submissions QuestionEditorial Solution Total Accepted: 76185 Total Submissions: 2621 ...
- shell 基本系统维护指令
笔记 [1]man.passwd.su.echo命令的用法 (1)获取联机帮助 1)使用man命令可以找到特定的联机帮助页,并提供简短的命令说明.一般语法格式为: man commandname 2) ...
- Scrapy-Redis的安装和使用
Scrapy-Redis是Scrapy的分布式扩展模块,有了它,我们就可以方便地实现Scrapy分布式爬虫的搭建.GitHub:https://github.com/rmax/scrapy-redis ...