Chrome浏览器插件开发实践：在实现csdn文章发布表单自动填充时遇到的问题及解决方法

AI时代的程序员
269 阅读2分钟

前面的几篇文章介绍了在开发“微信公众号文章多平台发布助手”这个浏览器插件时用到的一些关键的插件技术。

本篇介绍一下最终实现将从公众号文章页拿到的内容自动填充到csdn文章发布表单并实现自动发布时遇到的几个问题和解决方法。

添加图片注释，不超过 140 字（可选）

主要有三个问题：

  1. 填充标题后触发字数校验
  2. 往富文本编辑器中填充内容
  3. 填写文章标签

标题、内容和标签这三项是必填项，只有都填写了才能提交。

第一个问题

填充标题本身没什么难度，就是找到对应的input输入框，给它赋值就可以。但是发现，这样通过编程的方式赋值之后，不会触发字数校验，导致提交时报错。要解决这个问题，需要在输入框元素上派发一下input事件，这样就能触发字数校验了，代码如下：

const titleInput = document.querySelector("#txtTitle")

titleInput.value = res.title
// 触发字数校验
titleInput.dispatchEvent(new Event('input'))

第二个问题

往富文本编辑器中填充内容，这个不太好解决，因为没法通过直接给dom元素赋值来实现，需要调用富文本编辑器js实例的赋值方法才行。最终是用了一种比较hack的方法，定义了两个内容脚本，一个用来将文章内容赋值到dom元素，另一个再从dom元素去值并调用编辑器实例的setData方法来实现的。具体原理可参见上篇文章浏览器插件和网页间的桥梁：Content Script。具体代码如下

在csdn-get-data.js中给dom元素赋值的代码：

document.querySelector("#cke_1_contents > iframe").contentWindow.document.body.innerHTML = res.content

在csdn.js中通过调用编辑器的setData方法赋值的代码：

let content = document.querySelector("#cke_1_contents > iframe").contentWindow.document.body.innerHTML
content += '\n<p>欢迎关注微信公众号：文本魔术，了解更多。</p>'

window.editorxx.setData(content)

第三个问题

填写文章标签，关键点在于填写了之后，通过模拟回车事件，才能将输入的值填入表单中。

添加图片注释，不超过 140 字（可选）

插入文章标签及最后点击提交的代码如下：

setTimeout(() => {
    document.querySelector("#moreDiv > div.el-form-item.mb8.mt16.form-item-flex.required.is-no-asterisk > div > div > div.mark_selection_title_el_tag > button > span").click()
    const tagInput = document.querySelector("#moreDiv > div.el-form-item.mb8.mt16.form-item-flex.required.is-no-asterisk > div > div > div.mark_selection_box > div.mark_selection_box_header > div > div.el-input.el-input--small.el-input--suffix > input")
    tagInput.value = 'web hacks'
    tagInput.dispatchEvent(new Event('input'))
    setTimeout(() => {
        tagInput.dispatchEvent(new KeyboardEvent('keydown', {
            code: 'Enter',
            key: 'Enter',
            charCode: 13,
            keyCode: 13,
            view: window,
            bubbles: true
        }))

        setTimeout(() => {
            document.querySelector("#moreDiv > div.el-form-item.publish-opt-box.is-no-asterisk > div > div > div.btn-box > button.el-button.btn-outline-danger.ml16.el-button--primary.is-round").click()
        }, 100)
    }, 100)
}, 1500)

用了很多延时执行，代码比较丑陋。不过效果实现了。以后再慢慢优化吧。

前文回顾：

写了一个chrome浏览器插件，实现将微信公众号文章自动发布到csdn

Chrome浏览器插件开发实践：用Service Workers实现跨域数据共享

浏览器插件和网页间的桥梁：Content Script

欢迎关注微信公众号：文本魔术，了解更多。

avatar
文章
阅读
粉丝