Chrome扩展开发：新标签页打开时自动聚焦搜索输入框实现咨询

问题原因说明 #

Chrome 对自定义新标签页扩展有明确的安全限制：

• 原生 HTML autofocus 属性会被浏览器直接拦截，不会写入元素 attributes 列表，完全不生效，这是浏览器层面的默认行为，不是代码写法问题。
• 页面加载初期直接调用输入框的 focus() 方法时，浏览器还处于「强制焦点锁定在地址栏」的保护期，这时候的聚焦调用只会给输入框加上聚焦样式，实际输入焦点仍停留在地址栏，就会出现地址栏URL残留、输入内容打到地址栏的问题。

Ocean Hero 实现的效果本质是错开了浏览器的初始焦点锁定期，等地址栏完成初始聚焦的流程后，再主动把焦点切到页面内的搜索框，就会出现你观察到的「地址栏短暂闪烁后焦点跳到搜索框」的表现，完全没有残留。

可直接复用的实现代码 #

首先把输入框上手动加的 autofocus 属性删掉，留着反而可能干扰后续聚焦逻辑。
在新标签页的页面脚本中加入以下代码即可：

window.addEventListener('load', () => {
  // 延迟120~200ms触发即可，150ms是和Ocean Hero表现最接近的阈值
  setTimeout(() => {
    const searchInput = document.querySelector('替换成你的搜索框选择器');
    if (searchInput?.focus) {
      searchInput.focus();
      // 需要默认全选输入框占位内容的话可以加下面这行
      // searchInput.select();
    }
  }, 150);
});

注意事项 #

• 不要在 DOMContentLoaded 事件里直接触发聚焦，也不要把延迟设为0ms，这两个时机仍在Chrome的焦点锁定期内，会复现地址栏残留问题。
• 搜索框必须放在新标签页的顶层DOM中，如果放在跨域iframe里，focus调用会被浏览器安全策略拦截。
• 如果用了Shadow DOM做组件封装，要确保直接调用原生input元素的focus方法，不要调用外层自定义组件的包装方法。

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