samuelmaddock/electron-browser-shell

Basic usage one tab with working extension

Nakarima opened this issue · 0 comments

Hi,
I'm trying to figure out how can you use electron-chrome-extension to load an extension and display one page only. I played a little with browser shell but when it comes to usage in one browser window for use with custom application I cannot make it work.

When I want display a chrome-extension page it gives me:
obraz

Also when using browser-action-list with preloader it can't load icon of extension (console throws Failed to load resource: net::ERR_FAILED). I am however able to do secondary click and see options.

Here is some sample code i made

const { app, BrowserWindow, session, BrowserView } = require('electron')
const { ElectronChromeExtensions } = require('electron-chrome-extensions')
const path = require('path')

async function main() {
  await app.whenReady()

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

  const ext = await session.defaultSession.loadExtension(path.resolve('extension'))
  console.log(ext);
  const url = ext.url + '/home.html'

  const userAgent = session.defaultSession
      .getUserAgent()
      .replace(/\sElectron\/\S+/, '')
      .replace(new RegExp(`\\s${app.getName()}/\\S+`), '')

  session.defaultSession.setUserAgent(userAgent)

  const extensions = new ElectronChromeExtensions({
    createTab(details) {
      const tab = myTabApi.createTab()
      if (details.url) {
        tab.webContents.loadURL(details.url)
      }
      return [tab.webContents, tab.browserWindow]
    },
    createWindow(details) {
      const window = new BrowserWindow({
        webPreferences: {
          sandbox: true,
          nodeIntegration: false,
          enableRemoteModule: false,
          contextIsolation: true,
          worldSafeExecuteJavaScript: true,
        },
      })
      return window
    }
  })

  const browserWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    frame: true,
    webPreferences: {
      sandbox: true,
      nodeIntegration: false,
      enableRemoteModule: false,
      contextIsolation: true,
      worldSafeExecuteJavaScript: true,
      preload: path.resolve('preload.js')
    },
  })

  // Adds the active tab of the browser
  extensions.addTab(browserWindow.webContents, browserWindow)

  try {
    //await browserWindow.loadURL(url)
    await browserWindow.loadFile('index.html')
    const view = new BrowserView({ webPreferences: { preload: path.resolve('preload.js') } })
    browserWindow.addBrowserView(view)
    await view.webContents.loadURL(url)
    view.webContents.openDevTools({ mode: 'detach' })

    const [width, height] = browserWindow.getSize()
    view.setBounds({ x: 50, y: 62, width: width - 100, height: height - 62 })
    view.setAutoResize({ width: true, height: true })

  } catch (e) {
    console.log("err", e)
  }
  browserWindow.show()
  browserWindow.webContents.openDevTools({ mode: 'detach' })
}

main()

Extension is visible for my test site but I need to open menu of it. Basically what i'm trying to achieve is display a button of extension and being able to open menu of extension.