React Chrome插件开发：如何让handleSubmit获取test内的id值？

问题本质 #

你注入到目标网页的脚本，运行在网页自身的全局上下文里，和你的React组件（插件弹窗/后台的执行环境）完全是两个独立的沙箱。所以你在注入脚本里修改的id，和React组件里定义的id根本不是同一个变量，自然没法同步到OrderID状态里。

可行解决方案 #

利用chrome.scripting.executeScript的返回值特性，让注入脚本把需要传递的结果返回给插件上下文，再用React的状态更新函数同步值。修改后的代码如下：

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import axios from 'axios'

function App() {
  const [OrderID, setOrderNumber] = useState("try again");
  const [Date, setDate] = useState("");
  const [DasherName, setDasher] = useState("");
  const [Cost, setCost] = useState("");

  async function test(){
    /* eslint-disable no-undef */
    // 用await简化异步操作
    const tabs = await chrome.tabs.query({active: true, currentWindow:true});
    const activeTabId = tabs[0].id;
    
    // 执行注入脚本并获取返回结果
    const execResults = await chrome.scripting.executeScript({
      target: {tabId: activeTabId},
      function: ()=>{
        const tabRows = document.getElementsByClassName("styles__BodyRow-sc-4myuz0-3 cnRgPY");
        let status = "try again";
        
        for(let i = 0; i < tabRows.length; i++){
          if(tabRows[i].children[7].innerText !== "$0.00"){
            tabRows[i].style.backgroundColor = "red";
            status = "success";
            // 要是只需要标记第一个符合条件的行，这里可以加break终止循环
            // break;
          }
        }
        // 将结果返回给插件的执行上下文
        return status;
      }
    });

    // 更新React状态
    if(execResults.length > 0){
      setOrderNumber(execResults[0].result);
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    const submitData = { OrderID, Date, DasherName, Cost };
    axios.post(
      "https://sheet.best/api/sheets/****************************",
      submitData
    ).then((response) => {
      console.log(response);
    });
  };

  return (
    <div className="App">
      <button onClick={test}>Search</button>
      <button onClick={handleSubmit}>Paste</button>
    </div>
  );
}

export default App;

核心修改细节 #

• 把test改成异步函数，用await处理Chrome API的异步操作，避免嵌套回调
• 注入脚本里不再直接修改外部变量，而是把最终状态return出去
• 在插件上下文里接收executeScript返回的结果数组，取出结果后调用setOrderNumber更新React状态
• 移除了冗余的组件内id变量，直接用React状态管理值

补充说明 #

如果后续需要传递更复杂的数据，或者注入脚本里有异步操作，也可以用Chrome的消息传递机制：在注入脚本里调用chrome.runtime.sendMessage发送数据，在React组件里用chrome.runtime.onMessage.addListener监听并更新状态。

内容的提问来源于stack exchange，提问作者Jason Hua