DEV Community

Cover image for Monetize your Electron App 💰
Jasmin Virdi
Jasmin Virdi

Posted on • Updated on

Monetize your Electron App 💰

Few weeks back I started learning about building desktop applications using Electron. I was recently working on a mini project and was looking for some inspirations from the existing apps built using Electron. While searching for examples I came across few posts and discussions about monetizing Electron App. I thought it would be an another amazing opportunity to experiment with both Elecron and Web Monetization.

I worked on a small project which enables web monetization in electron
app. This is a very basic example of setting up web monetization in your electron app.

How I built it

I started with a basic electron app setup using the official documentation. This helped me to set up a simple starter electron app.

Now the next step was to load the Coil chrome extension in the main process after initializing the BrowserWindow.

To load the chrome extension you need to do the following:

  • Install the Coil exetsnion in your chrome browser this will help you to locate in your filepath system which you can refer later. ( A important step for setting up web monetization in your app)

  • Find the filepath location used by chrome for storing extensions.

  • Load the extension in your Main process.

Refer the link for more information about loading the extension in your app.

const { session } = require("electron");
            "/Library/Application Support/Google/Chrome/Default/Extensions/locbifcbeldmnphbgkdigjmkbfkhbnca/0.0.48_0"
Enter fullscreen mode Exit fullscreen mode

This will successfully register the coil extension in your BrowserWindow.

I have created one renderer process to demonstrate the use of web monetization. You can have multiple renderer process when you have multiple window objects.(Refer the link for learning more about the Processes.)

Once the extension is installed in the main process I inform the renderer process to add the monetization meta tag to the web page.

I have added meta tag in a renderer process as it defines a separate web page which has it's own process. If you wish to add it in all your renderer processes you can define it in the main process as well.

Here is the code of the renderer process.

// renderer.js
const { ipcRenderer } = require("electron");

ipcRenderer.on("extension loaded", (event, arg) => {

    if (arg) {
        if (!document.monetization) {
            const monetizationTag = document.createElement("meta");
   = "monetization";
            monetizationTag.content = "payment_pointer";

ipcRenderer.on("disable-web-monetization", () => {
    const removeMonetizationTag = document.querySelector(

//add event listeners
document.monetization &&

function startEventHandler(event) {
    //   console.log("event", event);
Enter fullscreen mode Exit fullscreen mode

Note: I have just taken basic example of the listeners you can modify them according to your own requiremnet

I have added the respective event listeners in my main process which are linked to the renderer process to communicate between the two processes.

// main.js

await session.defaultSession
            "/Library/Application Support/Google/Chrome/Default/Extensions/locbifcbeldmnphbgkdigjmkbfkhbnca/0.0.48_0"
    }) => {
        let extensionId = id;
        ipcMain.on("on-coil-extension-installed", (event, arg) => {
            mainWindow.webContents.send("extension loaded", extensionId);
Enter fullscreen mode Exit fullscreen mode

This will help you in setting up basic necessary web monetization in your electron app.

Link to Code

GitHub logo Jasmin2895 / web-monetization-electron-app

Trying something new with electron

web-monetization-electron-app 💵

Web monetization and electron app

This project demonstrate basic setup to enable web monetization in Electron App. For Installing the project you can use the following command.

git clone
Enter fullscreen mode Exit fullscreen mode

Run the project locally.

npm start
Enter fullscreen mode Exit fullscreen mode

Additional Resources

Electron Documentation

Web Monetization

I have started with a very minimilistic project setup 😊
I am currently working to cover more aspects of web monetization that can be used in electron apps. This will make it easy for all the developers who want to monetize their Electron Apps with a quick setup and build amazing apps like Wordpress, slack etc 💵

Top comments (4)

enravishjeni411 profile image
enravishjeni411 • Edited

Hello, Jasmin. Thanks for the detailed post.

Minor correction:

Loadextension part of code has to be called once the app is ready.
From the electron doc:
Note: This API cannot be called before the ready event of the app module is emitted.

customautosys profile image
Custom Automated Systems Pte Ltd

Hi @jasmin,

I just tried your method. However, the monetisation state is always stopped despite me having the meta tag when I inspect. I'm also getting this error the first thing in the debug console:

Error handling response: TypeError: Cannot read properties of undefined (reading 'wm2Allowed')

Any idea what's wrong? I copied the coil extension folder from chrome into my app, and it's loading it from there (according to electron, the extension was successfully loaded).

shaijut profile image
Shaiju T • Edited

😄 Good, build apps like Wordpress or Slack using Electron ? How ? Wordpress is web based right ? And we use Electron to create desktop apps ?

jasmin profile image
Jasmin Virdi

Hey Shaijut,

Yes, we do have a desktop app for wordpress. I’ve gone through an amazing post the other day. They have limited few features due to the hurdles faced but are constantly working to bring them up in next release. 😄