BrowserView doesn't inherit BrowserWindows' Extensions

[nikee9]

Issue Details

• Electron Version:
  4.1.4 upto 5.0.0-Beta8
• Operating System:
  Windows 10 (1803)

Expected Behavior

BrowserView's should inherit Chrome extensions from BrowserWindow

Actual Behavior

BrowserView's don't use Chrome extensions from BrowserWindow

To Reproduce

##Clone this repository
git clone https://github.com/electron/electron-quick-start
##Go into the repository
cd electron-quick-start
##Install dependencies
npm install

replace main.js code with this

const { app, BrowserWindow, BrowserView, } = require('electron');

var _x = 1280
var _y = 720

let browserWindow = null;

function createWindow() {
    browserWindow = new BrowserWindow({ width: _x, height: _y, title: "Twitch", autoHideMenuBar: false });
    browserWindow.webContents.loadURL('https://www.twitch.tv/');
    browserWindow.on('closed', function () { browserWindow = null; });
}
app.on('ready', function () {
    BrowserWindow.addExtension("C:/Users/USERNAME/AppData/Local/Google/Chrome/User Data/Default/Extensions/ajopnjidmegmdimjlfnijceegpefgped/7.2.1_0");  //Replace with appropriate directory
    console.log("Ready");
    createWindow();   
});

app.on('window-all-closed', function () {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) createWindow()
})

##Run the app
npm start

THIS WORKS

Replace main.js code with

const { app, BrowserWindow, BrowserView, } = require('electron');

var _x = 1680
var _y = 758

let browserWindow = null;
let browserView1 = null

function createWindow() {
    browserWindow = new BrowserWindow({ width: _x, height: _y, title: "Twitch", autoHideMenuBar: false });
    let browserView1 = new BrowserView({ webPreferences: { nodeIntegration: false, plugins: true, experimentalFeatures: true, devTools: true, sandbox: true }, });
    browserWindow.addBrowserView(browserView1);
    browserView1.setBounds({ x: 0, y: 0, width: _x-50, height: _y-70 });
    browserView1.setAutoResize({ width: true, height: true })
    browserView1.webContents.loadURL('https://www.twitch.tv/');
    browserWindow.on('closed', function () { browserWindow = null; });
}
app.on('ready', function () {
    BrowserWindow.addExtension("C:/Users/Nikhil/AppData/Local/Google/Chrome/User Data/Default/Extensions/ajopnjidmegmdimjlfnijceegpefgped/7.2.1_0");
    console.log("Ready");
    createWindow();
});

app.on('window-all-closed', function () {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) createWindow()
})

This doesn't work, or should there be a function

BrowserView.addExtension(path)

There reason im using browserview over browserwindow is because I want to tile 2 browserviews (which I've manage to do succesfully) to display 2 different webpages within one electron browser

[MarshallOfSound]

Please can you provide a minimal repro that demonstrates this issue. We can't spend time debugging / figuring out how the BTTV addon / twitch work.

A minimal repro based on electron-quick-start would go a long way to someone being able to look at this 👍

[nikee9]

Updated as requested

[jdfwarrior]

Is a BrowserView even supposed to inherit extensions from the parent window since the the BrowserView is a completely separate process with it's own DevTools in the first place? I honestly just started playing with BrowserView for the first time today but the little I know about it, I wouldn't assume that it would inherit those. I would think they would need to be loaded separately somehow. The API doesn't seem to support that though.

[ZhuGongpu]

So, is there a way to add an extension to a specific BrowserView instance cause I can find it nowhere in the document.

[zyead]

الحصول على Outlook لـ iOS<https://aka.ms/o0ukef>

…

________________________________ من: 朱公朴 <notifications@github.com> ‏‏تم الإرسال: Tuesday, July 16, 2019 3:39:06 PM إلى: electron/electron نسخة: Subscribed ‏‏الموضوع: Re: [electron/electron] BrowserView doesn't inherit BrowserWindows' Extensions (#17799) So, is there a way to add an extension to a specific BrowserView instance cause I can find it nowhere in the document. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#17799?email_source=notifications&email_token=ALKFMVMBIVTHZ7KAYQQHSL3P7W6OVA5CNFSM4HGDVLS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2AWQIY#issuecomment-511797283>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ALKFMVOWX6ZZUV5GLU4WC6DP7W6OVANCNFSM4HGDVLSQ>.

[kierandrewett]

I think BrowserView should inherit the extension APIs from BrowserWindow. I'm making a web browser in Electron and this is would be very helpful to have extensions.

[shahrouzz]

Reiterating the main question here: is there a way to load chrome extensions into a BrowserView?

[Flavkupe]

I'm also interested in seeing the issue resolved. I provided a simple minimal repro as requested by @MarshallOfSound that just requires electron-devtools-installer (which should hopefully not be too much) based on the electron-quick-start. From the base electron quick start, I npm installed electron-devtools-installer and ran the following main.js code:

const {app, BrowserWindow, BrowserView} = require('electron');
let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');

  var view = new BrowserView();

  mainWindow.setBrowserView(view);

  mainWindow.webContents.loadURL("http://todomvc.com/examples/react/#/");
  view.webContents.loadURL("http://todomvc.com/examples/react/#/");

  installExtension(REACT_DEVELOPER_TOOLS)
      .then((name) => console.log(`Added Extension:  ${name}`))
      .catch((err) => console.log('An error occurred: ', err));

  view.webContents.openDevTools();
  mainWindow.webContents.openDevTools();
}

app.on('ready', createWindow);

After running that code, it launches the electron app which installs the React DevTools extension and then creates a BrowserWindow and a BrowserView whose webContents are both pointing to the same url. It then opens the devtools for each of the 2 web contents and it can be seen from this screenshot that the extension opened successfully in the BrowserWindow devTools (bottom) but not in the BrowserView devTools (top):

[XRenSiu]

Electron 5.0.13
I have the same problem.
BrowserView can't load devtools extension, such as vue-devtools.

[electron-triage]

Thank you for taking the time to report this issue and helping to make Electron better.

The version of Electron you reported this on has been superseded by newer releases.

If you're still experiencing this issue in Electron 6.x.y or later, please add a comment specifying the version you're testing with and any other new information that a maintainer trying to reproduce the issue should know.

I'm setting the blocked/need-info label for the above reasons. This issue will be closed 7 days from now if there is no response.

Thanks in advance! Your help is appreciated.

[Flavkupe]

The repro steps I suggested in my post 27 days ago were using Electron 7.1.12, and the issue still exists there.

[samuelmaddock]

Electron v9 introduced Chromium extensions (#19447) which are loaded into the session—inherited by BrowserViews. As verification, I built a browser which uses BrowserViews and can load extensions. This issue can now be closed.

cc @sofianguy (hopefully you don't mind the ping to help close this issue 🙇‍♂️)