Update React State from Extension

[Peter]

Hi Gentlemen,

I have requirement to set a state on React JS app from extension. I am to send messages from React to Chrome Extension but not able to understand how to do this back from Extension to react.

Regards,

Peter

[Peter]

I want update react state from browser extension.  Please do help me. I am pretty new to this extension stuff. 

[PhistucK]

If you do not control the code, you will have to mess with the internals of React in order to change component states. You will need to run a script in the world of the page for that, as only the DOM itself is shared between the content script world and the world of the page. Any page-created variables/fields/members/classes/functions are not shared.

React adds some internal data to every element in its tree, so, say, divElement.__reactFiber$owts4s8nwc (note that the field name is different for every page load or something, but it starts with __react, which you can find via Object.getOwnPropertyNames(divElement)) has some data that you might be able to use to get to what you want.

If you do control the code, you can use window.postMessage from your content script to send a message to the page and vice versa, or a custom event.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/777d965c-4f61-4585-bf7a-55d069f87e92n%40chromium.org.

[Peter]

Thank PhistucK for you quick response and time. 

Could you please point me to some page which can help. I don't see anything which is understandable. If I am able to send value or response  from background.js to my react app is ok. I will handle the react code based on the response. 

[PhistucK]

I see, from the background page/script, you can run chrome.scripting.executeScript({world: 'MAIN', ...}) to run code in the relevant tab, in the world of the page.

☆PhistucK