Good afternoon to all of you reading and following this topic,
We’ve accomplished milestone #3 , implementing the extension for Chrome, alongside the secure storage implementation, content script integration, error handling, and the other relevant milestones for this feat.
I am required to make you aware that we needed to change the design for security reasons. At the end of the post is a further explanation written alongside a little bit of knowledge on extension security.
The new design, alongside a demo video of the application, ready for integration, can be seen here (click to view)
The current application can import, store, export, and clear KV values into the extension storage.
Our core test has been successful in terms of practical implementation:
- Export Haven’s browser local storage,
- Import into extension storage,
- Export out of extension storage,
- Reimport the same file into a new (cleared) browser
- Access the same user account to access Haven.
This implementation utilises the isolated extension storage as mentioned before, has been documented in the code, alongside a how-to-use readme.md on GitHub. Within our repo you can also have a look at the message passing system & our content integration here
Security made us change UI
As you saw in our demo before, we initially created a different UI alongside the rounded corners, and following the soft linear gradient in light blue. When we finished (click to see), we reviewed our codebase and realised a few issues to achieve this design;
- Rounded corners within extension design require DOM manipulation, affecting potential security vectors by requiring DOM permissions. However, there are methods to bypass this with the shadow-dom element (click to read more).
– Code Example
– Deeper explanation (Video) - To maintain a secure and efficient maintainability, complexity is rather to be avoided. Utilising Shadow Dom, alongside having a huge (1500+ lines) service-worker.ts, added additional avoidable complexities, both for maintaining and securing the extension.
Solution
A completely redesigned UI, utilising square corners, but with a gentle mystical background to keep the design exciting.
Rebuild using Svelte, and utilising best maintainability standards to improve further future off-handing and on-handing while avoiding touching upon the DOM.
Up next
A few final tasks remain for us to launch the extension, and these are outlined in the upcoming milestones 4 and 5.
Major updates will be the integration with Haven, and after that, the upload to the Chrome extension browser.
Feel free to provide feedback, criticism, or requests for changes that involve the new design.
-Mf & Mo