google浏览器插件开发-控制vue页面input框的自动填充

    //监听消息
chrome.extension.onMessage.addListener(
  function (request, sender, sendResponse) {
    const copyData = request.data
    switch (request.action) {
      case 'filling':
        //粘贴
        const forms = document.getElementsByTagName("form")
        let targetForm
        if (forms?.length) {
          for (let i = 0; i < forms.length; i++) {
            const labels = forms[i].getElementsByTagName('label')
            if (labels?.length) {
              for (let j = 0; j < labels.length; j++) {
                if (labels[j].innerHTML === '姓名') {
                  targetForm = forms[i]
                  fillTargetForm(targetForm, copyData)
                }
              }
            }
          }
        }
        break
      case 'transfer':
        // 转换数据
        if (sendResponse) {
          console.log('发送消息')
          sendResponse('接收消息')
        }
        break
      default:
        console.log('接收到数据')
        break
    }
  }
)

function dealData(copyData) {
  if (!copyData) return
  const inputEle = ['现居住地址', '联系人手机号码', '配偶姓名', '监护人姓名', '监护人电话', '交通工具', '车牌号', '单位/学校名称', '单位地址', '配偶证件号码', '监护人证件号码', '户籍详址', '其他联系方式', '姓名', '证件号码', '手机号码']
  // '拟离开时间',
  const selectEle = ['民族', '居住事由', '户籍地']
  // , '文化程度', '政治面貌', '婚姻状况', '配偶证件种类', '监护人证件种类', '与房主关系'
  // const selectEle = ['民族', '居住事由', '文化程度', '政治面貌', '婚姻状况', '配偶证件种类', '监护人证件种类', '与房主关系']
  const defaultVal = ['出生日期']
  const radioEle = ['性别', '是否户籍人员', '居住类型',]
  const inputMap = {}
  const selectMap = {}
  const radioMap = {}
  const defaultMap = {}
  const copyDataArr = copyData.split(' \n')
  copyDataArr && copyDataArr.map((el, idx) => {
    const key = el.split('：')[0]
    const value = el.split('：')[1]
    if (inputEle.includes(key)) {
      inputMap[key] = value
    } else if (selectEle.includes(key)) {
      selectMap[key] = value
    } else if (radioEle.includes(key)) {
      radioMap[key] = value
    } else if (defaultVal.includes(key)) {
      defaultMap[key] = value
    }
  })
  return [inputMap, selectMap, radioMap, defaultMap]
}


async function fillTargetForm(targetForm, copyData) {
  const [inputMap, selectMap, radioMap, defaultMap] = await dealData(copyData)
  const inputKeyArr = Object.keys(inputMap)
  const selectKeyArr = Object.keys(selectMap)
  const radioKeyArr = Object.keys(radioMap)
  const defaultArr = Object.keys(defaultMap)
  console.log('inputKeyArr>>>>', inputKeyArr);
  const labels = targetForm.getElementsByTagName('label')
  if (labels?.length) {
    for (let j = 0; j < labels.length; j++) {
      if (inputKeyArr.includes(labels[j].innerHTML)) {
        // console.log('labels[j].innerHTML>>>>>', labels[j].innerHTML);
        // input输入框
        const inputWraper = labels[j].nextElementSibling
        const inputEles = inputWraper.getElementsByTagName('input')

        if (inputEles?.length) {
          let inputEle
          if (inputEles.length === 1) {
            inputEle = inputEles[0]
          } else if (inputEles.length === 2) {
            inputEle = inputEles[1]
          }

          inputEle.value = (inputMap[labels[j].innerHTML]).trim()

          if (labels[j].innerHTML === '拟离开时间') {
            inputEle.innerText = (inputMap[labels[j].innerHTML]).trim()
            const event1 = document.createEvent('HTMLEvents')
            event1.initEvent('click', false, true)
            event1.initEvent('input', false, true)
            event1.initEvent('change', false, true)
            inputEle.dispatchEvent(new Event('input'))
            inputEle.dispatchEvent(new Event('click'))
            inputEle.dispatchEvent(new Event('change'))
            inputEle.dispatchEvent(event1)
            // console.log('event1>>>', event1);
            // setTimeout(() => {
            // }, 800)
          } else {
            const event = document.createEvent('HTMLEvents')
            event.initEvent('input', false, true)
            inputEle.dispatchEvent(event)
          }
        }
      } else if (defaultArr.includes(labels[j].innerHTML)) {
        // 默认div值
        const inputWraper1 = labels[j].nextElementSibling
        const inputWraper2 = inputWraper1.firstChild
        const inputEle = inputWraper2.firstChild
        const event = document.createEvent('HTMLEvents')
        event.initEvent('onchange', false, true)
        inputEle.dispatchEvent(event)
        inputEle.innerHTML = defaultMap[labels[j].innerHTML]
      } else if (selectKeyArr.includes(labels[j].innerHTML)) {
        // 选择下拉框
        const inputWraper = labels[j].nextElementSibling
        const inputEle = inputWraper.getElementsByTagName('input')[0]
        inputEle.value = selectMap[labels[j].innerHTML]
        const event = document.createEvent('HTMLEvents')
        event.initEvent('click', false, true)
        // event.initEvent('select', false, true)
        // const event = document.createEvent('MouseEvents')
        // event.initEvent('click', true, true)
        inputEle.dispatchEvent(event)
        inputEle.click()
      } else if (radioKeyArr.includes(labels[j].innerHTML)) {
        // radio选择值
        const inputWraper = labels[j].nextElementSibling
        const inputWraper2 = inputWraper.children[0]
        if (radioMap[labels[j].innerHTML].indexOf('男') > -1) {
          /**触发事件 */
          if (inputWraper2.firstChild.getAttribute('tabindex' != '0')) {
            const event = document.createEvent('HTMLEvents')
            event.initEvent('click', false, true)
            inputWraper2.firstChild.firstChild.dispatchEvent(event)
          }
          /**触发事件 */
        } else if (radioMap[labels[j].innerHTML].indexOf('女') > -1) {
          if (inputWraper2.firstChild.firstChild.nextElementSibling.getAttribute('tabindex' != '0')) {
            const event = document.createEvent('HTMLEvents')
            event.initEvent('click', false, true)
            inputWraper2.firstChild.firstChild.nextElementSibling.dispatchEvent(event)
          }
        } else {
          /**触发事件 */
          const _labels = inputWraper2.firstChild.getElementsByTagName('label')
          for (let k = 0; k < _labels.length; k++) {
            const labelVal = (_labels[k].getElementsByTagName('span')[2]).innerText
            if (labelVal == radioMap[labels[j].innerText]) {
              if (_labels[k].getAttribute('tabindex') != '0') {
                const labelInput = _labels[k].getElementsByTagName('input')[0]
                if (labelVal === '自住') {
                  labelInput.value = '01'
                } else if (labelVal === '租住') {
                  labelInput.value = '02'
                } else if (labelVal === '寄住') {
                  labelInput.value = '03'
                }

                const event = document.createEvent('HTMLEvents')
                event.initEvent('click', false, true)
                _labels[k].dispatchEvent(event)


                const event2 = document.createEvent('HTMLEvents')
                event2.initEvent('input', false, true)
                labelInput.dispatchEvent(event2)
              }
            }
          }
          /**触发事件 */
        }

      }

    }
  }
}

关键语句