Chrome扩展V3中popup.js调用fetch返回空响应问题排查

问题概述 #

开发Chrome Extension V3时，启用代码中注释的预览内容提取逻辑后，搜索功能完全失效，控制台无法输出fetch返回的response对象，也无法获取目标页面的HTML内容。

核心原因分析 #

1. CORS跨域限制：Popup页面属于普通网页上下文，直接调用fetch请求外部网站会触发浏览器的CORS策略，目标网站未允许Popup的源跨域访问，导致请求静默失败（无报错提示）。
2. 异步逻辑顺序错误：原代码中在forEach内发起异步fetch请求后，立即执行结果渲染逻辑，此时fetch请求尚未完成，results数组为空，导致页面无内容。
3. 代码语法错误：console.log(response)写在return response.text()之后，永远不会执行，无法调试请求结果。

修复方案 #

1. 配置扩展主机权限 #

在manifest.json中添加目标网站的主机权限，允许后台Service Worker发起跨域请求：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "host_permissions": [
    "https://www.ncbi.nlm.nih.gov/*",
    "https://www.biorxiv.org/*",
    "https://www.medrxiv.org/*",
    "https://www.google.com/*"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 重构请求逻辑（使用Service Worker代理） #

将Popup中的fetch请求转移到Service Worker中执行，避免CORS限制：

修改popup.js的请求与渲染逻辑

document.addEventListener("DOMContentLoaded", function () {
    var form = document.getElementById("search-form");
    var container = document.getElementById("search-results");

    form.addEventListener("submit", function (event) {
        event.preventDefault();
        var title = form.elements.title.value;
        var title2 = title.replace(/ /g, "+");
        var queries = [
            { url: `https://www.ncbi.nlm.nih.gov/pmc/?term=${title}`, title: "NCBI PMC" },
            { url: `https://www.biorxiv.org/search/${title}`, title: "bioRxiv" },
            { url: `https://www.medrxiv.org/search/${title}`, title: "medRxiv" },
            { url: `https://www.google.com/search?q=${title2}+filetype:pdf`, title: "PDF Search" }
        ];

        // 用Promise.all处理所有异步请求，确保全部完成后再渲染
        Promise.all(queries.map(query => {
            return chrome.runtime.sendMessage({
                action: 'fetchPage',
                url: query.url
            }).then(html => {
                if (!html) {
                    return {
                        title: query.title,
                        url: query.url,
                        preview: "无法获取预览内容"
                    };
                }
                // 解析HTML并提取预览
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, "text/html");
                let lines = [];
                // 针对不同网站做针对性提取（示例）
                switch(query.title) {
                    case "NCBI PMC":
                        lines = Array.from(doc.querySelectorAll(".rprt p")).slice(0,5).map(el => el.innerText);
                        break;
                    case "bioRxiv":
                        lines = Array.from(doc.querySelectorAll(".search-result__abstract")).slice(0,5).map(el => el.innerText);
                        break;
                    default:
                        lines = Array.from(doc.querySelectorAll("p")).slice(0,5).map(el => el.innerText);
                }
                // 转义HTML特殊字符，避免渲染问题
                const preview = escapeHtml(lines.join("\n"));
                return {
                    title: query.title,
                    url: query.url,
                    preview: preview || "无预览内容"
                };
            }).catch(err => {
                return {
                    title: query.title,
                    url: query.url,
                    preview: "请求失败"
                };
            });
        })).then(results => {
            // 生成结果HTML
            let resultsHTML = "";
            results.forEach(result => {
                resultsHTML += `<div class="result">
                    <h2><a href="#" data-url="${result.url}">${result.title}</a></h2>
                    <p>${result.preview}</p>
                </div>`;
            });
            container.innerHTML = resultsHTML;
        });

        // 链接点击事件处理
        container.addEventListener("click", function (event) {
            var target = event.target;
            if (target.tagName === "A") {
                event.preventDefault();
                var url = target.dataset.url;
                chrome.tabs.create({url: url, active: true});
            }
        });
    });

    // HTML特殊字符转义函数
    function escapeHtml(text) {
        return text.replace(/[&<>"']/g, match => {
            const escapeChars = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return escapeChars[match];
        });
    }
});

创建service-worker.js处理请求

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'fetchPage') {
        fetch(request.url)
            .then(response => {
                if (!response.ok) throw new Error("请求失败");
                return response.text();
            })
            .then(html => sendResponse(html))
            .catch(err => sendResponse(null));
        return true; // 标记为异步响应
    }
});

更优预览生成方案 #

1. 网站针对性提取：不同学术网站的搜索结果DOM结构差异大，不要通用提取所有<p>标签，而是针对每个网站的结果区域类名提取内容（如上述代码中的switch分支），提升预览准确性。
2. 错误处理机制：为请求失败、HTML解析失败等情况设置默认提示，避免页面出现空白或乱码。
3. 内容安全处理：必须转义HTML特殊字符，防止XSS攻击和页面渲染异常。
4. 性能优化：限制提取的内容长度（如最多5行），避免DOM解析和渲染耗时过长。

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