Chrome扩展中chrome.tabs.executeScript执行失败问题咨询

我正在开发一款Chrome扩展，按下快捷键可唤起搜索栏，按下回车键时显示模拟结果。现有文件如下：

background.js（可正常唤起搜索栏）

chrome.commands.onCommand.addListener((command) => {
    if(command === "launch") {
        chrome.tabs.executeScript({
            file: "insertSearchBar.js"
        });
    }
});

insertSearchBar.js（按下回车时无法加载结果视图）

var div=document.createElement("div");
var innerDiv=document.createElement("input");
// 省略创建和插入DOM的代码...
div.addEventListener('keypress', function(e) {
    if(e.key == "Enter") {
        chrome.tabs.executeScript({
            file: "insertSearchResultView.js"
        });
    }
})

insertSearchResultView.js

var div=document.createElement("div");
document.body.appendChild(div);
var innerDiv=document.createElement("input");
div.appendChild(innerDiv);

问题原因 #

insertSearchBar.js是注入到网页中的Content Script，这类脚本运行在与网页隔离的上下文，没有权限调用chrome.tabs.executeScript——这个API属于扩展特权API，仅能在后台脚本、Popup页、选项页等扩展自身的上下文中使用。

解决方法 #

方法1：直接在当前Content Script中执行结果视图逻辑

不需要额外注入新脚本，把insertSearchResultView.js的代码直接整合到回车事件的回调里：

修改insertSearchBar.js：

var div=document.createElement("div");
var innerDiv=document.createElement("input");
// 省略创建和插入DOM的代码...
div.addEventListener('keypress', function(e) {
    if(e.key == "Enter") {
        // 直接执行结果视图的创建逻辑
        var resultDiv=document.createElement("div");
        document.body.appendChild(resultDiv);
        var resultInnerDiv=document.createElement("input");
        resultDiv.appendChild(resultInnerDiv);
    }
})

方法2：通过消息通知后台脚本完成注入

让Content Script发送消息给后台，由后台脚本调用chrome.tabs.executeScript完成注入：

1. 修改insertSearchBar.js，替换原有的chrome.tabs.executeScript为消息发送：

var div=document.createElement("div");
var innerDiv=document.createElement("input");
// 省略创建和插入DOM的代码...
div.addEventListener('keypress', function(e) {
    if(e.key == "Enter") {
        chrome.runtime.sendMessage({action: "insertResultView"}, (response) => {
            // 可添加回调逻辑，比如确认注入成功
        });
    }
})

2. 在background.js中添加消息监听器：

chrome.commands.onCommand.addListener((command) => {
    if(command === "launch") {
        chrome.tabs.executeScript({
            file: "insertSearchBar.js"
        });
    }
});

// 新增消息监听
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if(message.action === "insertResultView") {
        // sender.tab.id可获取当前标签页ID
        chrome.tabs.executeScript(sender.tab.id, {
            file: "insertSearchResultView.js"
        });
        sendResponse({status: "success"});
    }
});

方法3：适配Manifest V3（如果使用新版本扩展）

如果你的扩展采用Manifest V3，chrome.tabs.executeScript已被废弃，需改用chrome.scripting.executeScript，同时要在manifest.json中声明scripting权限：

1. 更新manifest.json：

{
  "manifest_version": 3,
  "permissions": ["commands", "scripting"],
  "host_permissions": ["<all_urls>"],
  // 其他配置...
}

2. 修改background.js中的注入逻辑：

chrome.commands.onCommand.addListener(async (command) => {
    if(command === "launch") {
        const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
        chrome.scripting.executeScript({
            target: {tabId: tab.id},
            files: ["insertSearchBar.js"]
        });
    }
});

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    if(message.action === "insertResultView") {
        chrome.scripting.executeScript({
            target: {tabId: sender.tab.id},
            files: ["insertSearchResultView.js"]
        });
        sendResponse({status: "success"});
    }
});

内容的提问来源于stack exchange，提问作者Avi Kumar Singh