如何通过WebExtension API让Firefox新标签页搜索框获取焦点？

这个问题我之前开发Firefox新标签页扩展时也碰到过！Firefox和Chrome在新标签页的焦点处理逻辑确实不一样——Chrome会尊重页面内的focus()调用，但Firefox会在新标签页加载完成后自动把焦点切回地址栏，直接调用searchInput.focus()会被它的默认行为覆盖掉。这里有两个可靠的解决方法，你可以试试：

方法一：延迟执行focus（简单快捷） #

Firefox的焦点抢夺是在页面加载后的短时间内完成的，我们可以用setTimeout避开这个时机，让搜索框的focus()执行在浏览器默认行为之后：

document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('你的搜索框ID');
  // 延迟50毫秒执行，这个时间足够避开Firefox的焦点抢夺
  setTimeout(() => {
    searchInput.focus();
    // 可选：如果需要自动选中搜索框内的默认文本，可以加上这行
    // searchInput.select();
  }, 50);
});

这个方法的优点是不需要额外权限，代码简单，大部分场景下都能正常工作。

方法二：用WebExtension的Tabs API强制聚焦（更可靠） #

如果延迟方法偶尔失效，你可以借助Firefox的Tabs API，先确保当前标签页处于活跃聚焦状态，再让搜索框获取焦点：

document.addEventListener('DOMContentLoaded', async () => {
  const searchInput = document.getElementById('你的搜索框ID');
  // 获取当前的新标签页实例
  const currentTab = await browser.tabs.getCurrent();
  // 强制将标签页设置为活跃且聚焦状态，打破浏览器的地址栏焦点锁定
  await browser.tabs.update(currentTab.id, { active: true, focused: true });
  // 最后聚焦搜索框
  searchInput.focus();
});

注意：这个方法不需要额外申请权限，因为你的自定义新标签页属于扩展自身的页面，有权限调用tabs.getCurrent()和tabs.update()。

另外别忘了确认你的manifest.json配置正确，chrome_url_overrides部分要指向你的新标签页HTML文件，示例如下：

{
  "manifest_version": 3,
  "name": "自定义新标签页",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }
}

如果使用Manifest V2，把manifest_version改成2即可。

内容的提问来源于stack exchange，提问作者dorachan2010