I am working on a Chrome Extension which is structured like this :
- the service_worker : fetches a list of compatible websites every day and if it is compatible, I will inject a 'widget' in the website
- the widget : is a React App injected inside the page (a 300x300px
position:absolute
div) that can help the user and that is linked to the user account from my website, for example he can save a product from Amazon and see it later in his account in my website.
My problem is the communication between these two parts. An example : I want to check if the user has currently a session opened in my website, if yes, in the React App (the widget) I will render him some tools and his items, and if not I will render him a link to login in my website.
Tried solutions:
Call my website API directly from the widget : but I dont want to make the verification from the widget because it is a part of the webpage and I am afraid of a cookie/token hijacking (tell me if i'm wrong).
Using CustomEvents to get a response : I found this useful post, the problem is that as said in the 5th point I cant really wait for a response from the
service_worker
and store it.Using CustomEvents with callbacks : I also can't send a callback function as said here.
Using sendMessage from Chrome API : To use this between webpage and the
service_worker
you need to specify in the manifest.json the pattern of every website that needs to use it, but the list can change every day. Also the domain cannot be*
, and we cannot use<all_urls>
So, my communication is only working from the web page to the extension but not in the opposite way.
Can you advise me a way of making this work ? Thanks !