CODEWITHSUNDEEP
javascriptelectron
kokorokun
kokorokun

Reputation: 119

How to obtain innerHTML with electron?

I'm very new to electron. I'm creating a simple web browser with electron for my school work. enter image description here

I'd like to obtain the innerHTML information of the displaying website. But I don't know how to start it at all...

// Electronの読み込み
var electron = require('electron');
var app = electron.app;
var ipcMain = electron.ipcMain;

var BrowserWindow = electron.BrowserWindow;
const localShortcut = require('electron-localshortcut');
const dialog = electron.dialog;

// mainWindow変数の初期化
var mainWindow = null;

// MacOS(darwin)でない場合にはアプリを終了する
app.on('window-all-closed', function() {
  if(process.platform != 'darwin')
  app.quit();
});

// 画面を表示．index.htmlを読み込む
// Close処理を行う
app.on('ready', function() {
  // 画面表示
  mainWindow = new BrowserWindow({
    width: 1400, 
    height: 800,
    'webPreferences': {
      'nodeIntegration': true,
      'webviewTag': true
    }
  });
  mainWindow.loadURL('file://' + __dirname + '/index.html')
  //mainWindow.webContents.openDevTools();

  mainWindow.webContents.executeJavaScript(`
    document.addEventListener("copy", e => {
      var copied = window.getSelection().toString();
      console.log(copied);
    });
  `);

  mainWindow.on('ready-to-show', function () {
    mainWindow.show();
    mainWindow.focus();
    mainWindow.webContents.executeJavaScript(`
      require('electron').ipcRenderer.send('gpu', document.body.innerHTML);
    `);
  });

  mainWindow.on('closed', function() {
    mainWindow = null;
  });

  localShortcut.register(mainWindow, 'Command+O', () => {
    dialog.showMessageBox("dev", "opened dev tools");
    mainWindow.webContents.openDevTools()
  })

  localShortcut.register(mainWindow, 'Command+Q', () => {
    app.quit()
  })
});

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Chocolate</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
  </head>
  <body>
    <div class="etabs-tabgroup">
      <div class="etabs-tabs"></div>
      <div class="etabs-buttons"></div>
    </div>
    <div class="etabs-views"></div>
    
    <script>
      const TabGroup = require("electron-tabs");
    
      let tabGroup = new TabGroup({
        newTab: {
          title: 'New Tab'
        }
      });
    
      tabGroup.addTab({
        title: 'Google',
        src: 'http://google.com',
      });
    
      // tabGroup.addTab({
      //   title: "Electron",
      //   src: "http://electron.atom.io",
      //   visible: true,
      //   active: true
      // });
    
    </script>
  </body>
</html>

Could you give me some ideas or hints?

Upvotes: 2

Views: 1441

Answers (2)

Omar Samudio
Omar Samudio

Reputation: 27

that work fine for me...

win.webContents
  .executeJavaScript(`document.documentElement.innerText`, true)
  .then(async function (result) {
    console.log("RESULT: ", result);
   }

Upvotes: 0

JeffProd
JeffProd

Reputation: 3148

  mainWindow.webContents.executeJavaScript(`function gethtml () {
    return new Promise((resolve, reject) => { resolve(document.documentElement.innerHTML); });
    }
    gethtml();`).then((html) => {
    console.log(html)
  })

You may read https://en.jeffprod.com/blog/2019/web-scraping-with-electron/

Upvotes: 1

Related Questions