javascript - Chrome 扩展改变正在运行的 React 应用程序

Question

我正在尝试为 chrome 创建扩展，它会改变 facebook 时间轴的 DOM。 Chrome 扩展无法注入(inject)由页面创建的 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?');
}

但之后就像组件中断一样，当我更改 react 时，会出现与预期相同的文本。有什么技巧或者有可能在不破坏整个应用程序的情况下更改 React DOM 吗？

Answer 1

React 根本不允许您手动更改 DOM，除非它没有明确指定(并且这不是您的情况)。

更改组件的 DOM 表示的唯一方法是更改​​其 render()方法。为此，您必须更改页面运行的 JavaScript 中的函数。

不幸的是(或幸运的是)由于安全策略和您的 JavaScript 代码的沙盒化，Chrome 扩展程序未授权此操作。

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

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