Chrome扩展开发如何从回调函数获取返回值实现条件替换网页图片

问题原因 #

• chrome.runtime.sendMessage是Chrome扩展提供的异步API，调用后不会阻塞后续代码执行，你当前的代码在发送请求后立刻执行了图片替换逻辑，完全没用到background返回的判断结果，这是问题的核心根源。
• 你需要把图片替换的逻辑放到异步回调中处理，只有回调触发时才能拿到background返回的判断结果。

回调方案实现（并行处理，性能更高） #

调整逻辑将当前遍历的图片元素传入回调，在回调中根据返回结果判断是否替换：

// content.js
let filename = "block.jpg";
let imgs = document.getElementsByTagName('img');

function iletisim(callback, web_adr, targetImg) {
    chrome.runtime.sendMessage({text: web_adr}, function(response) {
        callback(response, targetImg);
    }); 
}

function gonder_al(needReplace, targetImg) {
    // 假设background返回布尔值，符合替换条件时执行替换
    // 若background返回的是对象，自行调整读取对应属性即可
    if (needReplace) {
        let url = chrome.extension.getURL(filename);
        targetImg.src = url;
    }
}

for (let imgElt of imgs) {
    iletisim(gonder_al, imgElt.src, imgElt);    
};

注意：for循环使用let声明遍历变量，可避免闭包问题，保证每个回调拿到的都是对应遍历项的图片元素。

async/await方案实现（串行处理，逻辑更直观） #

如果你更习惯类同步的写法，可以把异步请求包装成Promise，用async/await处理：

// content.js
let filename = "block.jpg";
let imgs = document.getElementsByTagName('img');

// 把sendMessage包装为Promise对象
function iletisim(web_adr) {
    return new Promise((resolve) => {
        chrome.runtime.sendMessage({text: web_adr}, resolve);
    })
}

async function processAllImgs() {
    for (let imgElt of imgs) {
        // 等待background返回判断结果后再执行后续逻辑
        const needReplace = await iletisim(imgElt.src);
        // 若background返回的是对象，自行调整读取对应属性即可
        if (needReplace) {
            imgElt.src = chrome.extension.getURL(filename);
        }
    }
}

// 执行图片处理逻辑
processAllImgs();

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