一个超简单的Microsoft Edge Extension

2021-12-13 23:37:03 阅读：237 来源： 互联网

标签：... style popup Extension Ctrl js Edge Microsoft

这个比微软官网上的例子简单很多，适合入门。总共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+=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，效果如下：

调试

调试可以在本地进行，甚至可以在没网的情况下进行。test.html: ... <script src="cet6wordpicker/injected.js"></script>

console.log比alert好用。Ctrl+Shift+I打开开发人员工具。

下一步

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

标签：...,style,popup,Extension,Ctrl,js,Edge,Microsoft
来源： https://www.cnblogs.com/funwithwords/p/15685825.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一个超简单的Microsoft Edge Extension