#每日一记#开发微博的 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() 能够从当前节点阻止事件传播 可是当前节点已经触发的事件没法阻止

##JSbin

demo 源码

罗小黑写写文字

若是喜欢文章 请留下一个赞~ 若是喜欢文章 分享给更多人~

在掘金中关注我 在简书中关注我

自由转载-非商用-非衍生-保持署名（创意共享3.0许可证） 转载时请保留原文连接 以保证可及时获取对文章的订正和修改