Наличие двух изолированных (с точки зрения истории / куки / локального хранилища) BrowserViews в одном и том же BrowserWindow с Electron - PullRequest
Новая
       28

Наличие двух изолированных (с точки зрения истории / куки / локального хранилища) BrowserViews в одном и том же BrowserWindow с Electron

4 голосов
/ 08 марта 2019

Допустим, у меня есть два BrowserView в одном и том же BrowserWindow и кнопка пользовательского интерфейса, позволяющая пользователю переключаться между отображением bv1 или bv2 (например, система «вкладок» в браузерах, таких как Firefox, Chrome, чтопозволяет переключаться между различными страницами): 

browserWindow = new BrowserWindow({ width: 1200, height: 600 });

let bv1 = new BrowserView({ webPreferences: { nodeIntegration: false }});
bv1.setBounds({ x: 0, y: 0, width: 1200, height: 600 });
bv1.webContents.loadURL('https://www.twitter.com');

let bv2 = new BrowserView({ webPreferences: { nodeIntegration: false }});
bv2.setBounds({ x: 0, y: 0, width: 1200, height: 600 });
bv2.webContents.loadURL('https://www.twitter.com');

browserWindow.setBrowserView(bv1);

и когда нажимается кнопка (например, «вкладка» в браузере): 

browserWindow.setBrowserView(bv2);

Я заметил, что эти дваBrowserView:

  • совместно используют одни и те же файлы cookie / localStorage (чего я не хочу!), Т. Е. Если первое подключено к учетной записи, второе также будет подключено ктот же аккаунт

  • хранить историю и куки после перезапуска приложения Electron (это хорошо и действительно нужно!)

Вопрос: как получить две BrowserView полностью изолированных с точки зрения файлов cookie / localStorage / history (и, таким образом, bv1 можно подключить к одной учетной записи Twitter и bv2 к другой)?

1 Ответ

3 голосов
/ 10 марта 2019

Итак, мне удалось заставить это работать, но очень, очень окольным путем. Эффективно перехватывает сеанс, сохраняя и загружая его при закрытии / открытии приложения. Приведенный ниже код с некоторыми комментариями, с некоторыми полезными ссылками. Это сработало при запуске как dev и при работе с приложением сборки.

Возможно, вам придется разобраться с возможными проблемами безопасности, хранящими файлы cookie локально.

Единственное, что я не затронул в этом ответе:

сохранить историю ... после перезапуска приложения Electron 

const { app, BrowserWindow, BrowserView, globalShortcut, session } = require('electron');
const eJSONStorage = require('electron-json-storage');

// Our two different sesions, views, and base URL for our 'tabs'.
let bv1Session, bv2Session = session;
let bv1, bv2 = BrowserView;
const appTabUrl = 'https://www.twitter.com';

app.on('ready', () => {
  const width = 1200; const height = 600;
  let b1Active = true;

  // Our browser window
  browserWindow = new BrowserWindow({
    width: width,
    height: height,
  });

  // Our first browser window with it's own session instance.
  bv1Session = session.fromPartition('persist:bv1Session', { cache: true });
  bv1 = createBrowserView(appTabUrl, bv1Session, width, height);
  loadCookieState('view1Cookies', bv1Session);

  // Our second browser window with it's own session instance.
  bv2Session = session.fromPartition('persist:bv2Session', { cache: true });
  bv2 = createBrowserView(appTabUrl, bv2Session, width, height);
  loadCookieState('view2Cookies', bv2Session);

  // Our initial setting of the browserview
  browserWindow.setBrowserView(bv1);

  // Our shortcut listener and basic switch mechanic
  // Set to [CTRL + /] for windows or [CMD + /] for OSX
  globalShortcut.register('CommandOrControl+/', () => {
    b1Active ? browserWindow.setBrowserView(bv2) : browserWindow.setBrowserView(bv1);
    b1Active = !b1Active
  });
});

// When the app closes, exit gracefully.
// Unregister keypress listener, save cookie states, exit the app.
app.on('window-all-closed', () => {
  globalShortcut.unregisterAll();
  saveCookieState('view1Cookies', bv1Session);
  saveCookieState('view2Cookies', bv2Session);
  app.quit();
})

// Helper method to generate a browser view.
function createBrowserView(url, session, width, height) {
  let browserView = new BrowserView({
    webPreferences: {
      nodeIntegration: false,
      nodeIntegrationInWorker: false,
      session: session
    }
  });
  browserView.setBounds({ x: 0, y: 0, width: width, height: height });
  browserView.webContents.loadURL(url);
  return browserView;
}

// Method that takes a session name, and our current session to save its state.
function saveCookieState(sessionName, currentSession) {
  currentSession.cookies.get({}, (_, cookies) => {
    cookies.forEach(cookie => {
      // URL is a required paramater, take it from the domain with a little parsing.
      // Twitter always uses HTTPS otherwise, we would need to check for http vs https too.
      const cDomain = !cookie.domain.startsWith('.') ? `.${cookie.domain}` : cookie.domain;
      cookie.url = `https://www${cDomain}`
    });
    // Save the set of cookies against the session name.
    eJSONStorage.set(sessionName, cookies, err => {
      if (err) {
        throw err;
      }
    });
  });
}

// Method that loads a session based on its name, into a session created by us.
function loadCookieState(sessionName, currentSession) {
  eJSONStorage.get(sessionName, (error, cookieData) => {
    // Check for empty object returned, this means no saved sessions.
    if (Object.entries(cookieData).length === 0) {
      return;
    }
    if (error) {
      throw error;
    }
    // If we have saved sessions and no errors, load the sessions.
    cookieData.forEach(cookie => currentSession.cookies.set(cookie, error => {
      if (error) console.error(error);
    }));
  });
}
...