如何从 chrome 扩展访问页面的 react state？

Question

我正在尝试编写一个 chrome 扩展程序，它可以与作为反应应用程序的页面进行交互。 我可以使用popup.js来操作 DOM。

这是我的 popup.js

document.querySelector("#submit").addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  console.log(tab);

  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id },
      files: ["scripts/script.js"],
    },
    (result) => {
      console.log("injection result :", result);
    }
  );
});

在script.js的帮助下，我可以到达除反应 state 之外的任何类型的元素。

我在这里找到了一个 Q/A，它有助于找到 __reactInternal$ 这里是代码。

function FindReact(dom, traverseUp = 0) {
  const key = Object.keys(dom).find((key) => {
    return (
      key.startsWith("__reactFiber$") || // react 17+
      key.startsWith("__reactInternalInstance$")
    ); // react <17
  });
  const domFiber = dom[key];
  if (domFiber == null) return key;

  // react <16
  if (domFiber._currentElement) {
    let compFiber = domFiber._currentElement._owner;
    for (let i = 0; i < traverseUp; i++) {
      compFiber = compFiber._currentElement._owner;
    }
    return compFiber._instance;
  }

  // react 16+
  const GetCompFiber = (fiber) => {
    //return fiber._debugOwner; // this also works, but is __DEV__ only
    let parentFiber = fiber.return;
    while (typeof parentFiber.type == "string") {
      parentFiber = parentFiber.return;
    }
    return parentFiber;
  };
  let compFiber = GetCompFiber(domFiber);
  for (let i = 0; i < traverseUp; i++) {
    compFiber = GetCompFiber(compFiber);
  }
  return compFiber.stateNode;
}

即使上面的代码在控制台上运行良好，我也不能在我的script.js中使用它。 可能是什么原因？ 我如何在 chrome 扩展的帮助下访问 reacts state。

注意：我不想使用 reactdevtool。 我正在尝试编写最终用户扩展。 预先感谢您的回答。

Answer 1

你可以访问它

$r.state

我将直观地添加示例。

要查看 state 数据，这个插件会派上用场： https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

示例图像