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

最近在开发 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() 可以从当前节点阻止事件传播 但是当前节点已经触发的事件无法阻止