Chrome Manifest V3扩展background向popup传值报window未定义问题求助

开发者阿泽

2026-8-30

问题根因

window is undefined报错的直接原因是你使用的Manifest V3规范中，后台脚本运行在Service Worker独立环境，不存在普通网页的window全局对象。除此之外代码还有4处会导致功能失效的问题：

配置文件名写错：扩展识别的后台配置文件名固定为manifest.json，你命名成了manifest.js
消息传递格式错误：content script发送消息时只传了字符串值，没有传结构化对象，后台脚本无法读取request.text属性
API使用错误：chrome.extension.getBackgroundPage()是Manifest V2的废弃API，V3环境下无法通过该方法获取后台上下文
时序&生命周期问题：popup.js仅在弹窗打开的瞬间执行一次，就算拿到初始值也无法实时同步输入框的最新内容；且Service Worker会随时休眠，存在全局变量里的值会被清空；另外你把popup.js放在head标签内，执行时DOM还未渲染，document.getElementById('p-id')会拿到null触发报错。

可直接运行的修复代码

不需要用后台脚本做消息中转，直接用chrome.storage做数据持久化+实时同步，稳定性更高也符合V3开发规范：

首先修正配置文件，重命名为manifest.json，补充storage权限，移除多余的background配置：

{
    "name": "bla bla",
    "version": "1.0.0",
    "manifest_version": 3,
    "description": "bla bla",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["contentscript.js"]
        }
    ],
    "permissions": ["activeTab", "storage"],
    "action": {
        "default_icon": "extension-logo.png",
        "default_popup": "popup.html"
    }
}

注：该方案不需要background.js，可以直接删除该文件，避免额外报错

修正contentscript.js，增加元素判空，输入变化时将值存入storage：

const inputtext = document.getElementById("search_form_input");
// 避免匹配到无目标输入框的页面时触发报错
if (inputtext) {
    inputtext.addEventListener('input', () => {
        const text_input = inputtext.value;
        console.log(text_input);
        // 将输入值存入本地存储
        chrome.storage.local.set({ inputText: text_input });
    });
}

修正popup.html，将脚本标签移到body末尾，保证DOM加载完成后再执行JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph</title>
    <script src="libraries/p5.js" type="text/javascript"></script>
</head>
<body>
    <h1>Paragraph Replacer</h1>
    <p id="p-id">hhhh</p>
    <!-- 脚本放DOM最后，避免拿不到元素 -->
    <script src="popup.js" type="text/javascript"></script>
</body>
</html>

重写popup.js，读取存储值+监听存储变化实时更新内容：

const p_id = document.getElementById('p-id');

// 弹窗打开时先读取一次已存储的最新值
chrome.storage.local.get('inputText', (result) => {
    if (result.inputText) {
        p_id.innerHTML = result.inputText;
    }
});

// 监听存储变化，输入框更新时实时同步到弹窗
chrome.storage.local.onChanged.addListener((changes) => {
    if (changes.inputText) {
        p_id.innerHTML = changes.inputText.newValue;
    }
});

修复完成后重新加载扩展即可正常运行，打开弹窗时会实时展示页面输入框的最新输入内容。

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