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");
session.defaultSession
    .loadExtension(
        path.join(
            os.homedir(),
            "/Library/Application Support/Google/Chrome/Default/Extensions/locbifcbeldmnphbgkdigjmkbfkhbnca/0.0.48_0"
        )
    )

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.send("on-coil-extension-installed");

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

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

ipcRenderer.on("disable-web-monetization", () => {
    const removeMonetizationTag = document.querySelector(
        'meta[name="monetization"]'
    );
    removeMonetizationTag.remove();
});

//add event listeners
document.monetization &&
    document.monetization.addEventListener(
        "monetizationstart",
        startEventHandler
    );

function startEventHandler(event) {
    //   console.log("event", event);
}

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
    .loadExtension(
        path.join(
            os.homedir(),
            "/Library/Application Support/Google/Chrome/Default/Extensions/locbifcbeldmnphbgkdigjmkbfkhbnca/0.0.48_0"
        )
    )
    .then(({
        id
    }) => {
        let extensionId = id;
        ipcMain.on("on-coil-extension-installed", (event, arg) => {
            mainWindow.webContents.send("extension loaded", extensionId);
        });
    });

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

Link to Code

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 https://github.com/Jasmin2895/web-monetization-electron-app.git

Run the project locally.

npm start

View on GitHub

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 💵

Comments

[enravishjeni411]

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.

[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).

[Shaiju T]

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

[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. 😄