CODEWITHSUNDEEP
javascriptnode.jselectron
FearGannicus
FearGannicus

Reputation: 205

Electron preload.js doesn't function the way it is suppose to

I am new to developing applications with Electron and Node JS, and seem to be running into issues with the <webview src="https://app.example.com" nodeintegration preload="./app/js/preload.js"></webview> tag, and my preload.js file.

I originally developed the HTML and javascript files when it was local to the application, but now that I have moved files to the web server I am having a lot of issues with the old renderer.js functions.

I've been playing around a lot with the programming, and have managed to get some things working but not all of the functions. Like exiting the application works, but minimizing doesn't, there might just be something I am missing.

my index.html file (local to the application)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>n/a</title>

    <link rel="stylesheet" href="app/css/style.css">

  </head>
  <body>

    <!-- Load the VPN website -->
    <webview id="odyssey-vpn" src="https://app.example.com/" nodeIntegration preload="./app/js/preload.js"></webview>

    <!-- Fix issues with imports -->
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

    <!-- Vendors -->
    <script src="assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Fix issues with imports -->
    <script>if (window.module) module = window.module;</script>

  </body>
</html>

my preload.js file (local to the application)

// Listen for contentLoaded
window.onload = function() {

  // Require Preload Requirements
  const { remote, ipcRenderer, shell } = require('electron')

  //doesn't work
  document.getElementById('minimize-button').addEventListener('click', () => {
    remote.getCurrentWindow().minimize()
  })

  //doesn't work
  document.getElementById('minmax-button').addEventListener('click', () => {
    const currentWindow = remote.getCurrentWindow()

    if (currentWindow.isMaximized()) {
      currentWindow.unmaximize()
    } else {
      currentWindow.maximize()
    }
  })

  // works
  document.getElementById('exit-button').addEventListener('click', () => {
    remote.app.quit()
  })

};

my index.php file (remote on the webserver)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>n/a</title>

    <!-- Fonts Styling -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/vendors/bower_components/animate.css/animate.min.css">
    <link rel="stylesheet" href="assets/vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
    <link rel="stylesheet" href="assets/vendors/bower_components/select2/dist/css/select2.min.css">
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="stylesheet" href="assets/css/window.css">
    <link rel="stylesheet" href="assets/css/mng.css">

    <!-- Firebase -->
    <script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
  </head>
  <body data-ma-theme="indigo">

    <div id="title-bar-login" class="mng-row">
      <div class="col-md-6 btns-off"></div>
      <div class="col-md-6 btns-on">
        <div id="title-bar-btns">
          <button id="minimize-button" class="window-button btn">
            <i class="fas fa-fw fa-window-minimize" style="font-size: 0.9rem;"></i>
          </button>
          <button id="minmax-button" class="window-button btn">
            <i class="far fa-fw fa-window-maximize" style="font-size: 0.9rem;"></i>
          </button>
          <button id="exit-button" class="window-button btn">
            <i class="fas fa-fw fa-times" style="font-size: 0.9rem;"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="scrollbar">

      <main class="main">

        <div class="mng-row">
          <div class="col-md-6 mng-col">
            <div class="mng-inner" id="mng-replacement"></div>
          </div>
          <div class="col-md-6 mng-col bg-indigo">

            <div class="mng-inner" id="newUpdate">

              <a href="index.html">
                <div class="icon">
                  <i class="fa fa-fw fa-wifi"></i>
                </div>
                <h1 class="logo display-4">
                  <strong></strong>
                </h1>
              </a>

          </div>
        </div>
      </main>

    </div>

    <div class="modal fade" id="modal-updates" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title pull-left">Changelog</h5>
                </div>
                <div class="modal-body">
                    See changes in our most recent versions of the application.
                    <hr>
                    <ul id="updateLog" class="list list--check">
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" id="restart-button" class="btn btn-link">Restart</button>
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Vendors -->
    <script src="assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="assets/vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
    <script src="assets/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
    <script src="assets/vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="assets/vendors/bower_components/select2/dist/js/select2.full.js"></script>
    <script src="assets/vendors/bower_components/remarkable-bootstrap-notify/dist/bootstrap-notify.min.js"></script>

    <!-- App functions and actions -->
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/app.min.js"></script>

  </body>
</html>

Thanks to anyone who helps, I really appreciate it!

Upvotes: 4

Views: 3845

Answers (1)

FearGannicus
FearGannicus

Reputation: 205

Seems that there is an open issue regarding this on the Electron Github, my code is all correct. https://github.com/electron/electron/issues/16558

Upvotes: 3

Related Questions