Chrome扩展Manifest V3中getSelection与chrome.tabs.create调用报错问题

开发了一款名为Gramotey的Chrome扩展（Manifest V3），期望通过快捷键（默认Alt+Shift+5，Mac端Command+Shift+5）触发后，获取当前页面选中的文本，打开新标签页访问gramota.ru的搜索页面，并将选中文本作为查询参数传入。但每次执行快捷键时控制台报错，无法实现预期功能。

相关代码 #

manifest.json #

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Gramotey",
    "content_scripts":[
        {
         "matches":["<all_urls>"],
         "js":["main.js"]
        }
    ],
    "background":
    {
    "service_worker": "background.js"
    },
    "commands": {
        "search_with_gramota": {
          "suggested_key": {
            "default": "Alt+Shift+5",
            "mac": "Command+Shift+5"
          },
          "description": "Общий поиск на грамоте"
        }
      },
      "permissions": ["scripting", "activeTab", "tabs"],
      "host_permissions": ["<all_urls>"]
}

background.js #

chrome.commands.onCommand.addListener((command) =>
{
    if (command == "search_with_gramota")
    {
        chrome.tabs.query({ currentWindow: true, active: true }, function (tab) {
            chrome.scripting.executeScript(
                {
                target: {tabId: tab[0].id},
                function: () => {
                    function makeUrl(){
                    var sUrl = "https://gramota.ru/poisk?query="
                    var selected = getSelection().toString()
                    sUrl =  sUrl + selected
                    return sUrl
                    }
                        chrome.tabs.create({url: makeUrl()});
                },

            });   
        });
    };
});

报错核心原因：在chrome.scripting.executeScript注入到页面的函数中，调用了chrome.tabs.create——这个API属于后台脚本的权限范围，页面上下文（注入的脚本）无法直接访问chrome.tabs模块，因此触发权限错误。

此外原代码存在潜在问题：直接将选中文本拼接到URL，未做URL编码，若文本包含空格、&、=等特殊字符，会导致查询参数失效或乱码。

修改background.js，让注入页面的脚本仅负责获取选中文本并返回，由后台脚本完成URL构建和新标签页创建：

chrome.commands.onCommand.addListener((command) => {
    if (command === "search_with_gramota") {
        chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
            const activeTab = tabs[0];
            chrome.scripting.executeScript({
                target: { tabId: activeTab.id },
                function: () => window.getSelection().toString().trim()
            }, (results) => {
                const selectedText = results?.[0]?.result;
                if (!selectedText) return;

                const encodedText = encodeURIComponent(selectedText);
                const searchUrl = `https://gramota.ru/poisk?query=${encodedText}`;
                
                chrome.tabs.create({ url: searchUrl });
            });
        });
    }
});

关键修改点 #

• 注入页面的函数简化为仅返回选中的文本，避免在页面上下文调用后台API
• 在后台脚本中接收注入脚本的返回结果，对查询参数做URL编码后调用chrome.tabs.create
• 添加空值判断：无选中文本时终止后续操作

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