This website uses cookies.
By using and further navigating this website you accept this. Detailed information about the use of cookies on this website is available by clicking on more information.
By using and further navigating this website you accept this. Detailed information about the use of cookies on this website is available by clicking on more information.
Ok, don't show again
How to Sync Your Data Between Content & Background Sandboxes
Since the extension popup and options page content is isolated from each other, they have direct access to the background page. So if you need to extract or set new data from extension's popup/options page - it's no big deal, simply use the chrome.extension.getBackgroundPage() method.
Usually, I create an application class in the background, which contains all needed public methods and variables. That's how you can get the actual data.
Usually, I create an application class in the background, which contains all needed public methods and variables. That's how you can get the actual data.
Eli Tabrisov
CTO
However, content scripts run in the context of a web page, not the extension one, which means that they usually need some other way of communicating with the rest of the extension.
Use chrome.runtime.sendMessage and chrome.tabs.sendMessage to send data between two sandboxes. In order to make it more handy, normally, I write a wrap it in promise and declare as a new function.
If you need to send message from content to background sandbox:
Use chrome.runtime.sendMessage and chrome.tabs.sendMessage to send data between two sandboxes. In order to make it more handy, normally, I write a wrap it in promise and declare as a new function.
If you need to send message from content to background sandbox:
If you need to send message from background to content sandbox:
On the receiving end, you need to set up the chrome.runtime.onMessage event listener to handle the message. It looks the same from a content script or an extension page.
Everything might look smooth, but let me share one more key thing with you: When your app is growing, the functionality is growing within it, right? And there will be a lot of messages and custom event handlers for them.
There is one trick that I apply for my projects when I want to avoid a mess in the code and keep it clean and readable.
There is one trick that I apply for my projects when I want to avoid a mess in the code and keep it clean and readable.
Place it all in one class
1
During the Initialization subscribe to all messages and write a controller, which will be responsible for forwarding message data to the right event handler
2
Use exactly the same naming for messages, and event handlers (methods)
Happy coding everyone!
Previous articles
Successful cases, development life hacks and guaranteed ways to increase user retention and profit growth.
PLEASE, FILL IN THE FORM |