为何jQuery focus()仅触发一次？Chrome扩展iframe焦点问题排查

看起来你已经排查了关键环节——消息能正常传递到iframe（控制台日志每次都触发），而且插入内容的操作完全正常，这说明通信链路和元素选择器都没问题，问题大概率出在焦点管理的细节上。结合你的描述，我给你几个针对性的解决方案：

1. 先移除blur()操作试试，它可能是干扰项 #

你提到在成功处理函数里加了$('#searchLibraryTB').blur();，这很可能是罪魁祸首：第一次焦点设置后，blur可能因为某种延迟没立刻生效，但后续操作中，blur会在焦点刚设置完成就马上移除焦点，导致你看起来像是焦点没生效。

先把这行代码注释掉，测试一下焦点是否能每次都正常触发：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message received");
  const inputEl = document.getElementById('searchLibraryTB');
  if (inputEl) {
    inputEl.focus();
  }
});

如果确实是这个原因，你可以把blur逻辑绑定到特定事件上（比如用户按下回车键后），而不是在设置焦点后立刻执行。

2. 用原生JS代替jQuery，避免框架的焦点行为差异 #

jQuery的focus()方法在iframe这类跨上下文环境中，偶尔会和原生element.focus()有行为差异。换成原生DOM操作会更可靠：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message received");
  // 用原生方法获取元素
  const inputEl = document.getElementById('searchLibraryTB');
  if (inputEl) {
    // 确保元素处于可见状态（如果页面有动态隐藏逻辑）
    if (inputEl.offsetParent === null) {
      inputEl.style.display = 'block';
    }
    inputEl.focus();
    // 可以加个调试日志，确认焦点是否真的设置成功
    console.log("当前焦点元素:", document.activeElement);
  }
});

如果日志显示document.activeElement确实是你的输入框，但视觉上没看到光标，那可能是页面有其他自动抢焦点的逻辑（比如页面内的定时器或事件），需要排查iframe内的其他代码。

3. 给焦点操作加微小延迟，适配DOM状态变化 #

有时候消息传递到iframe时，输入框的DOM状态可能还没完全稳定（比如轻微的重渲染），这时候立刻设置焦点会失效。加个100ms以内的延迟就能解决：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message received");
  setTimeout(() => {
    const inputEl = document.getElementById('searchLibraryTB');
    if (inputEl) {
      inputEl.focus();
    }
  }, 50); // 微小延迟确保DOM状态稳定
});

4. 检查iframe的焦点权限 #

Chrome对iframe的焦点有一定的安全限制，如果iframe的源和父页面不同源，可能会有焦点设置的限制。不过你第一次能成功，说明同源策略应该没问题，但可以确认一下：在iframe的JS里执行console.log(window.parent === window)，如果返回false，说明是跨源iframe，这时候可以试试在焦点设置前先让iframe本身获得焦点：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message received");
  // 先让iframe本身获得焦点
  window.focus();
  const inputEl = document.getElementById('searchLibraryTB');
  if (inputEl) {
    inputEl.focus();
  }
});

按照这个顺序排查，应该能快速定位并解决问题。

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