如何从浏览器扩展background script触发打开预填选中文本的扩展弹窗

我完全get你的需求——通过右键菜单选中文本后，直接唤起和点击工具栏图标一样的扩展弹窗，还得自动把选中的文本填到弹窗里的textarea中。下面是具体的实现方案：

1. 核心修改：在Background Script中触发弹窗打开 #

Chrome提供了chrome.action.openPopup() API（如果你用的是Manifest V2，就换成chrome.browserAction.openPopup()），它可以在用户交互的回调里直接唤起扩展弹窗。你只需要在把文本保存到storage之后调用这个方法就行。

修改后的Background Script代码：

var contextMenuItem = { "id": "getFakeText", "title": "GetFakeText", "contexts": ["selection"] };
chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.onClicked.addListener(function(clickData){
    if(clickData.menuItemId === "getFakeText" && clickData.selectionText){
        // 保存选中的文本到sync storage
        chrome.storage.sync.set({"Text": clickData.selectionText}, function() {
            // 保存完成后打开扩展弹窗
            chrome.action.openPopup().catch(err => {
                console.error('打开弹窗失败:', err);
            });
        });
    }
})

注意：chrome.action.openPopup()必须在用户触发的事件回调中调用，而chrome.contextMenus.onClicked正好符合这个要求，所以不会碰到调用权限的问题。

2. 弹窗页面自动读取并填充文本 #

接下来要让弹窗加载时自动从Chrome Storage里读取保存的文本，填充到textarea中。假设你的弹窗HTML文件是popup.html，内容可以这么写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>扩展弹窗</title>
    <style>
        body { width: 300px; padding: 15px; }
        textarea { width: 100%; height: 150px; }
    </style>
</head>
<body>
    <textarea id="textArea"></textarea>
    <script src="popup.js"></script>
</body>
</html>

对应的popup.js脚本：

document.addEventListener('DOMContentLoaded', function() {
    const textArea = document.getElementById('textArea');
    // 从sync storage读取保存的文本
    chrome.storage.sync.get('Text', function(data) {
        if(data.Text) {
            textArea.value = data.Text;
            // 可选：读取后清空storage，避免下次打开弹窗还显示旧文本
            chrome.storage.sync.remove('Text');
        }
    });
});

3. Manifest配置要求（Manifest V3示例） #

确保你的manifest.json配置正确，包含必要的权限和action字段：

{
    "manifest_version": 3,
    "name": "GetFakeText",
    "version": "1.0",
    "description": "保存选中文本并打开扩展弹窗",
    "permissions": ["contextMenus", "storage"],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

如果是Manifest V2，只需要把background字段改成"scripts": ["background.js"]，action改成"browser_action"就行。

关键注意点 #

• 如果你用的是Manifest V2，记得把chrome.action替换成chrome.browserAction，V2里没有chrome.action这个API。
• chrome.action.openPopup()在某些场景下可能失败（比如扩展被禁用、弹窗路径配置错误），加上catch捕获错误方便调试。
• 弹窗加载后读取文本并可选清空storage，能避免下次打开弹窗残留旧文本，体验更顺畅。

内容的提问来源于stack exchange，提问作者Emil Völkl