Can you use frameworks to build a Chrome Extension?

Building Chrome Extensions with Modern Web Frameworks

Key Concepts:

• Manifest V3: The latest version of the Chrome extension manifest, impacting how extensions are built and deployed.
• Content Security Policy (CSP): A security mechanism that restricts the sources from which the extension can load resources.
• Bundlers (ESBuild, Rollup, Webpack): Tools used to package extension code and dependencies into a single, deployable bundle.
• UI Contexts (Popup, Options Page, Content Scripts): Different areas within a Chrome extension where user interfaces can be displayed, each with unique performance and security considerations.
• Framework Suitability: The appropriateness of different frameworks (React, Angular, Spelt, Vanilla JavaScript) based on the specific UI context and extension requirements.

Frameworks and Chrome Extensions: A General Overview

The video confirms that building Chrome extensions with modern web frameworks like React, Angular, or Spelt is entirely possible, even with Manifest V3. However, the choice of framework depends heavily on where the UI is being displayed within the extension. The presenter demonstrates a basic React extension, showcasing a simple "Hello World" application running within an extension, proving the feasibility of using JSX and requiring a compilation step with ESBuild.

UI Contexts and Framework Selection

The video highlights three primary UI contexts within a Chrome extension and provides guidance on framework selection for each:

• Popups & Options Pages: These are fully isolated HTML and JavaScript environments. More complex applications are suitable here, and frameworks like React are a reasonable choice, though performance should still be considered. React may have a longer bootstrap time compared to other options.
• Content Scripts (e.g., Google Dictionary Extension): These inject code directly into web pages. Speed is critical, as these scripts need to respond quickly and potentially handle multiple instances simultaneously. Heavier frameworks are not ideal; Spelt or even vanilla JavaScript are better suited. The Google Dictionary extension uses the Mustache templating engine – a lightweight alternative to a full framework – for structuring code.
• Options Pages: Similar to popups, these are isolated pages allowing for flexibility in framework choice.

Security Considerations: Content Security Policy (CSP)

A crucial point raised is the impact of Chrome’s Content Security Policy (CSP). Extensions cannot directly load scripts from external CDNs (Content Delivery Networks) as websites typically do. This is a security measure. Therefore, any framework or library dependencies must be bundled into the extension itself using a bundler like ESBuild, Rollup, or Webpack. The presenter references a video by Patrick Kentner (from the Chrome team) that provides further detail on CSP and security risks.

Frameworks to Avoid & Why

The video advises against using frameworks heavily focused on server-side rendering or complex HTTP routing, as Chrome extensions are entirely client-side applications. These features are unnecessary and add unnecessary complexity.

Example: Google Dictionary Extension

The Google Dictionary extension is used as a case study. The presenter, having contributed to its migration to Manifest V3, explains that its popup utilizes standard HTML and JavaScript, while its content script (the pop-up that appears when highlighting a word) employs the Mustache templating engine for efficient rendering. The presenter also notes the importance of considering security when injecting content into pages, suggesting iframes or avoiding injection altogether.

Bundling and Tooling

The necessity of bundling is emphasized. Tools like ESBuild, Rollup, and Webpack are recommended for packaging the extension’s code and dependencies into a single bundle that adheres to the CSP. The example demonstrates loading a TypeScript script directly from the TypeScript website in the Web Extension Playground, but clarifies that this would not work in a packaged extension without bundling.

Notable Quote:

“If you look at a lot of websites that include frameworks by adding a script tag that loads the framework from a CDN… that makes things easy for us as developers, but it doesn't work in extensions because we have a strict content security policy that prevents loading scripts from external resources.” – Presenter

Logical Connections

The video progresses logically from establishing the possibility of using frameworks to detailing the specific considerations for different UI contexts. It then addresses the security implications of using external resources and concludes with a recap of the key takeaways. The Google Dictionary extension serves as a practical example throughout the discussion.

Synthesis/Conclusion

Chrome extensions can be built with modern web frameworks, but careful consideration must be given to the UI context and security constraints. Lightweight frameworks or vanilla JavaScript are preferable for content scripts where performance is critical, while more robust frameworks like React are suitable for isolated popups and options pages. Bundling is essential to comply with the Content Security Policy, and developers should avoid frameworks designed for server-side rendering. Ultimately, the best framework is the one that best balances functionality, performance, and security for the specific needs of the extension.