【Chrome-crx】鍵盤模擬鼠標點擊網頁按鈕

0x00 前言

最近在做一個標註任務：
簡單的說，就是屏幕上有好多小方塊，選中其中的部分，
然後在頁面下面的四個標註按鈕（紅綠藍黑）上點一下，
小方塊們就會被染成這個按鈕的顏色，需要把所有的小方塊們染色完。

請各位想象一下：純鼠標工作，在一個白底的網頁上來回翻飛舞動，眼睛都看花啦！
所以我決定想個法子把這四個染色按鈕綁在我鍵盤上的幾個鍵上（QWER就是你們了）。
（以後標註起來看起來在打DOTA一樣哈哈哈）

0x01 配置使用

二話不說先貼解決方案：

• 裝個插件： ShortKey for Chrome
• 配置按鍵：
  
  • Keyboard Shortcut（選擇按鍵）: Q
  • Behavior（選擇效果）: Run JavaScript
  • Label as（取個名字）: "按下C按鈕"
  • Javascript code to run（跑一段javascript代碼）:
    
    • document.getElementsByClassName('btn btn-C')[0].click()
    • （當然可以寫好多，這裏我要求不多就寫了一行）
  • Active while in form fields（選擇生效頁面）
    
    • Only for specific sites（我選的是隻在這個網域生效）
    • www.blablablabla.com/mark/todo/*
• 刷新頁面，開始使用
  
  • 如上述配置的意思爲：
    
    • 僅在標註頁面的url域生效，
    • 按下鍵盤中的Q鍵，
    • 等效於點擊class名稱爲’btn btn-C’的按鈕一次。

0x02 詳細說明

其實我覺得叫詳細說明不如叫心路歷程哈哈哈

首先這是我在Chrome商店搜索shortkey直接淘出來的一個擴展程序：

Shortkeys (Custom Keyboard Shortcuts)
由Mike Crittenden提供

看起來還不賴，我就去check了一下支持哪些功能（要知道，擴展性是一個程序的生命線啊）
然後看到這一行的時候我的眼鏡就閃閃發光了——“Behavior: Run JavaScript”
好的就決定是你了，能跑一個腳本語言比什麼不強？

然後就是javascript了，哼╭(╯^╰)╮，本大爺怎麼可能有五分鐘內不能寫出來的東西

$('.btn-C').click()
//Uncaught ReferenceError: $ is not defined at <anonymous>:1:1

這……不科學，怎麼連$都不認識呢，明明我在console裏可以直接用的啊！
那這樣行麼：

document.getElementById('btn btn-C').click()
//Uncaught TypeError: Cannot read property 'click' of null at <anonymous>:1:37

啥……Null？那就是說沒拿到咯……然後進行了如下的嘗試，看如何能獲得那個button對象

document.getElementById('.btn')
null
document.getElementById('.btn-C')
null
document.getElementById('btn btn-C')
null

document.getElementsByClassName('.btn')
[]
length: 0
__proto__: HTMLCollection

document.getElementsByClassName('btn btn-C')
[button.btn.btn-C]
length: 1
0: button.btn.btn-C
__proto__: HTMLCollection

好好好，有對象了有對象了（總覺得這句話哪裏不對）
那就決定是你了！
document.getElementsByClassName('btn btn-C').click()

啊咧怎麼又……哦對了是個list不好意思哈哈哈
document.getElementsByClassName('btn btn-C')[0].click()

搞定，看我一個QEQWR連招帶走對面（老師我真的在標註，真的真的~）