How to load a Chrome extension in Electron with electron-chrome-extension?

Use ECx.load() with the extension's WebStore ID after setting up preload scripts in the renderer and main process, and handle user agent issues as per the README instructions for a functional integration.

Does electron-chrome-extension work with Electron 10 or above?

The README specifies testing up to Electron v4.0.4, so compatibility with newer versions isn't guaranteed and may require additional testing or updates, given the project's age.

Electron chrome extension vs building custom extension support – which should I choose?

Electron-chrome-extension saves time by leveraging existing Chrome extensions but adds complexity and potential compatibility issues; custom implementation offers more control but requires significant development effort.

How to fix navigator user agent issues in electron-chrome-extension?

After importing the preload script, use Object.defineProperty to redefine the user agent, as mentioned in the setup section, to ensure extensions receive the correct browser context.

Can I use Grammarly in my Electron app with this library?

Yes, Grammarly is listed as a supported extension with ID kbfnbcaeplbcioakkpcpgfkobkghlhen, and you can load it using ECx.load(), making it straightforward for text editing apps.

What are the security risks of using electron-chrome-extension?

If not configured properly, extension code might run in privileged contexts with nodeIntegration, posing security risks; the README advises careful session management to mitigate this.

Open-Awesome

electron-chrome-extension

TypeScript

Implementation of Chrome extension APIs for Electron, enabling Chrome extensions to run in Electron apps.

GitHub

152 stars30 forks0 contributors

What is electron-chrome-extension?

Electron Chrome Extension is a library that implements Chrome extension APIs for Electron applications. It enables developers to load and run Chrome extensions directly within Electron-based desktop apps, allowing extensions like Grammarly, React DevTools, or productivity tools to function in a native desktop environment. This solves the problem of re-implementing browser extension functionality for desktop applications.

Target Audience

Electron developers who want to integrate Chrome extensions into their desktop applications, particularly those building productivity tools, developer tools, or apps requiring browser extension compatibility.

Value Proposition

Developers choose Electron Chrome Extension because it provides a seamless way to leverage the vast Chrome extension ecosystem without rewriting extension logic, saving development time and ensuring compatibility with popular extensions like Grammarly or React DevTools.

Overview

Implementation of Chrome extension APIs for Electron

Use Cases

Best For

Adding Grammarly or similar writing assistants to Electron-based text editors
Integrating React DevTools or Redux DevTools into Electron developer tools
Building productivity apps that rely on Chrome extension functionality
Creating Electron apps that need to support existing Chrome extensions
Developing cross-platform desktop tools with browser extension compatibility
Testing Chrome extensions in a desktop application environment

Not Ideal For

Applications that rely on Electron's native DevTools extensions support
Projects needing a simple, out-of-the-box solution without complex configuration
Teams using the latest versions of Electron and Node without time for compatibility testing
Scenarios where extension compatibility with new or untested extensions is critical

Pros & Cons

Pros

Chrome Extension Ecosystem Access

Enables loading of Chrome extensions via WebStore IDs, allowing integration with tools like Grammarly and developer tools without reimplementation, as shown in the setup example.

Core API Implementation

Implements essential Chrome extension APIs such as tabs and runtime, ensuring extensions can function properly within Electron, based on the event system described.

DevTools Extension Integration

Specifically supports loading DevTools extensions like React DevTools, useful for debugging in Electron-based apps, with examples provided in the README.

Flexible Event System

Allows custom application events to trigger extension logic via IPC, offering adaptability for various use cases, as demonstrated with IPC event handling.

Cons

Breaks Native DevTools Support

The README explicitly warns that it disables Electron's built-in support for DevTools extensions, requiring workarounds like session preloads for development.

Setup Complexity

Involves manual handling of preload scripts, user agent redefinition, and session management, which can be error-prone and non-trivial for beginners.

Outdated Compatibility

Tested with older versions (Electron v4.0.4) and has a known extensions list from 2019, indicating potential maintenance gaps and compatibility issues with newer tech.

Frequently Asked Questions

Related Projects

rxdb

A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/

🌐 Human-friendly and powerful HTTP request library for Node.js

Stars14,909

Forks987

Last commit24 days ago

electron-builder

A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

Stars14,571

Forks1,852