title: Using the electron ipcRenderer from a front-end javascript file
body: <p>I'm in the process of learning to use Electron, and while trying to have my application communicate with the front end I am aware I need to use the <code>ipcRenderer</code> to gain a reference to the DOM elements and then pass that information to <code>ipcMain</code>.</p>
  
  <p>I tried to follow much of the advice suggested <a href="https://stackoverflow.com/questions/36773711/passing-data-to-windows-in-electron">here</a> and <a href="https://stackoverflow.com/questions/38633443/manipulate-dom-in-electron">here</a>, but both of these examples use <code>require('electron').ipcMain</code> and whenever I try to include my script that will be interacting with the front-end into my HTML, nothing occurs since <code>Uncaught ReferenceError: require is not defined</code>. I've been searching for a few hours and haven't had any luck finding a solution - so clearly I'm doing something wrong.</p>
  
  <p>My <code>main.js</code> is very simple, I just create my window and then I create an ipc listener as so:</p>
  
  <pre><code>const { app, BrowserWindow } = require("electron");
  const ipc = require('electron').ipcMain;
  
  function createWindow() {
      const window = new BrowserWindow({
          transparent: true,
          frame: false,
          resizable: false,
          center: true,
          width: 410,
          height: 550,
      });
      window.loadFile("index.html");
  }
  
  app.whenReady().then(createWindow);
  
  ipc.on('invokeAction', (event, data) =&gt; {
      var result = "test result!";
      event.sender.send('actionReply', result);
  })
  </code></pre>
  
  <p>Within the file that I wish to manipulate the DOM with, I attempt to get the element ID and then add an event listener as seen here: </p>
  
  <pre><code>const ipc = require('electron').ipcRenderer;
  const helper = require("./api");
  
  
  var authenticate_button = ipcRenderer.getElementById("authenticate-button");
  
  var authButton = document.getElementById("authenticate-button");
  authButton.addEventListener("click", () =&gt; {
      ipc.once('actionReply', (event, response) =&gt; {
          console.log("Hello world!");
      })
      ipc.send('invokeAction');
  });
  
  function onAuthenticateClick() {
      helper.authenticateLogin(api_public, api_secret, access_public, access_secret);
  }
  </code></pre>
  
  <p>and finally, my HTML only consists of a button that I wish to attach my event listener to:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Project Test&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="main-container"&gt;
          &lt;button id="authenticate-button" type="submit" onclick=""&gt;Authenticate&lt;/button&gt;
          &lt;p id="status-label"&gt;Not Authenticated&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If anyone could help point me in the right direction as to how to get this basic functionality to work, it would be very helpful!</p>