JSFiddle - React, Tailwind, and code Playground

by ItsBuilderMc

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Webview Example</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    webview {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <button id="back-button">Back</button>  <!-- Back Button -->
    <button id="forward-button">Forward</button>  <!-- Forward Button -->
    <button id="reload-button">Reload</button>  <!-- Reload Button -->
  <webview id="webview" src="https://www.google.com" allowpopups></webview>
  
    <script src="src/renderer.js"></script>

  <script>
    const webview = document.getElementById('webview');

    // Add event listener for new-window
    webview.addEventListener('new-window', (e) => {
      const { url } = e;
      require('electron').shell.openExternal(url);
    });

    // Additional webview event listeners
    webview.addEventListener('dom-ready', () => {
      console.log('Webview is ready');
      webview.openDevTools(); // Uncomment to open dev tools for webview
    });

    webview.addEventListener('did-finish-load', () => {
      console.log('Webview content loaded');
    });

    // Add context menu handling for the webview
    webview.addEventListener('context-menu', (e) => {
      e.preventDefault();
      // Add custom context menu handling here if necessary
    });

    // If you want to handle IPC messages
    webview.addEventListener('ipc-message', (e) => {
      console.log('IPC message received:', e.channel);
    });
  </script>
</body>
</html>

JavaScript

// buddy, this this main,js
const { app, BrowserWindow, Menu, shell } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  // Create the main window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webviewTag: true
    },
    autoHideMenuBar: true // Hide the menu bar in the main window
  });

  // Load the index.html file
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Ensure no menu bar is shown in the main window
  Menu.setApplicationMenu(null);

  // Add context menu to main window
  addContextMenu(mainWindow.webContents);

  // Handle the creation of new windows
  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    const newWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
      },
      autoHideMenuBar: true
    });

    newWindow.loadURL(url);
    newWindow.removeMenu(); // Ensure no menu bar is shown in the new window

    // Add context menu to the new window
    addContextMenu(newWindow.webContents);

    return { action: 'allow' };
  });

  // Ensure context menu is added to webview contents
  app.on('web-contents-created', (event, contents) => {
    if (contents.getType() === 'webview') {
      // Handle the new-window event for links opening in new windows
      contents.on('new-window', (event, url) => {
        event.preventDefault();
        const newWindow = new BrowserWindow({
          width: 800,
          height: 600,
          webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
          },
          autoHideMenuBar: true
        });

        newWindow.loadURL(url);
        newWindow.removeMenu(); // Ensure no menu bar is shown in the new window

        // Add context menu to the new window
       ...