WebExtension .focus() tests

background.js

"use strict";

function onError(error) {
  console.error(`Error: ${error}`);
}

function sendMessageToTabs(tabs) {
  for (let tab of tabs) {
    browser.tabs.sendMessage(
      tab.id,
      {greeting: "Hi from background script"}
    ).then(response => {
      console.log("Message from the content script:");
      console.log(response.response);
    }).catch(onError);
  }
}

browser.commands.onCommand.addListener(name => {
  console.log("command", name);
  browser.tabs.query({
    currentWindow: true,
    active: true
  }).then(sendMessageToTabs).catch(onError);
})

content.js

"use strict";

browser.runtime.onMessage.addListener(request => {
  console.log("Message from the background script:");
  console.log(request.greeting);

  document.body.style.border = "2px solid red";
  document.body.focus();

  var firstInput = document.querySelector("input:not([type=hidden])");
  if (firstInput) {
    firstInput.style.border = "2px solid red";
    firstInput.focus();
  }

  return Promise.resolve({response: "Hi from content script"});
});

manifest.json

{
  "manifest_version": 2,
  "name": "webextension-test",
  "version": "0.0.0",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+E"
      }
    },
    "test": {
      "suggested_key": {
        "default": "Ctrl+Shift+E"
      }
    }
  }
}

popup.html

<p id="text">popup</p>
<input id="input" autofocus>
<script src="popup.js"></script>

popup.js

"use strict";

setTimeout(() => {
  document.querySelector("body").focus();
  text.textContent = "focused?";
}, 100);

document.addEventListener("keydown", event => {
  text.textContent = event.key;
}, true);