Question

我希望我的Chrome扩展程序与包含一些简单的React组件的页面进行交互-在很多普通javascript / html中间的表格。

我的扩展程序不是用React构建的。

您可以通过Chrome扩展程序将什么脚本注入页面中，以访问React Elements（获取其键值和类似值）？一个简单的例子将是帮助我的好方法...

这是我到目前为止所做的：

我可以注入脚本并将其附加到页面的主体...但是不确定如何“导入react”或以其他方式利用页面上的React代码。

在控制台中使用React检查器，我可以看到带有行的元素作为子元素。

我将如何获得该元素的子代？例如，它们的关键值？

如果我注入以下脚本，我只会收到“意外标识符”错误：

import React from 'react';
import ReactDOM from 'react-dom';

我已经尝试了以下操作（在我注入的脚本中）...未找到React（我知道它存在）...已记录“ Inside FindReact function ... 1”消息，但没有其他消息（所以我知道我的脚本已正确插入）。

console.log('In React script...run sub...');
reactSub();

function reactSub(){
    console.log('Inside FindReact function...1');
    window.FindReact = function(dom) {
        for (var key in dom) {
                    console.log('Loooping...');
            if (key.startsWith("__reactInternalInstance$")) {
                var compInternals = dom[key]._currentElement;
                var compWrapper = compInternals._owner;
                var comp = compWrapper._instance;
                            console.log('Inside FindReact function...2') + console.log(comp);
                return comp;
            }
            let snapCount = React.Children.toArray(this.props.children).filter((item) => item.props.className === 'criterions').length;
            // let rubricTable = FindReact(document.querySelector('.criterions'));
            console.log('Inside react script...') + console.log(snapCount);
          }
        return null;
    };

任何帮助/指导表示赞赏。

Answer 1

此帖子非常有帮助：React - getting a component from a DOM element for debugging。尤其是React 16的答案更新。

我正在尝试的代码有很多问题...但是它（尤其是var compInternals = dom[key]._currentElement;）也只在React 15和更早的版本中起作用。我的目标页面显然使用了React 16。

这是我能够注入脚本以访问事物的React方面的方式：

在manifest.json中：

"web_accessible_resources": [
    "scripts/yourScript.js"
],

在现有内容脚本中（可能是由某些事件触发或目标React组件存在）：

var th = document.getElementsByTagName('body')[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    // s.setAttribute('src', file);
    s.setAttribute('src', 'chrome-extension://yourChromeEXTid/scripts/yourScript.js');
    th.appendChild(s);

然后创建一个新脚本yourScript.js：

console.log('In React script...run sub...');

window.FindReact = function(el) {
  for (const key in el) {
        console.log(key);
    if (key.startsWith('__reactInternalInstance$')) {
      const fiberNode = el[key];
            console.log('fibernode: ') + console.log(fiberNode);
            return fiberNode;
      // return fiberNode && fiberNode.return && fiberNode.return.stateNode;
    }
  }
  return null;
};

var targetEl = document.querySelector('.targetReactElement');
var reactIs = FindReact(targetEl);
console.log('Result: ') + console.log(reactIs);

这至少将React对象返回到控制台...我确定可以用以下方法做一些有用的事情：）

Chrome扩展程序可以在页面中注入哪些脚本来访问React元素？

1 个答案: