#每日一记#开发微博的 Chrome 插件快捷键问题-CSDN博客

最近在开发 chrome 的插件，方便微博用户下载图片和视频。

开发的过程中遇到很多问题，这边就记录一下关于快捷键的问题。方便遇到相同问题的小伙伴能参考。

##现有问题在 chrome 插件开发过程中，需要在既有网页里插入一个界面，这个界面需要输入一些内容，当输入的时候就会触发微博的快捷键。

这种体验用户肯定接受不了，那么就要想办法控制这个快捷键的触发。

解决思路

想要看结果的接着往下翻⬇这里讲整个过程

一开始为了解决问题，需要了解一下微博的快捷键逻辑是怎么设计的。

快捷键功能的是通过 keydown 和 keyup 事件触发的

所以先去看一下 dom 上哪里监听了这两个事件，在 html 节点上找到了3个监听

通过这里链接的源码，最后分析出

微博快捷键通过 STK.hotKey 接口来注册和移除

既然找到了监听的位置，接着就想能不能移除这些监听。

Chrome 插件是无法获取网页 window 对象的，只能获取到 dom 对象

由于 chrome 插件开发在安全方面的考虑，插件没法得到 window 对象，那么通过微博接口破解就没有办法了。

只得想办法通过 dom 来处理。去查一下文档看看有没有什么新发现。

Element 继承了EventTarget，那么接着看看这个上面有什么方法.

Sad，这里除了 add 和 remove 没有更多的方法了，removeEventListener 是没有办法使用的

要通过 removeEventListener 移除监听就必须要有注册监听时的函数对象。

有点无路可走的心情，有点无法理解为什么无法获取到一个 dom 上绑定的监听列表，也没有办法简单的移除一个监听。（大概是安全考虑吧）

在网路上各种搜索后，发现了一丝线索，关于事件的传递。

事件既然可以传递，那么就有相应的方法拦截

事件的传递方式有两种：捕获和冒泡阻止事件的传递有两个方法：stopPropagation 和 stopImmediatePropagation

event.stopPropagation() 可以从下一个节点阻止事件传播

event.stopImmediatePropagation() 可以从当前节点阻止事件传播但是当前节点已经触发的事件无法阻止

这是什么意思呢，就是如果能成为节点上第一个注册的事件，那就有权利阻止随后注册的事件被触发（同一个事件名）

知道有这样的方法后就有办法解决了，让 chrome 插件在网页加载前加载，并成为 html 元素上第一个注册 keydown keyup 事件，那么就可以在需要的时候禁止快捷键被触发。

解决方法

// chrome 插件 manifest 配置
// 在网页加载前运行插件
"content_scripts": [
  {
    "js": [
      "jquery.min.js"
      "app.js"
    ],
    "run_at": "document_start"
  }
]
复制代码

// chrome 插件 content_scripts
// app.js
$(document).ready(function () {
  window.Weibo = {
    disableKeyEvent: false
  }

  document.querySelector('html').addEventListener('keyup', function keydown (e) {
    if (window.Weibo.disableKeyEvent) {
      e.stopImmediatePropagation();
    }
  })
  document.querySelector('html').addEventListener('keydown', function keydown (e) {
    if (window.Weibo.disableKeyEvent) {
      e.stopImmediatePropagation();
    }
  })
})
复制代码

在 window（插件的 window）上绑定了一个变量来控制是否禁止快捷键功能，这样技能保留微博快捷键的功能，也能在我需要输入文本的时候不打扰用户体验。

总结

快捷键功能的是通过 keydown 和 keyup 事件触发的
微博快捷键通过 STK.hotKey 接口来注册和移除
Chrome 插件是无法获取网页 window 对象的，只能获取到 dom 对象
event.stopPropagation() 可以从下一个节点阻止事件传播
event.stopImmediatePropagation() 可以从当前节点阻止事件传播但是当前节点已经触发的事件无法阻止

##JSbin

demo 源码