Ok, don't show again
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.
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:
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.
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)
For your convenience wrap all required native webExtension API methods with promises
Happy coding everyone!
Successful cases, development life hacks and guaranteed ways to increase user retention and profit growth.