Какой скрипт может добавить расширение Chrome на страницу для доступа к элементам React?

Question

Я хочу, чтобы мое расширение Chrome взаимодействовало со страницей, которая включает в себя несколько простых компонентов React - таблицу в середине множества простых javascript / html.

Мое расширение НЕ построено с React.

Какой сценарий вы могли бы внедрить на страницу через расширение Chrome, которое могло бы получить доступ к элементам 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 - получение компонента от элемента DOM для отладки . Особенности обновления ответа для React 16.

У кода, который я пробовал, было много проблем ... но он также (особенно var compInternals = dom[key]._currentElement;) работал только в React 15 и более ранних версиях. Моя целевая страница, очевидно, использует React 16.

Вот как я смог внедрить скрипт, чтобы получить доступ к React:

In 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 ... который я уверен, что смогу потом сделать что-то полезное с:)