Chrome 扩展变异运行反应应用程序

Posted 2023-02-22

【中文标题】Chrome 扩展变异运行反应应用程序

【英文标题】：Chrome extension mutating running react application

【发布时间】：2016-08-17 23:27:52

【问题描述】：

我正在尝试为 chrome 创建扩展，它会改变 facebook 时间轴的 DOM。 Chrome 扩展无法注入到页面创建的 var 或函数： https://developer.chrome.com/extensions/content_scripts#execution-environment

那么它可能改变 React 应用程序的渲染？我正在尝试手动更改文本：

var elements = document.querySelectorAll('.UFILikeLink');
for (var i = 0; i < elements.length; i++) 
  var element = elements[i];
  element.innerhtml = element.innerHTML.replace(/Like/g, 'ORly?');

但之后 Like 组件中断，当我更改反应时，会出现与预期相同的文本。有什么提示或者可以在不破坏整个应用程序的情况下更改反应 DOM？

【参考方案1】：

在没有明确指定之前，React 根本不允许您手动改变 DOM（而且您的情况并非如此）。

改变组件的DOM表示的唯一方法是改变他的render()方法。为此，您必须在页面的运行 javascript 中更改一个函数。

很遗憾（或幸运地），由于安全政策和 JavaScript 代码的沙盒化，Chrome 扩展程序未授权。

这应该是谷歌对这个问题的官方回答。但是您可以通过在您的 JavaScript 代码中注入 <script> 标记来改变 Facebook 页面的 DOM 中的 ReactCompenent 行为，从而通过此保护。这将强制浏览器在主机页面 JavaScript VM 中执行此代码。我不知道是否可以在 React 初始化之后更改组件的 render() 函数，但执行您想要的操作是您唯一的希望。

如果您找到了解决方案，请告诉我们，了解 React 是否可以防止此类入侵可能会很有趣。

【讨论】：

React，可以与 __REACT_DEVTOOLS_GLOBAL_HOOK__ 通信，就像 react-devtools 一样，但它对我的问题来说太难了。我想我会用另一种方式来做，或者根本不做。 github.com/facebook/react-devtools 有很多信息 :)