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

git clone https://github.com/Jasmin2895/web-monetization-electron-app.git

npm start

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 💵