是否可以在网页上设置键盘快捷键？

Question

不是系统或应用程序快捷键，而是特定网页上专门使用的键盘快捷键。

例如 Gmail 快捷方式。

例子：

在 Facebook 上按Alt+f会将提要从“头条新闻”更改为“最新消息”，反之亦然。

并允许用户自己设置这些快捷方式？也许是 chrome 扩展？

Answer 1

扩展快捷方式管理器允许您创建自定义键盘快捷方式，但执行内页操作需要一些 JavaScript 或至少jQuery Selectors方面的知识。

官方说明

自定义快捷键；将任何 Javascript 代码或浏览器操作分配给任何击键。

您可以更改浏览器默认快捷键，并将任何书签或 Javascript 操作分配给您的热键。它在 Firefox 上用作 Keyconfig。

示例操作：

• 选项卡：“左选项卡”、“上层目录”、“关闭右选项卡”、“打开您喜欢的页面”、...
• 页面：“向上/向下滚动”，“插入您的签名”，...
• 特殊：“屏幕截图”
• 自定义：执行任何书签或 Javascript 代码！

您还可以导入或导出您的设置，以便与他人共享。

安装

1. 访问快捷方式管理器。
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. 在Action 中，选择Execute Javascript并输入

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

   在(1) 中。

6. 在描述中输入打开收件箱。

7. 我们可以使用 JavaScript 的.click()方法来模拟鼠标点击网页的任何项目。棘手的部分是访问这些项目。这就是 jQuery 选择器派上用场的地方。

   通常，要访问您的收件箱，您需要点击StackExchange下拉菜单，然后点击inbox。我们都需要合适的选择器。

   • 右键单击StackExchange下拉列表，然后单击Inspect Element。

     您将在开发人员工具中看到以下内容：

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

     该<a>标签被高亮显示; 这是我们想要模拟点击的元素。

     元素的类是genu。我们可以简单地使用 selector .genu，但如果有多个相同类的元素，那将无法正常工作。更可靠的方法是使用选择器将其作为<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下拉列表中，右键单击收件箱并单击Inspect Element。

     您将在开发人员工具中看到以下内容：

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

     此元素有自己的 ID：setTabInbox。

     在(2) 中输入以下任何行都可以完成这项工作：

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

8. 单击保存并重新加载所有打开的超级用户页面。您的快捷方式可以使用了。