Keyboard Event：在網頁上自定義快速鍵

先前寫了一堆 userscript 針對不同的網站加上快速鍵 (像是翻下一頁或是上一頁)：

然後發現太多重複的事情了，就寫成 Chrome 的 extension 了：「Keyboard Event」，程式碼在 GitHub 上有放：「gslin/keyboard-event」，不信任一致性的話也可以用 Chrome extension source viewer 直接看 chrome web store 上面放的版本。

這個 extension 的想法是設定 hostname、path 以及按鍵，接著設定按鍵按下後會觸發的 DOM element (用 CSS selector 選) 與 DOM event (像是 mouseover 這樣的 event 字串)。

而其中 click event 常常不會動 (對應實際的呼叫是 element.dispatchEvent(new Event('click')))，在 debug 時發現需要用 click() (對應實際的呼叫是 element.click())，所以有特別接受 click() 這個字串。

這個舉個例子，我有一組設定是：

www.instagram.com
.*
<
div[role="dialog"] button[aria-label="Go back"]
click()

www.instagram.com
.*
>
div[role="dialog"] button[aria-label="Next"]
click()

在瀏覽器上面看 Instagram 的照片時可以用 < 與 > 快速切換照片。

另外設定的部分支援 chrome.storage 的 browser sync，對於有多瀏覽器時會自動同步設定檔，不用每一台都設定一次...

這算是第一次寫 Manifest V3 的 extension (先前都是 V2)，本來想用 Vue.js 處理設定頁 options.html，但遇到了 CSP 的問題，在 Manifest V3 上面無法設定 unsafe-eval，於是 Vue.js 只能用 runtime 版本，喪失了 template 好用的地方...

後來決定回頭用 jQuery + jQuery UI (用 sortable)，然後自己處理一堆 data 更新時頁面的變化，一整個 2010 年老人味都出來了...

但這樣至少會動，先跑一陣子看看...

Keyboard Event：在網頁上自定義快速鍵

Related

Leave a Reply