Thunderbird Manifest V3扩展：邮件中无法加载扩展资源（安全限制）

问题概述 #

开发Thunderbird Manifest V3 WebExtension时，尝试向邮件回复中注入图片或CSS，已将扩展资源（如图标）打包并在web_accessible_resources中声明，但Thunderbird阻止资源加载，报错：

Security Error: Content at imap://user@imap.gmail.com:993/fetch/OMISSIS may not load or link to moz-extension://extension-id/images/icon.png.

复现步骤 #

1. 在manifest.json中声明资源：

{
    "manifest_version": 3,
    ...
    "web_accessible_resources": [{
        "resources": ["images/icon.png"],
        "matches": ["<all_urls>"]
    }]
}

2. 在邮件撰写脚本中尝试加载资源：

const imgUrl = browser.runtime.getURL("images/icon.webp");
document.body.innerHTML = `<img src="${imgUrl}">`;

预期行为 #

已在web_accessible_resources中明确声明的资源应正常加载。

尝试过的无效方案 #

• 向manifest.json添加CSP指令（无效果）
• 使用内联Base64编码资源（仅适用于小资源，大资源不适用）
• 修改web_accessible_resources配置指定extension_ids（无效果）：

"web_accessible_resources": [
    {
        "resources": ["images/icon.png"],
        "extension_ids": ["myextesionid@test.com"]
    }
]

环境 #

• Thunderbird 128+（Manifest V3）
• 本地扩展测试

可行解决方案 #

1. 修正web_accessible_resources匹配规则 #

Thunderbird的邮件页面使用imap://、moz-msg://等特殊协议，<all_urls>无法完全覆盖这类上下文，需明确添加协议匹配，同时注意资源路径的后缀一致性（你代码中用了icon.webp但声明的是icon.png，这也是潜在问题）：

{
    "manifest_version": 3,
    ...
    "web_accessible_resources": [
        {
            "resources": ["images/*"],
            "matches": ["imap://*/*", "moz-msg://*/*", "mailto:*"]
        }
    ]
}

2. 使用官方推荐的composeScripts注入 #

Thunderbird针对邮件撰写场景提供了composeScripts API，相比直接操作DOM更兼容安全策略：
首先在manifest.json中声明：

"composeScripts": [
    {
        "matches": ["*://*/*"],
        "js": ["compose-script.js"],
        "css": ["styles/injected.css"]
    }
]

然后在compose-script.js中加载资源：

// 确保资源路径与声明一致
const imgUrl = browser.runtime.getURL("images/icon.png");
const img = document.createElement("img");
img.src = imgUrl;
document.body.appendChild(img);

3. 检查扩展ID与资源路径 #

• 本地测试时，可通过browser.runtime.id获取真实扩展ID，替换extension_ids中的值
• 确保代码中引用的资源文件名、后缀与web_accessible_resources中声明的完全一致

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