javascript - 電子でプリロードとwindow.api呼び出しを適切に使用するには?

Question

render.js ファイルを使用して、レンダリングされた html ページの javascript から「api」呼び出しを書き込むのに問題があります。

main.js の新しい BrowserWindow 関数には以下が含まれます。

    webPreferences: {
        nodeIntegration: false, // is default value after Electron v5
        contextIsolation: true, // protect against prototype pollution
        enableRemoteModule: false, // turn off remote
        preload: "preload.js" // use a preload script  
    },

preload.js:

const { ipcRenderer, contextBridge } = require('electron')

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            let validChannels = ["login"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

passwordPage.html にリンクされている passwordPage.js:

document.getElementById("login").addEventListener('click', function() {
    window.api.send("login", "test");
})

passwordPage のコンソールのエラー:

Uncaught TypeError: Cannot read property 'send' of undefined