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

每日一记 - 但并不日更

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

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

现有问题

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

触发了微博的快捷键

为什么体验可以这么差

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

解决思路

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

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

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

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

bingo

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

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

屏幕快照 2018-03-30 下午2.26.23.png

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

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

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

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

Element

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

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许可证）
转载时请保留原文链接 以保证可及时获取对文章的订正和修改