如何在scripting.executeScript注入的函数中调用Chrome API

三个报错本质都是Chrome扩展的上下文隔离机制导致的：

• scripting.executeScript的args参数会通过结构化克隆算法序列化后传递到页面上下文，函数不属于可序列化类型，因此无法把background里定义的download方法传到注入脚本里。
• 注入脚本运行在目标网页的独立隔离世界，和background的运行上下文完全隔离，既访问不到background里定义的普通函数，也没有权限直接调用chrome.downloads这类需要扩展权限的API——这类API仅能在扩展自身的上下文（background service worker、popup页、配置页）中调用。

1. 先确认manifest.json权限配置（Manifest V3） #

必须声明所需的权限和主机匹配规则，示例配置：

{
  "manifest_version": 3,
  "name": "页面下载按钮扩展",
  "version": "1.0",
  "permissions": ["scripting", "downloads", "tabs"],
  "host_permissions": ["<all_urls>"], // 可替换成你实际需要注入的站点域名
  "background": {
    "service_worker": "background.js"
  }
}

2. 调整代码逻辑：通过消息通信触发下载 #

核心思路是：注入脚本只负责DOM渲染（创建按钮、绑定点击事件），点击按钮时不直接调用下载API，而是通过Chrome扩展的消息通道给background发请求，由有权限的background上下文执行chrome.downloads.download逻辑。
修改后的background.js代码如下：

// background.js
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        // 仅注入按钮渲染逻辑，不需要传递函数参数
        chrome.scripting.executeScript({
            target: {tabId: tabId},
            func: addButtons
        })
    }
})

// 监听来自注入脚本的消息，执行实际下载逻辑
chrome.runtime.onMessage.addListener((message) => {
    if (message.type === 'EXEC_DOWNLOAD') {
        chrome.downloads.download({
            url: message.downloadUrl,
            filename: message.fileName || "test.jpg"
        });
    }
})

// 以下函数会被注入到目标页面执行
function addButtons() {
    // 替换成你实际获取帖子列表的逻辑
    let posts = document.querySelectorAll('替换为帖子元素的CSS选择器')
    
    for (let i = 0; i < posts.length; i++) {
        const post = posts[i];
        let url = tryQuickUrl(post); // 保留你原有的提取下载地址的逻辑
        // 避免重复给同一个帖子加按钮
        if (post.querySelector('.custom-download-btn')) continue;

        let button = document.createElement("button");
        button.innerText = "Download";
        button.className = "custom-download-btn";
        
        // 点击按钮时向background发消息，触发下载
        button.onclick = function() { 
            chrome.runtime.sendMessage({
                type: 'EXEC_DOWNLOAD',
                downloadUrl: url,
                fileName: "test.jpg"
            });
        };

        post.appendChild(button);
    }
}

可选优化 #

如果目标站点是动态加载内容（比如无限滚动加载新帖子），可以在addButtons函数里添加MutationObserver监听DOM变化，新帖子渲染完成后自动给新节点追加下载按钮，不需要刷新页面。

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