Repository: electron
Issue: Using the back/forward buttons on the mouse don't update the same history stack that webcontents uses
Labels: bug :beetle:

### Preflight Checklist
* [x] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/master/CONTRIBUTING.md) for this project.
* [x] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/master/CODE_OF_CONDUCT.md) that this project adheres to.
* [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

### Issue Details

* **Electron Version:** 9.0.0 - 9.0.4 at least
* **Operating System:** Windows 10
* **Last Known Working Electron version:** not sure

### Expected Behavior
I expect that pressing back or forward with my mouse will update the same stack of history that `webContents.goBack()` / `webContents.goForward()` uses.

### Actual Behavior
They don't, so pressing the back button on the mouse will add a new history entry to the webcontents.

### To Reproduce
1. npm start the app below
2. navigate google to some page
3. press the back button on the mouse
4. I would expect that the back button that I added is now disabled, but it's not. Pressing the back button will take you back the search page and pressing it again takes you back to Google.
5. Now the back and forward buttons on the mouse are messed up and don't do anything

main.js:

```
(async () => {
  const {app, BrowserWindow, BrowserView, ipcMain, webContents} = require("electron");
  const { join } = require("path");

  await app.whenReady()

  const window = new BrowserWindow({
    webPreferences: {
      sandbox: false,
      nodeIntegration: true
    }
  });

  window.removeMenu();

  await window.loadFile(join(__dirname, "./index.html"));
  const browserView = new BrowserView({
    webPreferences: {
      sandbox: true,
      nodeIntegration: false
    }
  });
  window.setBrowserView(browserView);

  const contentBounds = window.getContentBounds();
  browserView.setBounds({ x: 0, y: 30, width: contentBounds.width, height: contentBounds.height - 30 });
  browserView.setAutoResize({ width: true, height: true });

  await browserView.webContents.loadURL("https://google.com");
  window.webContents.send("sendId", browserView.webContents.id);

  browserView.webContents.on("did-navigate", () => {
    window.webContents.send("canNav", browserView.webContents.canGoBack(), browserView.webContents.canGoForward());
  });

  ipcMain.on("goBack", (e, webContentsId) => {
    const wc = webContents.fromId(webContentsId);
    if (wc && wc.canGoBack()) {
      wc.goBack();
    }
  });

  ipcMain.on("goForward", (e, webContentsId) => {
    const wc = webContents.fromId(webContentsId);
    if (wc && wc.canGoForward()) {
      wc.goForward();
    }
});
})();
```

index.html:

```
<html>

<body>
	<div id="toolbar">
		<button id="back" disabled>Back</button>
		<button id="forward" disabled>Forward</button>
	</div>

	<script src="./renderer.js"></script>
</body>

</html>
```

renderer.js:
```
const { ipcRenderer } = require("electron");

const backButton = document.getElementById("back");
const forwardButton = document.getElementById("forward");

let webContentsId = -1;
ipcRenderer.on("sendId", (e, id) => {
	webContentsId = id;
});

ipcRenderer.on("canNav", (e, canBack, canForward) => {
	backButton.disabled = !canBack;
	forwardButton.disabled = !canForward;
});

backButton.onclick = () => {
	ipcRenderer.send("goBack", webContentsId);
};

forwardButton.onclick = () => {
	ipcRenderer.send("goForward", webContentsId);
};
```