electron-tabs-browser

electron tabs 多窗口, 可分离

Install

npm i electron-tabs-browser

使用

1. 在 主进程 实例化 tabsBrowser

import tabsBrowser from 'electron-tabs-browser/main';

let browser;

browser = new tabsBrowser({
  tabPosition: 'top',
  controlSize: 99,
  controlPanel: 'renderer/you-control-interface.html',
  startPage: 'https://page-to-load-once-open',
  blankTitle: 'New tab',
  debug: true // 是否打开controlPanel的devtools
});

// 在新选项卡上创建触发器
browser.on('new-tab', ({ webContents }) => {
  // 自定义webContents
});

browser.on('closed', () => {
  // 垃圾回收
  browser = null;
});

2. 在渲染器进程进行tab标签栏开发

要使tabs导航栏界面工作，有两个步骤:

• 设置ipc通道来接收tabs选项卡的信息
• 发送操作来控制行为

你必须在tabs导航栏中设置ipc通道，有三个步骤:

• ipcRenderer.send('control-ready') tabs导航栏加载完成
• ipcRenderer.on('tabs-update', (e, tabs) => { // tabs updated }) 监听tabs更新
• ipcRenderer.on('active-update', (e, activeID) => { // Active tab's id updated }) 监听tabs选项卡的id已更新

不要忘记在控制面板卸载后在ipcRenderer上removeListener。

设置ipc通道后，将获得tabs面板的所有信息:

• tabs 对象包含打开的选项卡的所有信息
• tabIDs 打开选项卡id的数组
• activeID 当前活动选项卡的id

按业务开发和设计tabs选项卡界面。

然后您可以发送操作来控制浏览器视图，这些操作可以从 electron-tabs-browser/renderer:

import {
  // 告诉tabs标签栏准备好了
  sendControlReady,
  // 告诉BV加载url
  sendEnterURL, // sendEnterURL(url) to load url
  // 告诉BV 地址栏中的url已更改
  sendChangeURL, // sendChangeURL(url) on addressbar input change
  // 告诉BV回退
  sendGoBack,
  // 告诉BV goForward
  sendGoForward,
  // 告诉BV重新加载
  sendReload,
  // 告诉BV关闭选项卡
  sendNewTab, // sendNewTab([url])
  // 告诉BV切换到指定的选项卡
  sendSwitchTab, // sendSwitchTab(toID)
  // 告诉BV视图关闭选项卡
  sendCloseTab, // sendCloseTab(id)
  // 告诉BV切换新开窗口
  sendMoveNewWindow,
  // 监听tabs更新
  onTabsUpdate,
  // 监听活动当前活动tab
  onActiveUpdate,
  // 监听配置改变
  onOptionsChange,
} from 'electron-tabs-browser/renderer';

完整的控制接口实现参见example。

运行 Example

• yarn install && cd example/renderer && yarn
• yarn dev