从 Facebook 帖子上的 Chrome 扩展触发 React 组件的状态更改答案

【问题标题】：Trigger state change of a React component from Chrome extension on a Facebook post从 Facebook 帖子上的 Chrome 扩展触发 React 组件的状态更改
【发布时间】：2020-09-20 01:47:13
【问题描述】：

我正在为 Facebook 做一个 Chrome 插件，我想使用外部 javascript 修改帖子。我可以更改跨度的 textContent，但状态没有改变，保存按钮也没有激活。

html 看起来是这样的：

<div class="" data-block="true" data-editor="1477r" data-offset-key="a699d-0-0">
  <div data-offset-key="a699d-0-0" class="_1mf _1mj">
    <span data-offset-key="a699d-0-0">
      <span data-text="true">test</span>
    </span>
  </div>
</div>

React Developer Tools 中的组件： [

我分析了文本的更改，这是 6 毫秒时间线激活保存按钮的结果。

有一些方法可以修改 React 输入，但没有找到解决我的问题的方法：

如何使用外部 javascript 更改 Facebook 帖子及其状态？

你会怎么做？

【问题讨论】：

是什么阻止您使用这些链接中的方法？
不是输入，而是跨度。
那是因为他们使用的是draft js，draft js使用的是编辑器可编辑的内容。有几篇关于在草稿 js 中模拟输入/内容可编辑的帖子，但我没有时间验证它们是否有效。
查看github.com/facebook/draft-js/issues/325#issuecomment-300372428
这个问题可能不会得到满意的答案，因为这是不可能的。相反，请向我们提供更多信息，以便我们找到可行的替代方案。您在这里的总体目标是什么，例如，为什么有人在编辑帖子？

标签： javascript reactjs facebook google-chrome plugins

【解决方案1】：

这是不可能的，你不能从应用程序外部强制改变 React 元素树。您必须通过修改 Facebook 的前端代码（谨防法律后果）或实现您自己的帖子 UI 以声明方式呈现树。

【讨论】：

有没有关于这个的文档？
React 开发工具通过 chrome 扩展访问状态，因此完全有可能并且实际上正在生产中完成。
devtools 协议支持的内容和浏览器 JS（包括被扩展插入的 JS）可以做的事情有很大的不同。 devtools 集成是由 devtools 设计的，据我所知，没有可用于此的公共 API。
错了，react devtools 在响应然后连接到的窗口对象上使用全局。您可以在此处查看源代码：github.com/facebook/react/blob/… 在 README 中也提到了用于扩展的旧仓库：github.com/facebook/react-devtools/tree/v3
所以 - 您可以通过扩展完全连接到完整的反应状态。

【解决方案2】：

虽然几乎不可能从您的插件中更改 React 组件的状态，但没有什么能阻止您通过发送击键、鼠标点击等来模拟用户的输入。您唯一需要它来弄清楚 -哪个 DOM 元素侦听这些事件（不一定是您所问的 4 个事件之一）。

关于直接更改状态的可能性：假设您需要更改的组件是功能性组件。然后它有一个形式

Component() {
  const [state, setState] = useState(...)
  ...
  setState(something)
  ...
}

所以你需要以某种方式访问组件的setState 函数。但是怎么做？它对函数调用是私有的。如果您认为可以直接调用useState，那么请注意，在another 组件中，它将返回another setState。我不知道如果你在组件之外调用useState 会发生什么，但它肯定无法猜出你想要哪个setState。

如果您愿意，您可以查看 react-devtools 的源代码，了解如何从 React 的深处挖掘状态...但是会你真的想试试吗？为了什么？ Facebook 或 React 下次更新时，你的代码肯定会出错。

【讨论】：

IIRC 实际上从 chrome 扩展访问状态并不难。证明是反应开发工具正是这样做的。也就是说，最好通过模拟输入来解决这个问题。
@ibash react-devtools 由 facebook 制作，他们可以访问状态也就不足为奇了。但你是对的，我会改写我的答案。