从 Facebook 帖子上的 Chrome 扩展触发 state 更改 React 组件

Question

我正在为 Facebook 做一个 Chrome 插件，我想使用外部 javascript 修改一个帖子。 我可以更改跨度的 textContent 但 state 没有更改，并且“保存”按钮未激活。

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 输入，但没有找到解决我的问题的方法：

• https://github.com/facebook/react/issues/11488
• https://github.com/facebook/react/issues/10135#issuecomment-314441175

如何用外部 javascript 更改 Facebook 帖子和他的 state？

你会怎么做？

Answer 1

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

Answer 2

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

---

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

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

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

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