How do I share state variables between two anchored React components?
I understand well how to inject independent React components as described here:
https://docs.plasmo.com/framework/content-scripts-ui
However, I don't understand how to share state variables between those two components. In a regular React application you'd typically "lift the state up", but here I don't understand how that would work. Do I have to create an ancestor component without an anchor that would wrap the two components?
I thought about using the messaging system, but it seems to be mainly to communicate between content scripts and the background service worker. It seems that the storage API: https://docs.plasmo.com/framework/storage might be a good fit, but maybe this is overkill and there is a simpler way to do this?
Thank you for your help!
https://docs.plasmo.com/framework/content-scripts-ui
However, I don't understand how to share state variables between those two components. In a regular React application you'd typically "lift the state up", but here I don't understand how that would work. Do I have to create an ancestor component without an anchor that would wrap the two components?
I thought about using the messaging system, but it seems to be mainly to communicate between content scripts and the background service worker. It seems that the storage API: https://docs.plasmo.com/framework/storage might be a good fit, but maybe this is overkill and there is a simpler way to do this?
Thank you for your help!
Plasmo Docs
How to inject your own components into an existing web page with Plasmo's Content Scripts UI features.
Plasmo Docs
A library that makes it easy to store data in your browser extension's storage.