electron / electron/electron

[Feature Request]: Add custom labels to BrowserWindow instances

Open
#39,026 1 comment 3 reactions 0 assignees View on GitHub
enhancement :sparkles:
Dominant language
C++
Stars
123k
Forks
17.5k
Avg merge
14h 31m
Merged PRs (30d)
858

Description

### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a feature request that matches the one I want to file, without success.

### Problem Description

When creating an Electron app with multiple windows, it can be difficult to differentiate between the windows.

The Electron API provides no way to identify an Electron window other than its id (which is just a number), its title (which might change with i18n or app state), or some aspect of its webContents (such as URL, which may change).

### Proposed Solution

Adding a simple "label" (string) property to the BrowserWindow options would allow developers to identify and differentiate windows in their app.

```TS
function createWindows() {
const win = new BrowserWindow({
label: 'first_window',
})
win.loadURL('https://example.com')

const win2 = new BrowserWindow({
label: 'second_window',
})
win2.loadURL('https://example2.com')

const win3 = new BrowserWindow({
label: 'third_window',
})
win3.loadURL('https://example3.com')
}

createWindows()

function updateWindow1(state: State) {
const windows = BrowserWindow.getAllWindows()
const win1 = windows.find((w) => w.label === 'first_window'))
if (win1) {
win1.webContents.send('state', state)
}
}
```

### Alternatives Considered

A more flexible solution would be a "labels" property which takes an array of strings. This could be a way to "tag" windows with both unique and non-unique identifiers.

```TS
function createWindows() {
const win = new BrowserWindow({
labels: ['first_window', 'controller'],
})
win.loadURL('https://example.com')

const win2 = new BrowserWindow({
labels: ['second_window', 'output'],
})
win2.loadURL('https://example2.com')

const win3 = new BrowserWindow({
labels: ['third_window', 'output'],
})
win3.loadURL('https://example3.com')
}

createWindows()

function updateWindow1(state: State) {
const windows = BrowserWindow.getAllWindows()
const win1 = windows.find((w) => w.labels.includes('first_window'))
if (win1) {
win1.webContents.send('state', state)
}
}
```

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.