Chrome扩展content scripts中如何用jQuery实现点击input打开popup？

实现方案 #

Chrome扩展原生popup默认无法通过网页脚本直接主动唤起，有两种可落地的实现方案：

方案1：页面注入自定义模拟弹窗（兼容性最佳，无版本限制）

直接在当前网页插入和扩展popup样式、功能一致的自定义DOM元素，触发显示即可，修改你的代码如下：

$(document).ready(function(){
  // 定义popup结构和基础样式，可按需调整
  const extPopupTemplate = `
    <div id="chrome-ext-popup" style="position: fixed; top: 24px; right: 24px; width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 16px; z-index: 999999; display: none;">
      <!-- 这里放你原本popup的所有内容和交互逻辑 -->
    </div>
  `;
  // 将弹窗插入页面
  $('body').append(extPopupTemplate);

  // input获得焦点时显示弹窗
  $("input").focus(function(){ 
    $('#chrome-ext-popup').show();
  });

  // 可选：点击非弹窗/非input区域关闭弹窗
  $(document).on('click', function(e) {
    if (!$(e.target).closest('input, #chrome-ext-popup').length) {
      $('#chrome-ext-popup').hide();
    }
  });
});

方案2：调用Chrome官方API打开原生popup（仅支持Chrome 118+、Manifest V3）

如果必须唤起扩展原生的popup，需要用到chrome.action.openPopup()API，按以下步骤配置：

1. 先在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  }
  // 其他原有配置保持不变
}

2. 修改你现有内容脚本的代码：

$(document).ready(function(){
  $("input").focus(function(){ 
    // 向扩展后台发送打开popup的请求
    chrome.runtime.sendMessage({type: "openPopup"}, (res) => {
      // 可按需处理返回结果
    });
  });
});

3. 在扩展的后台服务文件background.js中添加监听逻辑：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "openPopup") {
    chrome.action.openPopup()
      .then(() => sendResponse({status: "success"}))
      .catch(err => sendResponse({status: "fail", msg: err.message}));
    return true; // 保持消息通道开放等待异步返回
  }
});

注意：该API只能在用户主动触发的交互事件回调中调用，input的focus事件属于用户主动交互，符合调用要求。

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