Javascript Facebook帖子上Chrome扩展中React组件的触发状态更改

我正在为Facebook做一个Chrome插件，我想用外部javascript修改一篇帖子。我可以更改范围的文本内容，但状态未更改，保存按钮未激活

html如下所示：

测试

React开发工具中的组件： [

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

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

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

---

你会怎么做？

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

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

---

关于直接状态更改的可能性：假设您需要更改的组件是一个功能组件

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

因此，您需要以某种方式访问组件的

setState

函数。但是如何访问呢？它对函数调用是私有的。如果您认为可以直接调用

useState

，那么请注意，在另一个组件中，它将返回另一个

setState

。如果您调用

use，我不知道会发生什么状态

在组件外部，但它肯定无法猜测您想要哪个

设置状态

---

如果您愿意，您可以查看react开发工具的源代码，了解如何从react的深度挖掘状态……但您真的想尝试吗？为什么？下次Facebook或react更新时，您的代码肯定会中断。

是什么阻止您使用这些链接中的方法？这不是一个输入，而是一个跨度。这是因为他们使用的是draft js，draft js使用的是编辑可编辑的内容。有一些帖子是关于在draft js/content editable中模拟输入的，但我没有时间验证它们是否有效。检查这个问题可能不会得到满意的答案，因为这是不可能的。相反，请给我们更多信息因此，我们可以找到一个可能的替代方案。您的总体目标是什么，比如，为什么有人编辑帖子？是否有任何关于这方面的文档？react-dev tools通过chrome扩展访问状态，因此这完全是可能的，并且实际上是在生产中完成的。devtools协议支持的内容之间存在巨大差异浏览器JS可以做什么（包括被扩展插入的JS）。devtools集成是由devtools设计的，据我所知，没有可用于此目的的公共API。这是错误的，react devtools在窗口对象上使用了一个全局对象，react然后连接到该对象。您可以在此处看到这方面的源代码：旧repo的自述中也提到了扩展：所以-您完全可以连接通过扩展访问完整的react状态。IIRC从chrome扩展访问状态其实并不难。证据是react开发工具正是这样做的。也就是说，通过模拟输入可以更好地解决这一问题。@ibash react开发工具是由facebook制作的，它们可以访问状态也就不足为奇了。但是你是对的，我是我将重新措辞我的回答。