Webページにキーボードショートカットを設定することはできますか？

システムやアプリケーションのショートカットではなく、特定のWebページで具体的に使用されるキーボードショートカット。

たとえばGmailのショートカット。

例：

FacebookでAlt+ fを押すと、フィードが「トップストーリー」から「最新」に、またはその逆に変更されます。

そして、ユーザーがこれらのショートカットを自分で設定できるようにしますか？おそらくクロム拡張ですか？

拡張機能のショートカットマネージャーを使用すると、カスタムキーボードショートカットを作成できますが、内部ページアクションを実行するには、JavaScriptに関する知識、または少なくともjQueryセレクターが必要です。

公式説明

ショートカットキーをカスタマイズします。JavaScriptコードまたはブラウザアクションをキーストロークに割り当てます。

ブラウザのデフォルトのショートカットキーを変更して、ブックマークレットやJavaScriptアクションをホットキーに割り当てることができます。FirefoxではKeyconfigとして機能します。

アクションの例：

• タブ：「左タブ」、「上位ディレクトリ」、「右タブを閉じる」、「お気に入りのページを開く」、...
• ページ：「上/下にスクロール」、「署名を挿入」、...
• スペシャル：「画面キャプチャ」
• カスタム：ブックマークレットまたはJavaScriptコードを実行します！

設定をインポートまたはエクスポートして、他のユーザーと共有することもできます。

取り付け

1. Shortcut Managerにアクセスします。
2. [ Chromeに追加]をクリックします。
3. 追加をクリックします。

例

Facebookアカウントを持っていないので、キーボードショートカットを使用してスーパーユーザーの受信トレイを開きます。

1. アドレスバーの右側にあるショートカットマネージャアイコンをクリックします。

2. [ すべての設定を表示] / [ 新しいショートカットを追加]をクリックします。

3. 入力フィールドのショートカットキーをクリックし、目的のキーの組み合わせを押します。

   これは、単一のマルチキーショートカット（例えば、いずれかになりますCtrl+ Shift+ IまたはAlt+ I）またはキーの配列（例えば、I、N、B、O、X）。

4. 適切なURLパターンを選択します。

   ドメインsuperuser.comとそのサブドメインのすべてのページを照合するには、次を使用します。

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

5. ではアクション、選択JavaScriptを実行し、入力してください

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

   （1） 。

6. [ 説明]に「受信トレイを開く」と入力します。

7. JavaScriptの.click()メソッドを使用して、Webページの任意のアイテムでのマウスクリックをシミュレートできます。トリッキーな部分はそれらのアイテムにアクセスすることです。ここでjQueryセレクターが役に立ちます。

   通常、受信トレイにアクセスするには、StackExchangeドロップダウンをクリックしてから、受信トレイをクリックします。両方に適切なセレクターが必要です。

   • StackExchangeドロップダウンを右クリックし、[ 要素の検査 ]をクリックします。

     開発者ツールには以下が表示されます。

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

     <a>タグがハイライト表示されます。これはクリックをシミュレートする要素です。

     要素のクラスはgenuです。単にセレクターを使用する.genuこともできますが、同じクラスの要素が複数ある場合は正しく機能しません。より信頼できるアプローチは、selectorを使用して、<div>ID portalLink（IDは一意）のの子ノードとしてアクセスすること#portalLink a.genuです。次に、.click()メソッドを使用します。

     （2）に次のいずれかの行を入力すると、ジョブが実行されます。

     // 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();});
     

   • でStackExchangeのドロップダウン、右クリックして受信トレイをクリックし要素を点検。

     開発者ツールには以下が表示されます。

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

     この要素には独自のID seTabInboxがあります。

     （2）に次のいずれかの行を入力すると、ジョブが実行されます。

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

8. [ 保存]をクリックして、開いているすべてのスーパーユーザーページを再読み込みします。ショートカットを使用する準備ができました。

これにread（Link）を与えます。ブラウザを開く必要がありますが、それほど難しくはありません-