Chrome扩展：右键触发时能否从扩展图标打开Popup窗口？

需求描述 #

选中网页文本后右键点击，将选中的文本发送至扩展的Popup窗口并自动打开该窗口。

已编写代码 #

background.js

chrome.contextMenus.create({
  title: "send text to popup", 
  contexts:["selection"], 
  onclick: function(info, tab) {
    //console.log(info.selectionText);
    sendtopopup(info.selectionText);
  }
});

function sendtopopup(text) {
  
 console.log(text);
 
  
  chrome.runtime.sendMessage({result: text}, console.log("runtime is executed on background"));

  

} // end send pop up

popup.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Add styles for the popup here */
    </style>
  </head>
  <body>
    <h4>below should be hihglighted text</h4>
    <p id="result"></p>
    <p id="result2"></p>
  </body>
  <script>
    chrome.extension.onMessage.addListener(
      function(request, sender, sendResponse) {
        document.getElementById("result").innerHTML = request.result;
        document.getElementById("result2").innerHTML = "sameple text to check listener";
      }
    );
    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        document.getElementById("result").innerHTML = request.result;
        document.getElementById("result2").innerHTML = "2222222sameple text to check listener";
      }
    );
    
  </script>
</html>

manifest.json

{
  "manifest_version": 2,
  "name": "send text to popup",
  "version": "1.0",
  "description": "Sends highlighted text to popup",
  "permissions": [
    "activeTab",
    "contextMenus"

  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

核心问题 #

是否可在右键菜单功能执行时，从浏览器扩展图标处打开该扩展的Popup窗口？

解决方案 #

Chrome官方API不支持后台脚本直接唤起官方Popup，因为Popup的生命周期由用户主动点击图标触发，属于浏览器的安全限制。但可以通过以下两种方案实现类似需求：

方案一：创建独立弹窗替代官方Popup

把原Popup内容改成独立的HTML页面，通过chrome.windows.create直接创建弹窗并传递文本，体验和官方Popup接近：

1. 修改background.js

chrome.contextMenus.create({
  title: "发送文本到弹窗", 
  contexts:["selection"], 
  onclick: function(info) {
    // 创建自定义弹窗
    chrome.windows.create({
      url: chrome.runtime.getURL("custom-popup.html"),
      type: "popup",
      width: 320,
      height: 180
    }, function(window) {
      // 弹窗创建后发送文本
      chrome.tabs.sendMessage(window.tabs[0].id, {result: info.selectionText});
    });
  }
});

2. 创建custom-popup.html
   复制原popup.html并修改消息监听，简化冗余代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body { width: 300px; padding: 15px; margin: 0; }
      h4 { margin-top: 0; }
      #result { word-break: break-all; }
    </style>
  </head>
  <body>
    <h4>选中的文本：</h4>
    <p id="result"></p>
  </body>
  <script>
    // 监听来自后台的文本消息
    chrome.runtime.onMessage.addListener((request) => {
      document.getElementById("result").textContent = request.result;
    });
  </script>
</html>

3. 更新manifest.json
   添加tabs权限，并升级到Manifest V3（V2已被弃用）：

{
  "manifest_version": 3,
  "name": "发送文本到弹窗",
  "version": "1.0",
  "description": "将选中的文本发送到扩展弹窗",
  "permissions": ["activeTab", "contextMenus", "tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

方案二：存储文本+引导用户点击图标（妥协方案）

如果必须使用官方Popup，可先把文本存入本地存储，再通过通知提示用户点击图标，Popup加载时读取文本：

1. 修改background.js

chrome.contextMenus.create({
  title: "发送文本到弹窗", 
  contexts:["selection"], 
  onclick: function(info) {
    // 存储选中的文本
    chrome.storage.local.set({selectedText: info.selectionText}, () => {
      // 弹出通知引导用户点击图标
      chrome.notifications.create({
        type: "basic",
        iconUrl: "icon.png", // 需添加一个128x128的图标文件
        title: "文本已保存",
        message: "点击扩展图标查看选中的内容"
      });
    });
  }
});

2. 修改popup.html脚本
   页面加载时读取存储的文本：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    chrome.storage.local.get('selectedText', (data) => {
      if (data.selectedText) {
        document.getElementById("result").textContent = data.selectedText;
        // 可选：读取后清空存储，避免下次打开重复显示
        chrome.storage.local.remove('selectedText');
      }
    });
  });
</script>

3. 更新manifest.json
   添加storage和notifications权限：

{
  "manifest_version": 3,
  "name": "发送文本到弹窗",
  "version": "1.0",
  "description": "将选中的文本发送到扩展弹窗",
  "permissions": ["activeTab", "contextMenus", "storage", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

原代码优化提示 #

• 原代码同时注册了chrome.extension.onMessage和chrome.runtime.onMessage，这两个是同一API的不同写法，保留一个即可，避免重复触发。
• 建议升级到Manifest V3，V2已被Chrome逐步弃用，无法在新版Chrome商店上架。

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