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

IT技术 javascript google-chrome reactjs google-chrome-extension
2021-05-20 13:07:57

我正在尝试为 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?');
}

但之后像组件中断，当我改变react时，文本与预期相同。任何提示或有可能在不破坏整个应用程序的情况下更改 react DOM？

1个回答

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

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

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

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

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

其它你可能感兴趣的问题
上一篇您应该在金属床 3D 打印机上使用发胶吗？ 下一篇如何在 Immutablejs 和 Redux 以及 Flux 和 React 中设置 Ember 之类的计算属性