Pass data from Content Script to Popup
Hi all!
First of all: many thanks for this awesome framework, it absolutely makes building an extension a breeze 💪
I am working on an extension with the following setup:
- Popup -> Just for displaying data
- Content Script -> Reading data from the current page
I'm trying to get the Popup to display the data that the Content Script has read from the page. I've tried it with Messaging and with Storage, but never to the point that it was actually able to retrieve the data.
Could someone help me with this, or maybe provide a very basic example?
Any help would be so incredibly appreciated!!
7 Replies
Take a look at the messaging example - the popup in that example has exactly what you're looking for - i.e grab data from cs and render on popup
That's weird, I'm sure I tried all of that. I'll try again and post my results!
You mean here? https://github.com/PlasmoHQ/examples/blob/main/with-messaging/popup.tsx Because I only see calls to the background script and content script. Yes those return data, but I'm looking for the data flow from content script to popup without the popup initiating it.
GitHub
examples/popup.tsx at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/popup.tsx at main · PlasmoHQ/examples
@dnwjn has reached level 1. GG!
I have now also tried using a combination of messages and ports, but unfortunately to no avail...
That's a rough flow for realtime msg, easiest is to send whatever data you want to viz into storage and rehydrate it on popup
Thanks for all your input, I've figured it out. I'm now using a combination of the popup, content scripts, messages and storage, and now everything works as it should!
So to summarize:
- Popup: listens to storage changes and changes display based on those values
- Content scripts: execute functionality that relies on the website
- Messages: receive requests from content scripts, execute functions and update storage accordingly