如何在Chrome侧边栏嵌入Google Tasks？配置遇403等问题求助

目标：开发一款可在任意网站使用的Chrome扩展，在侧边栏中操作Google Tasks，功能类似Gmail内置的Tasks侧边栏。

当前配置文件如下：

sidebar.html #

<!DOCTYPE html>
<html>
    <head>
        <title>Google Tasks</title>
        <style>
        html, body, iframe {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        </style>
    </head>
    <body>
        <iframe src="https://tasks.google.com/"></iframe> 
    </body>
</html>

manifest.json #

{
    "manifest_version": 3,
    "name": "Google Tasks Sidebar",
    "version": "1.0",
    "description": "Quick access to Google Tasks in the sidebar.",
    "permissions": [ "sidePanel" ],
    "host_permissions": [
        "https://tasks.google.com/*",
        "*://*/*"
    ],
    "action": {
        "default_title": "Toggle Google Tasks Sidebar"
    },
    "commands": {
        "toggle_sidebar": {
            "suggested_key": {
                "default": "Alt+V"
            },
            "description": "Toggle Google Tasks sidebar"
        }
    },
    "side_panel": {
        "default_path": "sidebar.html",
        "default_title": "Google Tasks"
    },
    "background": {
        "service_worker": "background.js"
    }
}

background.js #

let sidebarOpen = false;

chrome.commands.onCommand.addListener((command) => {
    if (command === "toggle_sidebar") {
        toggleSidebar();
    }
});

chrome.action.onClicked.addListener(() => {
    toggleSidebar();
});

function toggleSidebar() {
    if (sidebarOpen) {
        // Close the sidebar if it's already open
        chrome.sidePanel.setOptions({ enabled: false });
        sidebarOpen = false;
    } else {
        // Open the sidebar
        chrome.sidePanel.setOptions({
            path: "sidebar.html",
            enabled: true
        });
        sidebarOpen = true;
    }
}

遇到的错误 #

1. 使用https://tasks.google.com/作为iframe源时，返回403错误：

Google
403. That’s an error.
We're sorry, but you do not have access to this document. That’s all we know.

2. 使用嵌入URL https://tasks.google.com/embed/ origin=https://mail.google.com&fullWidth=1时，提示：

tasks.google.com refused to connect.

疑问：配置是否存在错误？如何让扩展申请权限以在侧边栏加载Google Tasks UI？

原因分析 #

• 直接加载https://tasks.google.com/会触发Google的权限校验：侧边栏页面的源是扩展自身的chrome-extension://[ID]，不在Google Tasks的合法访问源列表中，导致403。
• 嵌入URL参数配置错误：Gmail的嵌入链接带有特定的origin白名单校验，非官方域名无法直接复用该格式。

解决方案 #

1. 修正iframe嵌入参数 #

使用Google Tasks官方支持的嵌入格式，替换sidebar.html中的iframe代码：

<iframe src="https://tasks.google.com/embed/?origin=chrome-extension://__MSG_@@extension_id__&fullWidth=1" allow="clipboard-write"></iframe>

• origin=chrome-extension://__MSG_@@extension_id__：利用扩展内置占位符自动填充你的扩展ID，让Google Tasks识别合法来源。
• allow="clipboard-write"：确保Tasks的剪贴板操作功能正常。

2. 更新manifest权限配置 #

修改manifest.json，添加内容安全策略并精简权限：

{
    // ... 保留原有其他配置
    "host_permissions": [
        "https://tasks.google.com/*"
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'; frame-src https://tasks.google.com/"
    }
}

• 移除不必要的*://*/*权限，仅保留Tasks域名访问权限。
• 新增content_security_policy，明确允许扩展页面加载Tasks的iframe。

3. 简化侧边栏切换逻辑 #

Chrome的sidePanel API自带切换方法，无需手动维护状态变量，修改background.js为：

chrome.commands.onCommand.addListener((command) => {
    if (command === "toggle_sidebar") {
        chrome.sidePanel.toggle({ windowId: chrome.windows.WINDOW_ID_CURRENT });
    }
});

chrome.action.onClicked.addListener(() => {
    chrome.sidePanel.toggle({ windowId: chrome.windows.WINDOW_ID_CURRENT });
});

4. 重新加载扩展生效 #

修改配置后，在Chrome扩展管理页面点击"重新加载"按钮，确保新配置生效。

额外说明 #

扩展会自动共享Chrome的Google账号登录会话，无需额外申请权限，只要用户已在Chrome中登录Google账号，Tasks就能正常加载使用。

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