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:
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.