從 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時，您的代碼肯定會中斷。