一個超簡單的Microsoft Edge Extension

Fun_with_Words發表於2021-12-13
ROS

這個比微軟官網上的例子簡單很多，適合入門。總共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工具欄最右邊的...按鈕，在選單裡選擇擴充套件，點選彈出視窗最下面的管理擴充套件。

開啟開發人員模式：一個超簡單的Microsoft Edge Extension

  點選載入解壓縮的擴充套件，選擇比如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等。

相關文章