Chrome图片替换扩展开发报错求助：连接失败与读取status属性错误

报错信息 #

Error handling response: TypeError: Cannot read properties of undefined (reading 'status')
at chrome-extension://imdbhcgdakfhfibpiomdfjippgncdfkk/options.js:18:28
options.html:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

问题定位 #

1. Manifest配置错误：content_scripts里指定的JS文件是background.js，但实际内容脚本是content.js，导致内容脚本未注入网页，没有消息接收端。
2. 表单提交未阻止默认行为：选项页的submit按钮点击后触发页面刷新，中断后续逻辑。
3. setTimeout参数顺序错误：把延迟时间和回调函数写反，导致滚动/点击事件的延迟替换逻辑无效。
4. 未持久化用户设置：用户选择的图片URL未保存到chrome.storage，刷新页面后恢复默认值。
5. 消息发送未处理错误：发送消息时未判断标签页是否存在，也没捕获异常，导致回调读取response.status时出现undefined报错。

修复步骤及完整代码 #

1. 修正manifest.json #

确保内容脚本正确注入：

{
    "manifest_version": 3,
    "name": "Image replacer.",
    "version": "1.0.0",
    "description": "Een grappige extensie om je vrienden te pranken of om je afbeeldingen te veranderen",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "service.js"
    },
    "permissions": ["storage", "tabs"],
    "options_page": "options.html"
}

2. 重构options.js #

修复表单逻辑，添加存储和错误处理：

const uploadbox = document.getElementById("file");
const urlbox = document.getElementById("url");
const optionsForm = document.getElementById("optionsForm");

// 文件上传处理
uploadbox.addEventListener("change", async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const imageUrl = window.URL.createObjectURL(file);
    await saveAndSendImageUrl(imageUrl);
});

// URL提交处理（阻止页面刷新）
optionsForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const url = urlbox.value.trim();
    if (!url) return;
    await saveAndSendImageUrl(url);
    urlbox.value = "";
});

// 统一保存URL并发送消息到内容脚本
async function saveAndSendImageUrl(imageUrl) {
    // 保存到本地存储
    await chrome.storage.local.set({ targetImageUrl: imageUrl });
    
    // 获取当前活跃标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab?.id) return;
    
    // 发送消息并处理错误
    try {
        const response = await chrome.tabs.sendMessage(tab.id, { url: imageUrl });
        console.log(response?.status || "图片URL已更新");
    } catch (err) {
        console.error("更新失败：", err);
    }
}

3. 优化content.js #

修复延迟逻辑，添加存储读取和懒加载图片处理：

let imageurl = "https://images0.persgroep.net/rcs/BZ4jhY7o6YDVdFfjSc2u1PST1bU/diocontent/118185069/_fitwidth/694/?appId=21791a8992982cd8da851550a453bd7f&quality=0.8";

// 初始化：从存储读取保存的URL
async function init() {
    const savedData = await chrome.storage.local.get("targetImageUrl");
    if (savedData.targetImageUrl) {
        imageurl = savedData.targetImageUrl;
        replaceAllImages();
    }
}

// 替换所有图片（包括懒加载属性）
function replaceAllImages() {
    document.querySelectorAll("img").forEach(img => {
        img.src = imageurl;
        if (img.srcset) img.srcset = imageurl;
        if (img.dataset.src) img.dataset.src = imageurl;
        if (img.dataset.srcset) img.dataset.srcset = imageurl;
    });
}

// 滚动事件处理：修复setTimeout参数顺序
let delayCount = 0;
window.addEventListener("scroll", () => {
    delayCount++;
    setTimeout(replaceAllImages, 10 * delayCount);
});

// 点击事件处理
window.addEventListener("click", () => {
    delayCount++;
    setTimeout(replaceAllImages, 10 * delayCount);
});

// 接收选项页的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.url) {
        imageurl = request.url;
        replaceAllImages();
        sendResponse({ status: "done" });
    }
});

// 启动初始化
init();

验证修复 #

1. 重新加载扩展，打开任意网页，默认图片会替换所有img标签。
2. 打开选项页，上传本地图片或输入图片URL，提交后当前网页的图片立即更新。
3. 刷新网页，之前设置的图片URL会自动加载，无需重新设置。

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