如何在Chrome扩展popup.js中获取MAIN世界按钮点击返回值

第一步：修正popup.js的异步逻辑与回调处理 #

首先要给func添加async关键字（因为使用了await），并在executeScript的then回调中接收注入脚本返回的解析结果：

Button_p.addEventListener('click', () => {
  func();
});

async function func(){
    let queryOptions = { active: true, lastFocusedWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    console.log(tab);
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      files: ["inject.js"],
      world: 'MAIN'
    })
    .then(result => {
      // 从注入脚本的返回结果中获取解析后的文本
      const parsedText = result[0].result;
      // 这里执行存储parsedText的逻辑，比如存入chrome.storage
      chrome.storage.local.set({ savedText: parsedText }, () => {
        console.log('解析文本已存储');
      });
    })
    .catch(err => console.error('注入脚本失败:', err));
}

第二步：改造inject.js返回Promise #

让Func返回一个Promise，在用户点击Button_D并完成文本解析后，通过resolve传递结果：

function Func(){
    // 1. 创建textarea元素
    const textarea = document.createElement('textarea');
    textarea.style.position = 'fixed';
    textarea.style.top = '20px';
    textarea.style.left = '20px';
    textarea.style.width = '300px';
    textarea.style.height = '150px';
    document.body.appendChild(textarea);

    // 2. 创建Button_D按钮
    const Button_D = document.createElement('button');
    Button_D.textContent = '解析文本';
    Button_D.style.position = 'fixed';
    Button_D.style.top = '180px';
    Button_D.style.left = '20px';
    document.body.appendChild(Button_D);

    // 返回Promise，等待按钮点击事件触发解析
    return new Promise((resolve) => {
        Button_D.onclick = () => {
            // 调用parseText解析textarea中的内容
            const parsedText = parseText(textarea.value);
            // 将解析结果传递给popup.js
            resolve(parsedText);
            // 可选：解析完成后清理创建的DOM元素
            textarea.remove();
            Button_D.remove();
        };
    });
}

// 示例解析函数，根据你的需求替换实际逻辑
function parseText(inputText) {
    // 这里写具体的文本解析逻辑，比如提取关键词、格式化等
    return inputText.trim().replace(/\s+/g, ' ');
}

Func();

关键逻辑说明 #

• chrome.scripting.executeScript会等待注入脚本返回的Promise完成，将Promise的resolve值作为result[0].result传递给popup的回调
• 通过Promise实现了popup与注入脚本的异步通信，确保只有用户点击解析按钮并完成处理后，popup才能拿到最终结果

内容的提问来源于stack exchange，提问作者Debanjan Dutta