2

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

 7 months ago
source link: https://blog.gslin.org/archives/2024/01/22/11608/keyboard-event%ef%bc%9a%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e8%87%aa%e5%ae%9a%e7%be%a9%e5%bf%ab%e9%80%9f%e9%8d%b5/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 年老人味都出來了...

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

Related

在網頁行動版的 Twitter 上增加快速鍵

現在 Twitter 的網頁版愈做愈慢，於是有不少人在桌機上是用提供給行動裝置的版本瀏覽 (也就是 mobile.twitter.com 這個站)，但這個站的功能其實頗陽春。 而 sindresorhus/refined-twitter 這個專案則在行動版本上面增加了許多快速鍵，在 Google Chrome 上可以透過 Store 安裝：「Refined Twitter」。 之前沒用過行動版的網站，這速度快好多啊...

May 6, 2016

In "Browser"

Gmail 刪除信件的快速鍵

Gmail 刪除信件的功能一直都沒有快速鍵，結果有人發現在 Opera 9.1 可以用 End 鍵做到：'Secret' Gmail Delete Mail Keyboard Shortcut。 因為其他所有的 Browser 都做不到，所以我猜可以用 End 在 Opera 9.1 裡面刪除的功能應該是 bug 造成的吧 XD Google 裡的某些人大概又開始在暗幹 Opera 了... XD

January 24, 2007

In "Browser"

Optimus 的三鍵鍵盤

在二月的時候在 鍵盤 這篇提到 Optimus Mini 的預購，剛剛終於在 Slashdot 上看到 Optimus Mini 三鍵鍵盤 的 review 了：Optimus Mini Three OLED keyboard reviewed，原文在這：Optimus Mini Three: OLED keyboard reviewed。 (引用二月那篇的圖，讓沒看過 & 忘記的人看一下這個三鍵鍵盤有多華麗... XD) 直接引用第三頁的說明，這支鍵盤其實裡面就有個小型的處理器以及記憶體： Apart from the obligatory resistors and capacitors, we discover three big chips. In the centre of the board is a PIC18F8722…

October 1, 2006

In "Computer"

a611ee8db44c8d03a20edf0bf5a71d80?s=49&d=identicon&r=gAuthor Gea-Suan LinPosted on January 22, 2024January 22, 2024Categories Browser, Computer, GoogleChrome, Murmuring, Network, Programming, SoftwareTags chrome, dom, element, event, extension, html, keyboard

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Notify me of follow-up comments by email.

Notify me of new posts by email.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)

Post navigation


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK