为什么我要无聊开发一个chrome脚本

简单来说是发现了运营需求，因为如果一般的图片加上超链接，会在图文上有个门的标志的样式，并且用户点击，微信会提醒是否需要打开新页面，用户可能会放弃进来，可能会损失转化，常用做法是拼一个a标签, 混入其中的富文本(代码形如下)


<a data-linktype="2" 
    href='${href}'
    style="background-image: url(${bannerurl});
    background-position: 
    center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    display: inline-block;
    overflow: hidden;
    font-size: 1px;
    max-height: 313px;
    width: 100%;
    height: 0px;
    padding-top: 57%;" 
    target="_blank">&nbsp;</a>

因为微信使用ueditor会直接把你插入的html当成页面元素，当然这也算是微信一个小漏洞或者ueditor的bug，以前运营做法是通过chrome打开控制台，用祖传脚本document.queryselector找到当前富文本id下进行append和replace，效率非常感人，发一篇文章可能需要10-20分钟(在电脑正常的情况下)。

于是我萌生了开发一款工具的想法，但需要它容易安装，且容易让运营人员接受的形式，不增加第三方的工具，那chrome脚本就非常合适，早期1.0版本我用了顶上tab菜单的方法，但是效果不好，因为你鼠标点了别的地方他就收起来，几个item项的编辑起来非常麻烦，在随后迭代中，我想那么我们可以学习一个叫新媒体管家插件一些做法，把元素做成一个面板可以进行自由组合和选择，于是就有了这个。

坑点

这里我也发现了一些坑，譬如，微信用的是ueditor的编辑器，你如果用window.getSelection().getRangeAt()试图去获取光标一定会得到一个报错，起初我以为是使用姿势不对，查阅了很多API说明后发现，就是这个编辑器做的妖，后来找到一个csdn文章(不得不说如果你找的是国内技术圈生态才有的东西譬如狗屁的微信生态，你真的没办法得看csdn)，原来是这样才能准确插入到光标位置。

UE.getEditor('js_editor').focus();
UE.getEditor('js_editor').execCommand('inserthtml', el)

这里还有个小坑，chrome拓展的content-script里面声明的js，不能和原来页面的js有交互，你也读不了他window上的对象，譬如UEditor挂载在window.UE对象上，但你在你脚本里读不了这个对象，怎么办呢，你可以在初始化的时候往页面再append一个脚本，在这个脚本去拿window.UE就可以拿到了，那怎么和你的脚本通信呢？没错，postMessage.

const theScript = document.createElement('script');
theScript.innerHTML = `
    window.addEventListener("message", (msg)=> {
        const el = msg.data;
        if (window.UE) {
            UE.getEditor('js_editor').focus();
            UE.getEditor('js_editor').execCommand('inserthtml', el)         
        }
    }, false);
`;
document.body.appendChild(theScript);

DEMO:

670824519 (1).gif

作为开发，我们需要不仅仅关注自身业务的一亩三分地，你需要利用技术去发现问题，提出问题，解决其他人的痛点，节省了时间，这也是技术的价值。