一个超简单的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(); ...
随机推荐
- 菜鸡的Java笔记 Object 类
Object 类 Object类 的主要作用 Object 类的常用方法 内容 虽然有了对象的向上转型,可以解决了参数的统一问题,但是 ...
- R数据分析:纵向数据如何做中介,交叉滞后中介模型介绍
看似小小的中介,废了我好多脑细胞,这个东西真的不简单,从7月份有人问我,我多重中介,到现在的纵向数据中介,从一般的回归做法,到结构方程框架下的路径分析法,到反事实框架做法,从中介变量和因变量到是连续变 ...
- [hdu4582]DFS spanning tree
考虑每一条非树边都连接了祖先和儿子,类似于序列上的问题,从底往上算,当发现如果走到某个环的祖先,且这个环中还没有被选到,那么就将最浅的那条边贪心选择即可具体实现可以使用bitset维护当前子树的询问, ...
- c语言是如何解析表达式语句"2+3*4;"的?
1. 要编译的测试代码: int main(void) { 2+3*4; } 2. 词法分析 词法分析将字符变成token,其中很重要的是token的类型,如字符2的token类型为TK_NUM,这 ...
- C# Pechkin初始化一次后被锁住的问题
Pechkin.dll可用于pdf的生成,常规用法网上都有介绍:https://www.cnblogs.com/felixnet/p/5143934.html 但是当在一个页面上执行过一次之后,再次就 ...
- java Scanner类与String类
Scanner类的使用: 导入Scanner包,new Scanner对象,记得调用System.in参数,调用对应next方法实现键盘录入. import java.util.Arrays; i ...
- Codeforces Gym 101221G Metal Processing Plant(2-SAT)
题目链接 题意:有 \(n\) 个元素,第 \(i\) 个数与第 \(j\) 个数之间有一个权值 \(d_{i,j}\),\(d(i,j)=d(j,i)\). 定义函数 \(D(S)=\max\lim ...
- lilo.conf
描述 默认情况下,本文件 ( /etc/lilo.conf ) 由引导管理程序 lilo 读取 (参考 lilo(8)). 它看起来可能象这样: boot = /dev/hda delay = 40 ...
- Python——MacBook Pro中安装pip
1.系统已有python2和python3,如何检查MacBook Pro系统是否安装的有pip? 看到terminal的提示没有,有提示pip的,下面的提示,说明pip安装了. 要查看pip3是否安 ...
- 微信第三方平台获取component_verify_ticket
官方文档说明: 在公众号第三方平台创建审核通过后,微信服务器会向其"授权事件接收URL"每隔10分钟定时推送component_verify_ticket.第三方平台方在收到tic ...