# Switching focus from the sidebar to the active tab

**URL:** <https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436>\
**Category:** Development\
**Created:** [July 2, 2024, 8:40pm UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436 "2024-07-02T20:40:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![aecreations](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/aecreations/32/30593_2.png) [@aecreations](https://discourse.mozilla.org/u/aecreations)\
**Post date:** [July 2, 2024, 8:40pm UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/1 "2024-07-02T20:40:02Z")

</div>

I’m adding a sidebar to my Firefox extension which will let users insert text into a web page textbox by clicking on an element, or pressing ENTER on a selection, in a list that is displayed in the sidebar.

But for this to work, the focus would need to switch from the extension sidebar to the active tab in the same browser window. This is because the text insertion is performed by the content script, which will locate the active element in the document, which should be the text box that the user has focused prior to interacting with the extension sidebar.

I read through the [sidebarAction API documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction) and couldn’t find anything that would cause this behaviour to happen. Any ideas?

---

<div class="post-metadata">

**Author:** ![ComputerWhiz](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/computerwhiz/32/20011_2.png) [@ComputerWhiz](https://discourse.mozilla.org/u/ComputerWhiz)\
**Post date:** [July 2, 2024, 9:15pm UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/2 "2024-07-02T21:15:45Z")

</div>

When you navigate away from the tab, the focused field is blurred. When you come back, the field is refocused. You can simulate this by adding an onblur and onfocus event to a form field.

My guess is that the content script fires before the focus event when the tab is selected again. This is of course assuming that you return focus back to the original tab and that the focus does not stay on the sidebar.

A hacky workaround would be to have a content script that stores the focused element. You may even be able to do that only when focus is moved away from the tab.

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [July 3, 2024, 6:39am UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/3 "2024-07-03T06:39:01Z")

</div>

Isn’t the focused element preserved in each document?  
For example, even while typing this reply, if I press “Ctrl + H” to open History sidebar (which focuses the History search input) and then I press “F12” and execute `document.activeElement`, it will still return this textarea where I type this.

So the content script running in a tab should still see whatever was last focused.  
Or maybe I misunderstood the question, it’s still early morning 🙂.

---

<div class="post-metadata">

**Author:** ![aecreations](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/aecreations/32/30593_2.png) [@aecreations](https://discourse.mozilla.org/u/aecreations)\
**Post date:** [July 4, 2024, 7:53am UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/4 "2024-07-04T07:53:22Z")

</div>

Thanks everyone for the hints! I made it work by sending a message to the content script from the sidebar to focus the window. The content script calls `activeElement.ownerDocument.defaultView.focus()` to focus the window (just calling `window.focus()` doesn’t seem to do anything), and then focuses the active element.

BTW, the reason why I need to focus the window is because the content script is injected into all frames (`"all_frames": true` in the extension manifest). If there are multiple web pages displayed in a `<frame>` or `<iframe>`, the text insertion into a web page textbox should only occur on the frame that has the focus.

---

<div class="post-metadata">

**Author:** ![dotproto](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/dotproto/32/62957_2.png) [@dotproto](https://discourse.mozilla.org/u/dotproto)\
**Post date:** [July 11, 2024, 1:36am UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/5 "2024-07-11T01:36:27Z")

</div>

To be honest, I’m surprised that worked for you, @aecreations. In my testing `document.activeElement.ownerDocument.defaultView.focus()` and `window.focus()` shared the same (odd) behavior.

As I type this, I have a test extension installed in the sidebar. If I click into the sidebar, then click “Focus main window”, my cursor will appear back in the reply textarea on this site. If I immediately repeat that process, it doesn’t switch back. There seems to be some minimum amount of interaction with the page that is required in order for focus to switch back. Its really quite odd.

**`manifest.json`**

```json
{
  "name": "Sidebar - focus main window",
  "version": "1.0",
  "manifest_version": 3,
  "sidebar_action": {
    "default_panel": "sidebar.html"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

```

**`sidebar.html`**

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script defer src="sidebar.js"></script>
</head>
<body>
  <input type="text" id="text-input"></input>
  <button id="focus-main">Focus main window</button>
</body>
</html>

```

**`sidebar.js`**

```javascript
const button = document.getElementById("focus-main");

button.addEventListener("click", async () => {
  const [tab] = await browser.tabs.query({active: true, lastFocusedWindow: true});
  browser.tabs.sendMessage(tab.id, "focus-main");
});

```

**`content.js`**

```javascript
browser.runtime.onMessage.addListener((message) => {
  if (message === "focus-main") {
    console.log("focus-main message received");
    // document.activeElement.ownerDocument.defaultView.focus();
    window.focus();
    console.log("doc has focus?", document.hasFocus())
    setTimeout(() => console.log("doc has focus?", document.hasFocus()), 100)
  }
});

```

---

<div class="post-metadata">

**Author:** ![aecreations](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/aecreations/32/30593_2.png) [@aecreations](https://discourse.mozilla.org/u/aecreations)\
**Post date:** [July 11, 2024, 7:49am UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/6 "2024-07-11T07:49:19Z")

</div>

Having looked into this further, I’m now seeing the same results, which would explain my initial observation that `window.focus()` had not worked. Quite odd indeed, and not a great user experience.

---

<div class="post-metadata">

**Author:** ![dotproto](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/dotproto/32/62957_2.png) [@dotproto](https://discourse.mozilla.org/u/dotproto)\
**Post date:** [August 5, 2024, 5:40pm UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/7 "2024-08-05T17:40:58Z")

</div>

I spoke with some browser folks involved in the WECG about this. My initial impression is that they seemed open to allowing extensions to move focus from an extension’s sidebar to the tab’s main frame. @aecreations, would you mind opening a feature request for this on [bugzil.la](https://bugzil.la)?

---

<div class="post-metadata">

**Author:** ![aecreations](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/aecreations/32/30593_2.png) [@aecreations](https://discourse.mozilla.org/u/aecreations)\
**Post date:** [August 10, 2024, 3:52am UTC](https://discourse.mozilla.org/t/switching-focus-from-the-sidebar-to-the-active-tab/132436/8 "2024-08-10T03:52:02Z")

</div>

Ability for extensions to switch focus between sidebar and active browser tab:

> **[1912558 - Ability for extensions to switch focus between sidebar and active...](https://bugzilla.mozilla.org/show_bug.cgi?id=1912558)**
>
> UNCONFIRMED (nobody) in Firefox - Untriaged. Last updated 2024-08-09.