Content Scripts UI: Next-gen UI Injection for Web Extensions
Building user interfaces in a web extension is deceptively tricky, but it doesn't have to be with the Plasmo Framework.
Complex web extensions will require some form of user interface (UI). When you add on top a front-end library such as React or Svelte, it becomes a mess. Bundle configuring, manual DOM manipulation, and debugging seemingly trivial problems are some common issues. It is frustrating because you must keep reinventing the wheel. Not anymore with Plasmo! Web extensions have two types of UIs: - Page UI, which are "webpage" specific for an extension - Injected UI, which are UIs mounted into a website Extension Page UI To use React (or any UI library) in an extension page UI such as the popup or the options page, developers generally have to do the following: 1. Setup an HTML file that renders the extension page 2. Create a root element in the HTML file to host the virtual DOM 3. Create
Jul 27 2022
5 mins read