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.
Ok, don't show again
Close
How to sync your data between all tabs within extension & make it react-responsive
It is no mystery, everyone, within web engineering, prefers to use modernized frameworks for their projects, e.g. react/vue/angular. These kinds of advanced web applications & websites are increasingly shifting business logic & computational parts towards the client's side; new data flow schemes and development patterns, which are being applied in the development. Web extensions also keep up to date and the requirements for extension's interfaces increase day by day.

Unlike for the development of standard websites and web applications where you can find all detailed documentation, there are simply no boilerplate codes and guides on how to bring modern technology to the development of extensions with less effort.

Eli Tabrisov
CTO
And on top of everything, I haven't encountered any proper guide on how to implement all this as swiftly and painlessly as possible. Therefore, I write my own.
All the struggle lies in the fact that the extension has different sandboxes such as popup, background, and content. It is also possible to have unlimited sandboxes in the content part of the extension since each tab is isolated from the others. Taking all this into account, ensuring the responsiveness of the user interface display and data synchronization between all extension parts becomes a real pain in the neck for developers.
Having tried different configurations and played on more than one project, I'm glad to present you the list of best practices:
1
There is no need in an instance of state management store (e.g. vuex or reduxe) in the background sandbox to store data. It will be enough to do it with simple ES6 JavaScript Class and extension local storage. Since it will be a singleton (exists in a single copy), then all browser tabs should be synchronized with the background first, even in case you need to exchange data between tabs.
2
Initialize your store entity on each tab and provide the possibility to update store state without synchronizing which changes with other tabs or background sandboxes (e.g. with vuex store, please pay attention to update & silentUpdate)
When a content document is loaded, you should invoke initialization of a Content (get actual data from background sandbox)
Usually, I prefer to use a few ways while working with data and its synchronization in one project:

  • initContent to initialize content with actual data from background sandbox
  • update for data updates related to the active tab with no sync.
  • silentUpdate is invoked from the background sandbox, once data updated from server they invoke action and update data in the content.
  • In case you need a custom response to user actions, just use messages between sandboxes and invoke silentUpdate inside background sandbox to synchronize data between all tabs.
3
Let's say you need to update the required data between all opened tabs, so what you should do is send this data to all tabs manually! (e.g. set user logged in or user logged out a state for all tabs, in order to change your UI part of the extension)
4
For your convenience wrap all required native webExtension API methods with promises
Happy coding everyone!
Previous articles
Successful cases, development life hacks and guaranteed ways to increase user retention and profit growth.
LETS DISCUSS YOUR OPPORTUNITIES!
PLEASE, FILL IN THE FORM
Our goal is to understand your challenge and provide a solution that satisfies your expectations. This ends up in close and long term relations with our clients.
By submitting you agree with the Privacy Policy statement