@lynker-desktop/electron-tabs-browser

@lynker-desktop/electron-tabs-browser

electron tabs 多窗口, 可分离

Install

npm i @lynker-desktop/electron-tabs-browser

使用

1. 在 主进程 实例化 tabsBrowser

import {initialize, enable} from '@lynker-desktop/electron-tabs-browser/main';

const ewtb = initialize();
let browser;
function createWindow() {
  browser = new BrowserWindow({
    width: 700,
    height: 700,
    webPreferences: {
      plugins: true, 
      nodeIntegration: true, 
      contextIsolation: false,
      webSecurity: false,
      preload: path.join(__dirname, '../preload/index.js')
    }
  })
  enable(browser.webContents)
  browser.loadURL('http://localhost:8000/mainTabs')
}

2. 在 preload 引入

import '@lynker-desktop/electron-tabs-browser/preload'

3. 在渲染器进程进行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 '@lynker-desktop/electron-tabs-browser/renderer';

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

运行 Example

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