一个超简单的Microsoft Edge Extension
时间:2021-12-14 作者:funwithwords
这个比微软官网上的例子简单很多,适合入门。总共4个文件: https://域名/files/blogs/714801/域名 36KB
- 域名
- 域名
- 域名
- 域名
下载后解压到比如D:\cet6wordpicker下,就可以在Edge里安装。我已经发布到了Microsoft Store,但要7个工作日后才有审核结果。
原理
加载Extension后,刷新旧页面或打开新页面,域名就被注入到页面里了。这个干了这些事:
// 添加style ``间为多行字符串 function add_style(s){ var e=域名teElement(\'style\'); 域名=\'text/css\' 域名ndChild(域名teTextNode(s)); 域名ndChild(e) } add_style(` #cet6wp_panel { display:none; position:fixed; top:0; left:0; width:25em; ... // 添加隐藏的div var e=域名teElement(\'div\'); 域名rHTML=` <div id="cet6wp_panel"> ... <p id="cet6wp_words"></p></div>` 域名nd(e) // 监听Ctrl-F6 域名ventListener(\'keyup\',function(e){if(域名Key&&域名ode==117)pick(),域名lay=\'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=域名域名t(/[^a-zA-z-]/), od={}, s=\'<p>\' for(i=0; i<域名th; i++){ w=dic[words[i]] if(w in dic && !(w in od))od[w]=1,s+=dic[w] + \' \' } 域名rHTML = s + \'</p>\' } // 以上代码用(function(){})()包起来不污染名字空间。DOM元素使用前缀
域名里有一行:"content_scripts": [{"matches": ["<all_urls>"], "js": ["域名"]}] 指定了域名被注入。
当你点击Edge工具栏上此Extension的按钮时,域名会显示在下方,这是在域名里如此指定的:
"browser_action": {"default_popup": "域名"},
这个就显示了一张图和一句话而已:
<meta charset="gbk"> <style> body{width:域名; background:#050} *{padding:0; margin:1} b{font:14pt \'Segoe UI\'; color:white; position:relative; top:-5px} </style> <center><img src="域名"><b>按Ctrl-F6挑出单词。</b></center>
加载
点击Edge工具栏最右边的...按钮,在菜单里选择扩展,点击弹出窗口最下面的管理扩展。点击加载解压缩的扩展,选择比如D:\cet6wordpicker,点击确认。
打开新网页或刷新旧网页,按Ctrl-F6:
下一步
Edge extension可以做很多事,比如在域名和页面之间互相通信,文本转语音等等。更多信息请阅读博客园其它高级文章,或搜索How to write an edge extension, Extension concepts and architecture, Publish a Microsoft Edge extension等。