Chrome扩展连接异常：Unchecked runtime.lastError错误排查求助

问题根源分析 #

1. 脚本运行环境混淆：你在popup.html中直接引入了content.js和background.js，但这两个脚本的运行环境与popup完全不同：
   • content.js是注入到网页的内容脚本，仅能在目标网页环境中运行
   • background.js在Manifest V3中是Service Worker，属于后台独立运行环境
     强行在popup中加载这两个脚本，会导致消息传递的接收端逻辑完全错位。
2. 无效的消息连接：content.js中的chrome.runtime.connect在popup环境执行时，后台的onConnect监听是针对内容脚本的连接请求，因此找不到对应接收端，触发报错。
3. 无意义的初始消息发送：background.js启动时直接调用chrome.tabs.sendMessage，此时内容脚本可能未加载，且该逻辑本身无业务必要性，直接引发"接收端不存在"的错误。

修复方案 #

1. 重构Popup页面脚本 #

创建独立的popup.js，将原content.js中属于popup的交互逻辑迁移过来，修改popup.html仅加载该脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="shortenButton">Shorten URL</button>
    <div id="shortenedUrlContainer" class="messageContainer"></div>
    <script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function () {
    const shortenButton = document.getElementById("shortenButton");
    const shortenedUrlContainer = document.getElementById("shortenedUrlContainer");

    if (shortenButton) {
        shortenButton.addEventListener("click", function () {
            // 获取当前活跃标签页的URL
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                const currentUrl = tabs[0].url;
                // 向后台脚本发送缩短请求
                chrome.runtime.sendMessage({ action: "shortenUrl", url: currentUrl }, function(response) {
                    if (response && response.shortenedUrl) {
                        displayShortenedUrl(response.shortenedUrl);
                        copyToClipboard(response.shortenedUrl);
                        displayMessage('success', 'URL缩短成功！', response.shortenedUrl);
                    } else {
                        displayMessage('error', response?.error || 'URL缩短失败，请重试。');
                    }
                });
            });
        });
    } else {
        console.log('未找到缩短按钮');
    }
});

function displayMessage(type, message, shortenedUrl) {
    const messageContainer = document.createElement('div');
    messageContainer.textContent = message;
    messageContainer.className = type;
    messageContainer.style.position = 'fixed';
    messageContainer.style.top = '0';
    messageContainer.style.left = '0';
    messageContainer.style.zIndex = '9999';
    messageContainer.style.backgroundColor = type === 'success' ? 'green' : 'red';
    messageContainer.style.color = 'white';
    messageContainer.style.padding = '10px';

    if (shortenedUrl) {
        const urlContainer = document.createElement('div');
        urlContainer.textContent = '短链接：' + shortenedUrl;
        urlContainer.style.marginTop = '5px';
        messageContainer.appendChild(urlContainer);
    }

    document.body.appendChild(messageContainer);

    setTimeout(() => {
        document.body.removeChild(messageContainer);
    }, 3000);
}

function displayShortenedUrl(shortenedUrl) {
    if (shortenedUrlContainer) {
        shortenedUrlContainer.textContent = `短链接：${shortenedUrl}`;
        shortenedUrlContainer.style.display = 'block';
    }
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).catch(err => {
        console.error('复制失败: ', err);
    });
}

2. 清理Content脚本 #

保留content.js仅用于网页内的必要逻辑（如果不需要网页内触发缩短功能，可直接删除该文件）：

console.log('内容脚本已加载到当前网页');

// 如需网页内接收后台消息，可保留以下监听（可选）
// chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
//     if (request.action === "showNotification") {
//         displayMessage(request.type, request.message, request.shortenedUrl);
//     }
// });

// function displayMessage(type, message, shortenedUrl) {
//     // 网页内消息展示逻辑
// }

3. 修复后台脚本 #

移除无意义的初始消息发送，完善消息响应逻辑：

console.log('后台Service Worker已启动');

function shortenUrl(url, callback) {
    const accessToken = '你的Bitly访问令牌'; // 替换为实际令牌
    const apiUrl = 'https://api-ssl.bitly.com/v4/shorten';

    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${accessToken}`
        },
        body: JSON.stringify({
            long_url: url,
            group_guid: '你的Bitly组GUID' // 替换为实际组GUID
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        const shortenedUrl = data.id;
        callback({ shortenedUrl });
    })
    .catch(error => {
        console.error('URL缩短错误:', error.message);
        callback({ error: error.message });
    });
}

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.action === "shortenUrl") {
        shortenUrl(request.url, function(result) {
            sendResponse(result);
        });
        return true; // 标记异步响应
    }
});

4. 更新Manifest配置 #

在Manifest V3中正确配置后台Service Worker：

{
    "manifest_version": 3,
    "name": "URL Shortener",
    "version": "1.0",
    "description": "缩短当前网页URL并复制到剪贴板",
    "permissions": ["activeTab", "tabs", "clipboardWrite"],
    "action": {
        "default_popup": "popup.html",
        "default_icon": "./icons/icon128.png"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    }
}

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