kangkangblog

Menu

那一天我想用issue写代码

乍一看,为什么你这人有这么奇怪的想法。
我不能理解你
首先这个需求是由于。我最近新建了一些学习的repo
那么我有一些笔记并不想upload成一个file。那么我想我应该可以用issue来记录我的一些练习代码(其实gist也可以的)
那么当我使用issue的时候。我会发现其实有几点不便之处。(当然github附带了一些功能已经是很好了)
当我写我的代码,我想使用缩进时,tab键是会直接将focus的焦点移动到按钮上,而不是有我理所当然的制表符出现在我的输入框内。
老实说这是我所不能理解的。issue我们知道经常是需要贴一些demo的。
so 决定直接hack一下tab功能。


刚开始的想法肯定是直接在输入框内焦点时劫持tab。
1. tab劫持

形如
输入框.addEventListener('keydown',callback,false);
伪代码

然后再针对tab的keyCode做判断即可
然而还有一些需要优化,例如我们需要对选择的文本进行tab增加缩进
2. 选择文本tab缩进
这一点是比较辛苦的。因为网上实在是太多以前"老玩家们的hack"了,我甚至还能翻到11年的博文。。
所幸还是找到了对应的玩法。
getSelection 这个方法。可以获得我们在浏览器网页选择的内容。
(这个方法,有很大一块东西,这里就不细谈了。据此还可以做一些诸如复制粘贴的功能)
selectionStart selectionEnd setRangeText 这些都是HTMLInputElement的一些方法。
也是比较有意思的。有兴趣也可以继续挖掘。这里也不细谈。
有了这几个api之后。我们可以进行对输入框内部文本的选取以及替换。乍一看,这是不是就搞好了。
然而还是有一些bug存在
例如。撤销的操作栈混乱。因为使用了setRangeText 替换文本后。操作栈异常。也没有得到很好的解决。
3. 修复操作栈问题。
简单的利用一个数组进行存储替换文本操作。然后再劫持ctrl+Z方法。进行更改文本。(这是一种简单有效。但并非最好)
4. chrome插件可配置。
因为是做成的chrome插件。所以给它加一点配置。例如tab默认是制表符,可以选择自己想要的填充物。
操作起来也不难。我是用的storage进行配置同步触发。配置项存储在chrome的storage内。

这边提一下chrome插件的基本方式。
content script / popup page / background page
content script 是嵌入式地运行在网页上(据此可以做一些广告拦截之类的东西)
popup 插件图标被点击时,弹出的窗口页面
background 则是用于管理插件。主要逻辑
之间通信的模型大多是 监听 传输触发 观察者模型


这篇是后补的。与之前写的版本有略微不同,这篇可能比较简洁。。。可怕可怕。
2018年3月2日14:30:18 补上
发布日期仍然为此篇文章铸成时

— 于 共写了1182个字
— 文内使用到的标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注