async function inputText(input, text) {
  // 手动触发 input 和 change 事件
  for (let event of ['click', 'focus', 'text', 'input', 'change', 'blur']){
  if (event === 'text'){
    input.value = text;
  }else{
        input.dispatchEvent(new Event(event, { bubbles: true }));

  }
  await sleep(600)
  }
}

方式1

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function simulateTextInput(inputBox, text) {
    let range = document.createRange();
    range.selectNodeContents(inputBox);
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    await sleep(500)

    let inputEvent = new InputEvent('input', {
        bubbles: true,
        cancelable: true,
        inputType: 'insertText',
        data: text
    });

    inputBox.textContent = text;
    inputBox.dispatchEvent(inputEvent);
}

box = document.querySelector('#main .copyable-area [contenteditable="true"][role="textbox"]')
simulateTextInput(box, "😇")

方式2

let text = document.querySelector('div textarea')
    let pasteEvent = new ClipboardEvent('paste', {
        dataType: 'text/plain',
        data: imgs.join('\n')
    });

    let event = new Event('input', {
        bubbles: true,
        cancelable: true,
    });

// 模拟设置粘贴的内容
    text.value = 'something';

// 触发粘贴事件
    text.dispatchEvent(event);

方式3

const e = new InputEvent("input", {
                bubbles: true,
                cancelable: true
            });
            ele.dispatchEvent(e);
            const ee = new KeyboardEvent("keydown", {
                altKey: false,
                bubbles: true,
                cancelable: true,
                key: 'Enter',
                code: 'Enter',
                keyCode: 13,
                repeat: false
            });
            ele.dispatchEvent(ee);

终极

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function fillData(input, value) {
    let events = ['click', 'focus', 'setVal', 'input', 'change', 'blur'];
    for (let event of events) {
        if (event === 'setVal') {
            if (input.tagName.toLowerCase() === 'input') {
                input.setAttribute('value', value)
            } else {
                //text
                input.textContent = value
            }
        } else {
            console.log(`fill value query: ${input} value: ${value} event: ${event}`,);
            let eventObj = new Event(event, {
                bubbles: true,
                cancelable: true,
            })
            input.dispatchEvent(eventObj);
            await sleep(400)
        }
    }
}

监听

window.addEventListener("customer", function (event) {
    });

发起

window.dispatchEvent(new CustomEvent("customer", {}));

查询tabs

function queryTabs(queryOptions) {
    return new Promise((resolve, reject) => {
        chrome.tabs.query(queryOptions, (result) => {
            if (chrome.runtime.lastError) {
                reject(chrome.runtime.lastError);
            } else {
                resolve(result);
            }
        });
    });
}

后台和内容脚本通信

接收方

chrome.runtime.onMessage.addListener( (request, sender, sendResponse) =>{
        console.log(`receive message: `, request);
        
        sendResponse({msg: 'msg'}); 
    //表示异步操作，不会立刻关闭消息接收
    return true; 

发送方

chrome.runtime.sendMessage({type: "query"}, (res) => {
        console.log("返回结果 ", res);
    });

发送方

postMessage({type: 'NOTIFY', msg: 'msg'}, '*')  //

接收方

window.onmessage = (e) => {
  console.log("收到消息");
  let {  type , msg} = e.data;
  switch (type) {
    case "NOTIFY":

      break;
  }
};

mouse event

function createMouseEvent(eventType, rect) {
    return new MouseEvent(eventType, {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: rect.left + rect.width / 2,  // 元素的水平中心
        clientY: rect.top + rect.height / 2,  // 元素的垂直中心
        screenX: window.screenX + rect.left + rect.width / 2,  // 相对于屏幕的位置
        screenY: window.screenY + rect.top + rect.height / 2,  // 相对于屏幕的位置
        button: 0  // 左键
    });
}

const rect = ele.getBoundingClientRect();
ele.dispatchEvent(createMouseEvent('mousedown', rect));
ele.dispatchEvent(createMouseEvent('mouseup', rect));
ele.dispatchEvent(createMouseEvent('click', rect));  // 模拟 click 事件

point event

function createPointerEvent(eventType, rect) {
    return new PointerEvent(eventType, {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: rect.left + rect.width / 2,
        clientY: rect.top + rect.height / 2,
        screenX: window.screenX + rect.left + rect.width / 2,
        screenY: window.screenY + rect.top + rect.height / 2,
        button: 0,
        pointerId: 1,  // 指针 ID，一般使用 1
        width: 1,      // 指针宽度
        height: 1,     // 指针高度
        pressure: 0.5  // 模拟的触控压力，0-1 范围
    });
}