Chrome扩展中contentScript.js数据对接Chart.js的问题求助

核心问题 #

1. 消息监听参数顺序错误：chrome.runtime.onMessage.addListener的回调参数顺序应为(message, sender, sendResponse)，你当前写反了参数顺序，导致无法正确接收Background传来的数据。
2. 脚本作用域混淆：你在content_scripts中配置的脚本是注入到目标网站页面环境中的，而Popup的index.html里的<canvas>属于Popup自身的页面DOM，注入到网站的脚本无法访问Popup的DOM元素，自然无法初始化图表。

修正方案（推荐Popup直接与Background通信） #

这种方式更直接，适合Popup内展示图表的场景：

1. 调整Manifest配置 #

移除不必要的重复脚本引用，区分注入网页的脚本与Popup专用脚本：

{
    "manifest_version": 3,
    "name": "Data Fetch",
    "version": "0.1.0",
    "description": "Get data from api",
    "permissions": ["tabs", "cookies", "storage","activeTab"],
    "host_permissions": ["https://*.site.com/*"],
    "background": {
        "service_worker": "./background.js"
    },
    // 若无需操作目标网站DOM，可删除content_scripts段
    "content_scripts": [
        {
            "matches": ["https://*.site.com/*"],
            "js": ["contentScript.js"]
        }
    ],
    "action": {
        "default_popup": "index.html",
        "default_title": "Data Stats",
        "default_icon": "images/data-icon.png"
    }
}

2. 修改Background.js，添加消息监听响应Popup请求 #

将主动推送改为等待Popup请求再返回数据：

// 假设已通过API获取到data1、data2、data3
const data = {
  data1: data1,
  data2: data2,
  data3: data3
};

console.log("data", data);

// 监听Popup的数据请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GET_METRICS_DATA") {
    sendResponse({ data: data });
  }
});

3. 新建Popup专用脚本（popup.js） #

替换原contentScript.js在Popup中的引用，负责请求数据并初始化Chart：

// Popup加载完成后发起数据请求
document.addEventListener('DOMContentLoaded', () => {
  chrome.runtime.sendMessage({ type: "GET_METRICS_DATA" }, (response) => {
    if (!response?.data) return;
    
    const { data1, data2, data3 } = response.data;
    
    // 初始化柱状图
    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: ["Message1", "Message2", "Message3"],
            datasets: [
                {
                    label: "User Info",
                    backgroundColor: ["#8e5ea2", "#3cba9f", "#e8c3b9"],
                    data: [data1, data2, data3]
                },
            ]
        },
        options: {
            legend: { display: true },
            title: {
                display: true,
                text: 'Your Metrics'
            }
        }
    });
  });
});

4. 更新Popup的index.html #

引用新的Popup专用脚本：

<!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>Data</title>
    <script src="./chart.min.js"></script>
</head>
<body>
    <div>
        <h2>Data Analytics</h2>
        <hr>
        <div style="width: 30rem; height:20rem;display:flex;">
            <canvas id="bar-chart"></canvas>
        </div>
    </div>
    <!-- 引用Popup专用脚本 -->
    <script src="./popup.js"></script>
</body>
</html>

额外注意事项 #

• 确保chart.min.js文件路径正确，放置在扩展根目录下
• 若data1/data2/data3是异步API获取的，需在Background中确保数据加载完成后再响应Popup请求
• 若需通过注入网页的content script处理数据，可让content script将数据发送到Background，再由Background转发给Popup

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