Chrome扩展点击后在新标签页打开并获取标签页数据的实现求助

我实现的Chrome扩展在popup模式下可正常获取当前标签页的数据，但希望点击扩展图标时，在新标签页打开扩展并保留相同的数据获取功能，目前遇到报错，相关代码及问题如下：

现有代码 #

manifest.json（原文件误写为manifest.json.js） #

{
    "manifest_version": 2,
    "name": "Hello World",
    "description": "A simple page-scraping extension for Chrome",
    "version": "1.0",
    "author": "@thomasforth",
    "background": {
        "scripts": ["popup.js"],
        "persistent": true
    },
    "permissions": [
        "tabs",
        "http://*/",
        "*://*/",
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "logo.png"
    }
}

payload.js #

// 发送页面标题作为Chrome消息
chrome.runtime.sendMessage(document.title);
console.log(document.title)

popup.js #

// 弹窗加载后向当前标签注入payload.js
window.addEventListener('load', function (evt) {
    chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
        file: 'payload.js'
    });;
});

// 监听payload.js的消息并写入popup.html
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: "popup.html", selected: false })
    chrome.runtime.onMessage.addListener(function (message) {
        document.getElementById('pagetitle').innerHTML = message;
    })
})

报错信息 #

Uncaught TypeError: Cannot set property 'innerHTML' of null
（原因：原代码中document指向的是background页面的上下文，而非新打开的popup.html页面，找不到pagetitle元素）

解决方案 #

核心问题梳理 #

1. manifest配置混乱：将popup.js作为background脚本，逻辑边界模糊
2. 消息监听上下文错误：试图在background页面操作新标签页的DOM元素
3. 脚本注入与消息传递的时机不匹配

步骤1：修正manifest.json配置 #

将background脚本替换为单独的background.js，移除popup.js的background配置：

{
    "manifest_version": 2,
    "name": "Hello World",
    "description": "A simple page-scraping extension for Chrome",
    "version": "1.0",
    "author": "@thomasforth",
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "tabs",
        "<all_urls>",
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "logo.png"
    }
}

步骤2：编写background.js处理核心逻辑 #

background页面作为中间层，负责监听图标点击、注入脚本、传递数据：

// background.js
chrome.browserAction.onClicked.addListener(async (activeTab) => {
    // 1. 向当前活跃标签注入payload脚本
    await chrome.tabs.executeScript(activeTab.id, { file: 'payload.js' });
    
    // 2. 打开新标签页，加载自定义展示页面
    const newTab = await chrome.tabs.create({ url: 'new-tab.html', selected: true });
    
    // 3. 监听payload发来的消息，转发给新标签页
    const messageHandler = (message, sender) => {
        if (sender.tab.id === activeTab.id) {
            chrome.tabs.sendMessage(newTab.id, message);
            // 完成后移除监听，避免重复触发
            chrome.runtime.onMessage.removeListener(messageHandler);
        }
    };
    chrome.runtime.onMessage.addListener(messageHandler);
});

步骤3：保留payload.js不变 #

// payload.js
chrome.runtime.sendMessage(document.title);
console.log(document.title);

步骤4：创建new-tab.html作为新标签展示页面 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面数据展示</title>
</head>
<body>
    <h2>当前标签页标题：</h2>
    <p id="pagetitle"></p>
    <script src="new-tab.js"></script>
</body>
</html>

步骤5：编写new-tab.js接收数据并渲染 #

// new-tab.js
// 监听来自background的消息，更新页面内容
chrome.runtime.onMessage.addListener((message) => {
    const titleElement = document.getElementById('pagetitle');
    if (titleElement) {
        titleElement.textContent = message;
    }
});

步骤6：删除原popup.js文件 #

不再使用popup模式，原popup.js可直接删除。

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