Decide what framework to use to build our Chrome extension

[ykdojo]

Plasmo? Parcel.js? Vite?

[Jonath-z]

Here is a quick summary of our tools: @ykdojo

Tools

Parcel.js

• Zero Config: Parcel offers a seamless development experience, requiring no configuration. It supports various languages and file types out of the box, from HTML, CSS, and JavaScript to images, fonts, and more.

• Dev Server: Parcel includes a built-in development server for easy project setup. It supports HTTPS, and a built-in API proxy helps simulate the production environment.

• Hot Reloading: Automatic code updates in the browser without page reloads. Integration with React Fast Refresh and Vue Hot Reloading API preserves application state between updates.

• Diagnostics: Parcel provides clear error diagnostics in the terminal and browser, including syntax-highlighted code frames and documentation links for issue resolution.

• Native Performance: Written in Rust, Parcel's JavaScript compiler, CSS transformer, and source maps offer superior performance, outpacing other JavaScript-based tools by 10-20x.

• Multi-core: Designed with a multi-core architecture, Parcel parallelizes work across all cores, enhancing performance in transforming source files, packaging, and optimizing output bundles.

• Reliable Caching: Everything, from transformation to bundling, is cached, ensuring instant dev server restarts and avoiding redundant builds.

• Lazy Dev Builds: Parcel can defer building files until requested in the browser during development, reducing dev server startup time.

• Production Optimization: Parcel optimizes the entire app for production, including tree-shaking, minification, image resizing, content hashing, automatic code splitting, and more.

• Tree Shaking: Supports tree-shaking for both ES modules and CommonJS, removing unused code and classes automatically.

• Minification: Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box, ensuring optimized builds.

• Image Optimization: Supports resizing, converting, and optimizing images with easy query parameters in HTML, CSS, and JavaScript.

• Compression: Provides Gzip and Brotli compression options for app deployment.

• Code Splitting: Automatically deduplicates common modules, allowing parallel loading and caching of dependencies.

• Dashboard and Profile: Parcel automatically includes content hashes in output file names, enabling efficient long-term browser caching.

• Transpilation: Automatically transpiles JavaScript and CSS based on specified target browsers, supporting JSX, TypeScript, and modern CSS syntax.

• Differential Bundling: Generates nomodule fallbacks for old browsers when using <script type="module">, resulting in smaller bundles.

• Workers: Supports web workers, service workers, and worklets out of the box, following standard browser APIs.

• Libraries: Can build libraries for multiple targets simultaneously, allowing compilation to different module types and TypeScript definitions.

• Extensible Configuration: While requiring zero configuration initially, Parcel allows easy extension through a JSON-based config file for more complex build requirements.

• Powerful Plugins: Parcel's core is language-agnostic, allowing customization through various plugins for transforming, resolving dependencies, bundling, optimizing, and more.

• Named Pipelines: Supports the creation of named pipelines for transforming files in multiple ways during a single build.

• Performance Design: Parcel's plugin system is optimized for performance, automatically parallelizing plugins and integrating with caching.

• API Integration: Offers an API for programmatically performing builds, enabling integration into existing build systems.

Plasmo

Plasmo Overview:

• Plasmo helps build, test, and deploy powerful browser extensions.
• First-class support for React, Svelte, and Vue frameworks.
• Automatically mounts existing components onto the extension for ease.

Development Features:

• Style Leakage Prevention: Plasmo creates a shadow DOM to prevent style leakage.
• Live-reloading: Automatically reloads the extension upon code changes.
• React HMR: Enables Hot Module Replacement for real-time component

Browser Extension Utility:

• Acts as an additional layer on Chrome and Firefox extension APIs.
• Includes utility functions enhancing the extension development experience.

Case Study - ArConnect:

• ArConnect leverages Plasmo for innovative browser extension development.
• Marton Lederer, Lead Engineer, highlights Plasmo's seamless integration.

Case Study - Liveblocks:

• Marc Bouchenoire, Design Engineer, praises Plasmo's abstraction level.
• Opted for Plasmo over vanilla extension development for flexibility.

Plasmo Itero:

• Upload extension to Itero for instant deployment to testers.
• GitHub Integration: Deploy extension to beta testers with each git push.

Production Deployment:

• Itero simplifies web store deployment credential management.
• One-click publishing to any major browser from the Itero interface.

Vite

• Instant Server Start: No more waiting around – kickstart your development with on-demand file serving using native ESM. And guess what? No bundling required! It's like your code is ready to party right when you are.

• Fast HMR: You know that feeling when you're waiting for your code to hot-reload, and it's slower than a turtle in molasses? Well, fear not! This frontend tooling comes with a Hot Module Replacement (HMR) that's speedy, no matter how big your app gets. Zoom, zoom, baby!

• Rich Features: It's the full package deal. TypeScript, JSX, CSS – you name it, it's got it. Right out of the box. No need to wrestle with configurations. It's like having a superhero toolbelt for frontend development.

• Optimized Build: Rollup, with its pre-configured magic, is here to make your life easier. Whether you're dealing with multi-page projects or creating the next big library, this tool's got your back. Building stuff has never been so smooth.

• Universal Plugins: Plug and play, my friend. This tool's got a superset plugin interface that works seamlessly for both development and building. It's like having universal remote control but for your frontend workflow.

• Fully Typed APIs: Flexibility meets TypeScript. The APIs are not just APIs; they are fully typed. So, you can code confidently, knowing that your buddy TypeScript has your back. No more second-guessing, just smooth sailing.

[Jonath-z]

My take on this is that Parcel.js and Vite are all great tools with a general purpose, while Plasmo is specifically designed for browser extensions. For me, I think the best tool for this project would be Plasmo

cc: @ykdojo

[ykdojo]

Thank you for sharing this, @Jonath-z

[teerth17]

I recommend choosing Plasmo as our framework. With a focus on extension development, Plasmo offers potential performance advantages. This decision aligns well with our project goals and ensures a smoother development process.

[ykdojo]

Thank you both.

@Jonath-z let me know if you might want to turn what you wrote into a Medium post, as well. We have a publication for this kind of thing.

[Jonath-z]

@ykdojo definitely yeah. I would love that

[ykdojo]

Great! Here's the publication: https://medium.com/cs-dojo

It hasn't been active recently but we can start it up again.

[ykdojo]

^Looks like we all agree on Plasmo, so let's go with it.