Apakah mungkin untuk mengatur pintasan keyboard di halaman web?

Bukan pintasan sistem atau aplikasi, tetapi pintasan keyboard yang digunakan khusus pada laman web tertentu.

Pintasan Gmail misalnya.

Contoh:

Tekan Alt+ fsaat di Facebook itu akan mengubah umpan dari 'Top Stories' ke 'Most Recent' dan sebaliknya.

Dan izinkan pengguna untuk mengatur pintasan ini sendiri? Mungkin ekstensi chrome?

Ekstensi Shortcut Manager memungkinkan Anda membuat pintasan keyboard khusus, tetapi melakukan tindakan halaman dalam membutuhkan sedikit pengetahuan dalam JavaScript atau setidaknya jQuery Selectors .

Deskripsi resmi

Kustomisasi tombol pintasan; Tetapkan kode Javascript atau tindakan peramban apa pun untuk penekanan tombol apa pun.

Anda dapat mengubah tombol cara pintas default browser, dan menetapkan bookmarklet atau tindakan Javascript untuk hotkey Anda. Ini berfungsi sebagai Keyconfig di Firefox.

Contoh tindakan:

• Tab: "Tab Kiri", "Direktori atas", "Tutup tab kanan", "Buka halaman favorit Anda", ...
• Halaman: "Gulir ke atas / bawah", "Masukkan tanda tangan Anda", ...
• Spesial: "Tangkapan Layar"
• Kustom: Jalankan Bookmarklets atau kode Javascript apa pun!

Anda juga dapat mengimpor atau mengekspor pengaturan Anda sehingga Anda dapat membagikannya dengan orang lain.

Instalasi

1. Kunjungi Shortcut Manager .
2. Klik Tambahkan ke Chrome .
3. Klik Tambah .

Contoh

Saya tidak memiliki akun Facebook, jadi mari kita buka kotak masuk Pengguna Super menggunakan pintasan keyboard.

1. Klik ikon Shortcut Manager di sebelah kanan mahakotak.

2. Klik Lihat semua pengaturan / Tambahkan pintasan baru .

3. Klik pada bidang input tombol pintas dan tekan kombinasi tombol yang diinginkan.

   Hal ini dapat berupa multi-tombol pintas tunggal (misalnya, Ctrl+ Shift+ Iatau Alt+ I) atau urutan kunci (misalnya, I, N, B, O, X).

4. Pilih pola URL yang sesuai .

   Untuk mencocokkan semua halaman domain superuser.comdan subdomainnya, gunakan:

   *://superuser.com/*
   *://*.superuser.com/*
   

5. Di Action , pilih Execute Javascript dan masukkan

   http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
   

   dalam (1) .

6. Masukkan Buka kotak masuk di Deskripsi .

7. Kita dapat menggunakan .click()metode JavaScript untuk mensimulasikan klik mouse pada setiap item halaman web. Bagian yang sulit adalah mengakses barang-barang itu. Di sinilah penyeleksi jQuery berguna.

   Biasanya, untuk mengakses kotak masuk Anda, Anda akan mengklik dropdown StackExchange , lalu kotak masuk . Kami membutuhkan penyeleksi yang tepat untuk keduanya.

   • Klik kanan dropdown StackExchange dan klik Periksa Elemen .

     Anda akan melihat yang berikut ini di alat pengembang:

     <div id="header">
         <div id="portalLink">
             <a class="genu" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
             </div>
             ...
     </div>
     

     The <a>tag disorot; ini adalah elemen tempat kami ingin mensimulasikan klik.

     Kelas elemen adalah genu . Kita bisa menggunakan pemilih .genu, tetapi itu tidak akan berfungsi dengan baik jika ada beberapa elemen dari kelas yang sama. Pendekatan yang lebih andal adalah mengaksesnya sebagai simpul anak dari <div>dengan ID portalLink (ID unik), menggunakan pemilih #portalLink a.genu. Kemudian, kami menggunakan .click()metode.

     Memasukkan salah satu dari baris berikut dalam (2) akan melakukan pekerjaan:

     // click first <a> element with class `genu'
     // inside the element with ID `portalLink'
     $('#portalLink a.genu')[0].click();
     
     // click first <a> element with class `genu'
     // inside the element with ID `header'
     $('#header a.genu')[0].click();
     
     // click first element with class `genu' of the entire page
     $('.genu')[0].click();
     
     // click first <a> element of the entire page (unreliable)
     $('a')[0].click();
     
     // directly perform the onclick event (easy, but not always available)
     StackExchange.ready(function(){genuwine.click();});
     

   • Dalam dropdown StackExchange , klik kanan inbox dan klik Inspect Element .

     Anda akan melihat yang berikut ini di alat pengembang:

     <a id="seTabInbox" class="seCurrent">Inbox</a>
     

     Elemen ini memiliki ID sendiri: seTabInbox .

     Memasukkan salah satu dari baris berikut dalam (2) akan melakukan pekerjaan:

     // click first (only) element with ID `seTabInbox'
     $('#seTabInbox')[0].click();
     
     // click sixth <a> element of the entire page (unreliable)
     $('a')[5].click();
     

8. Klik Simpan dan muat ulang semua halaman Super User yang terbuka. Pintasan Anda siap digunakan.

Coba baca ini ( Tautan ), itu tidak terlalu sulit walaupun Anda harus membuka browser-