Chrome扩展程序导致React应用程序运行时出现变异

Question

Chrome扩展程序导致React应用程序运行时出现变异

javascriptgoogle-chromereactjsgoogle-chrome-extension

9

我将翻译如下：

我正在尝试创建一个为Chrome浏览器设计的扩展程序，该程序可以改变Facebook时间线的DOM结构。然而，Chrome扩展程序无法注入页面创建的变量或函数： 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 DOM而不破坏整个应用程序？

- huv1k

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emrys Myrooin · Accepted Answer

React不允许手动修改DOM，除非有明确的指定（在您的情况下没有）。

改变组件的DOM表示的唯一方法是更改它的render()方法。为此，您需要更改页面正在运行的JavaScript中的函数。

不幸的是（或者幸运的是），由于安全策略和JavaScript代码的沙盒机制，Chrome扩展程序不允许这样做。

这应该是谷歌官方对这个问题的回答。但是，您可以通过注入一个带有您的JavaScript代码的<script>标签来绕过此保护，从而改变Facebook页面上React组件的行为。这将强制浏览器在主机页面的JavaScript虚拟机中执行此代码。我不知道是否可以在React初始化组件后执行更改render()函数，但这是您实现所需功能的唯一希望。

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