Chrome扩展程序变异正在运行的React应用程序 [英] Chrome extension mutating running react application

问题描述

我正在尝试为Chrome创建扩展名，该扩展名会更改Facebook时间轴的DOM. Chrome扩展程序无法注入由页面创建的var或函数: https://developer.chrome.com/extensions/content_scripts#execution-environment

i am trying to create extension for chrome which mutating DOM of facebook timeline. Chrome extension cant inject to var or function created by page: https://developer.chrome.com/extensions/content_scripts#execution-environment

所以它可能会改变反应应用程序的呈现方式?我正在尝试手动更改文本:

So its possible change rendering of react app? I was trying manually change text:

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?');
}

但是之后，类似组件中断，并且当我更改反应时，出现了与预期相同的文本.有任何提示或可能的变化对DOM做出反应而不会破坏整个应用程序吗?

But afterwards Like component breaks and when i change reaction there is same text as expected. Any tips or it is possible change react DOM without breaking whole application?

推荐答案

React不允许您手动手动更改DOM，直到没有明确指定(并且您的情况也是如此)为止.

React don't allow you to mutate the DOM manually at all until it's not clearly specified (and it's not in your case).

更改组件的DOM表示的唯一方法是更改​​其render()方法.为此，您必须在页面的正在运行的JavaScript中更改功能.

The only way to change the the DOM representation of a component is to change his render() method. For this, you have to change a function in the running JavaScript of the page.

很不幸(或幸运的是)，由于安全策略和JavaScript代码的沙箱操作，Chrome扩展程序未对此进行授权.

Unfortunately (or fortunately), this is not authorized by the Chrome extension because of the Security policy and the Sandboxing of your JavaScript code.

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

This should be the official Google's answer to this question. But you can pass through this protection by injecting a <script> tag with your JavaScript code mutating the ReactCompenent behaviour in the DOM of the facebook page. This will force the browser to execute this code in the host page JavaScript VM. I don't know if changing the render() function of a Component can be performed after its initialisation by React, but it's your unique hope to perform what you want.

让我们知道您是否找到了解决方案，知道React是否可以防止这种类型的入侵很有趣.

Let us know if you've found a solution, it can be interesting to know if React can be a protection against this type of intrusion.

这篇关于Chrome扩展程序变异正在运行的React应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！