从Chrome扩展程序中的Javascript获取reactInstance

问题描述

我在开发Chrome扩展程序时遇到了问题。此扩展用于基于ReactJS的网站。我需要从页面中删除一些数据。他就是这个页面的一个例子。

I'm currently facing a problem while developing a Chrome Extension. This extension is used on a ReactJS based website. I need to scrap some data from the page. He is an example of the page.

<div class="UserWallet">
   <tbody>
      <tr class"Trans"><td>...</td></tr>
      ...
   <tbody>
</div>

当我使用Chrome检查器时，我可以看到我的 div class = UserWallet> 有一个属性 __ reactInternalInstance 。我找到了一个用于获取React实例的函数 findReact（element）。此功能用于名为 Steemit-More-Info 的其他Chrome扩展程序。我有完全相同的功能，并使用相同的HTML元素作为参数，但我的功能不起作用。当我执行 $（。UserWallet）时，结果不包含属性 __ reactInternalInstance 。但是在另一个扩展中，它使用相同的JQuery代码和相同的findReact函数。

When I use the Chrome inspector, I can see that my div class="UserWallet"> has a property __reactInternalInstance. I found a function findReact(element) used to get the React Instance. This function is used in an other Chrome Extension called Steemit-More-Info. I have the exact same function and a use the same HTML element as parameter but my function is not working. When I do $(".UserWallet)", the result doesn't contains the property __reactInternalInstance. But in the other extension, it's working with the same JQuery code and the same findReact function.

这是findReact的代码。

Here is the code for findReact.

var findReact = function(dom) {
   for (var key in dom) {
      if (key.startsWith("__reactInternalInstance$")) {
        var compInternals = dom[key]._currentElement;
        var compWrapper = compInternals._owner;
        var comp = compWrapper._instance;
        return comp;
      }
    }
    return null;
};

有没有人遇到过这个问题？我需要在扩展程序中包含一个特殊的库才能废弃reactInstance吗？

Has anyone ever faced that problem? Is there a special library that I need to include in my extension to be able to scrap the reactInstance?

谢谢，

cedric_g

推荐答案

可以修改网页时的解决方法。

A workaround idea when you can modify the webpage.

也许您可以将嵌入数据放在这样的特定标签中：

Maybe you can put the nedded data in a specific tag like this:

<div class="UserWallet">
    <span
      style={{ display: 'none' }}
      id="my-user-wallet-data"
    >{ JSON.stringify(myData) }</span>
  ...
</div>

然后你可以使用

var wallet = document.getElementById（'my-user-wallet-data'）

所以你可以得到这个元素的内部文本

And so you can get the inner Text of this element

这篇关于从Chrome扩展程序中的Javascript获取reactInstance的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！