Can you make a cross-browser Chrome Extension?

Key Concepts

• Manifest V3: The latest version of the extension manifest, introducing changes like service workers and the declarative net request API.
• Service Worker: An event-driven, JavaScript-based background script used in Manifest V3 for extension logic.
• Declarative Net Request API: An API for filtering and blocking network requests, supported across all major browsers.
• Web Request API: An older API for network request manipulation, still available in Firefox and Safari but limited in Chrome Manifest V3.
• Browser Namespace vs. Chrome Namespace: Different ways browsers expose extension APIs (e.g., browser.runtime vs. chrome.runtime).
• Web Extensions Community Group: A W3C group focused on standardizing web extension APIs.
• Navigator User Agent: A string identifying the browser and operating system, sometimes used (though discouraged) for browser-specific logic.

Cross-Browser Extension Development: A Detailed Overview

This video addresses the feasibility of building cross-browser extensions and the similarities/differences in APIs across Chrome, Firefox, Edge, and Safari. The core argument is that while historical divergence existed, browser vendors are increasingly converging on a common set of APIs, making cross-browser development very achievable.

1. API Compatibility & Standardization

The video highlights significant progress in API compatibility. Compatibility tables on MDN (Mozilla Developer Network) demonstrate that core APIs like runtime.sendMessage are widely supported. This convergence is attributed to two factors: independent browser implementations of similar APIs and collaborative efforts within the Web Extensions Community Group.

Example: The runtime.getPlatformVersion method was recently added to Chrome Canary following an issue raised just a week prior, with commits already underway for WebKit (Safari) and a community patch submitted for Firefox. This illustrates the rapid response to feedback and collaborative development.

2. Handling Browser-Specific Code

When browser-specific code is necessary, two primary approaches are presented:

• Navigator User Agent: Using navigator.userAgent to identify the browser. While generally discouraged due to past misuse (targeting specific versions or limiting functionality), it can be useful for branding or onboarding adjustments.
• Build-Time Swapping: Maintaining a shared codebase but swapping assets (like images) based on a browser-specified environment variable.

3. Namespace Differences: Chrome vs. Browser

A key historical inconsistency lies in the namespace used to access APIs. Chrome uses the chrome namespace (e.g., chrome.runtime.installed), while Firefox and Safari traditionally used browser (e.g., browser.runtime.installed).

Current Status: Firefox and Safari now support the chrome namespace, allowing developers to write extensions using only chrome and achieve broader compatibility. Polyfills also exist to add browser support to Chrome. Chrome 143 introduces support for the browser namespace, a change that proved more complex than anticipated due to existing extensions detecting browser type by namespace availability.

Quote: "Right now, the solution to this is the fact that Firefox and Safari both support the Chrome global. So, you can build an extension that just uses the Chrome global and that will work everywhere."

4. Manifest V3 Implications

Manifest V3, a significant update to the extension manifest, introduces changes that impact cross-browser compatibility. The key areas are:

• Background Script Execution: Manifest V3 utilizes service workers for background logic in Chrome. Safari supports both service workers and the older background pages (Manifest V2 approach). Firefox currently only supports background pages but plans to add service worker support. The video notes that extensions written for service workers generally work well elsewhere due to their more restricted nature.
• Network Filtering: The webRequest API, used for analyzing and filtering network requests, remains available in Firefox and Safari. However, in Chrome Manifest V3, its functionality is limited to observing requests. Blocking or redirecting requires the declarativeNetRequest API.

Declarative Net Request API: This API is supported across all major browsers, providing a consistent solution for content filtering extensions. Developers can choose between webRequest and declarativeNetRequest based on the target browser.

5. Other Considerations & Data

• Browser Stores: Each browser maintains its own extension store (e.g., Chrome Web Store).
• Browser-Specific APIs: Browsers may offer unique APIs tailored to their specific features.
• Real-World Application: The speaker recounts a previous experience where a single codebase was used to ship an extension across all major browsers.
• Research Findings: The rapid implementation of the runtime.getPlatformVersion method (within a week of issue creation) demonstrates the speed of collaborative development.

6. Logical Connections

The video progresses logically from establishing the overall feasibility of cross-browser extensions to detailing specific areas of compatibility and divergence. It then presents solutions for handling browser-specific scenarios and explains the impact of Manifest V3. The discussion of namespaces and APIs is interwoven with the explanation of Manifest V3 changes, highlighting how these elements interact.

Conclusion

The video concludes with a positive outlook on cross-browser extension development. While some differences exist, they are manageable and the benefits of reaching a wider audience with a single codebase outweigh the challenges. The collaborative efforts of browser vendors and the Web Extensions Community Group are driving increased standardization and simplifying the development process. Building cross-browser extensions is not only possible but a “very viable and commonly used approach.”