[Q/A] How to access __reactInternalInstance, __reactEventHandlers?

[aaamoon]

What happened?

Why I can not get the properties : __reactInternalInstance and __reactEventHandlers of element from the Content Script inside chrome extension created by plasmo, but I can get the properties which project created by Create React App?

Is there a way to get them from the scope of the chrome extension created by plasmo ?

chrome devtools console:

This is my code:

1、in Create React App(https://codesandbox.io/s/suspicious-maria-lss4ef)

2、in plasmo(https://codesandbox.io/s/serene-smoke-vd82de)

Version

Latest

What OS are you seeing the problem on?

Windows, MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

@aaamoon can you give me an extension that can access these properties with a react web page that I can use to test with, that'd be helpful!

This seems to me that we're trying to get an extension to inspect the react context's scoped property outside of its own instance. I'm not sure that's even possible?... Like not even with the extension, can you query those fields from the chrome console?

All-in-all, I doubt this is something related to Plasmo.

[aaamoon]

@louisgv I've tried to create a extension without Plasmo and I can't get __reactInternalInstance, __reactEventHandlers also.
After I searched, I found that stackoverflow seems to have a solution for extensions to obtain these two values, but I don't know how to apply it in Plasmo.

Related Links: https://stackoverflow.com/questions/53197472/chrome-extension-content-script-is-not-showing-all-available-properties-in-dom
https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions/9517879#9517879

I don't understand very well, if you can understand too well, can you give me an example of how to get __reactInternalInstance, __reactEventHandlers in Plasmo, thank you very much.

[aaamoon]

@louisgv I can query those fields from the chrome console.

[hijiangtao]

@louisgv @aaamoon I faced same problem in developing projects, and I think it's not a problem of plasmo itself, it's actually a limitation of chrome for extension's development.

Actually, you can't access all the properties of a DOM (or be called HTMLElement for some reason). __reactInternalInstance is the property you can't access from extension context (such as content UI element), a solution for it can be "send a executable script to MAIN world, and get it inside it".

You can test it via Object.keys() and pass a really element created by React/Angular/Vue into it, and see the results (a property list).

[hijiangtao]

@aaamoon As far as I know, we can achieve this goal with three parts:

1. Send messages from content script (content UI script)
2. Get the logic code that you want to deal with DOM packed and inject it into MAIN
3. Get messages from MAIN and deal with DOM, and then return the results

For content script:

// - postMessage to MAIN
window.postMessage(...)

// - get message from MAIN
window.addEventListener("message", ...)

For background script:

const injectScript = () => {
  console.log(document.querySelector('#root').__reactInternalInstance$)

   window.postMessage(...)
}

chrome.scripting.executeScript(
    {
      target: {
        tabId
      },
      world: "MAIN", 
      func: injectScript
    },
    () => {
      console.log("Background script got callback after injection")
    }
  )

We can use window.postMessage to connect between content script and MAIN, and injection can be realized with chrome.scripting.executeScript API. :-)