Chrome扩展开发问题：获取页面表格值并传递至Popup

我正在开发一款Chrome扩展，需求是获取当前打开页面中表格/网格内的值并进行计算。单独用JS命令能拿到目标值：

document.getElementById("dgrid_2-row-0").getElementsByClassName("dgrid-cell dgrid-cell-padding dgrid-column-0 field-field1").item(0).innerText

但直接在带Popup的简单扩展里跑这段代码拿不到值，因为它属于当前打开的页面上下文，不是Popup的。所以我改用了带background的架构，但现在遇到两个问题：

• 扩展控制台看不到任何日志
• 不知道怎么把获取到的值传到index.html里展示

另外，我原本想在index.html里引入script.js处理结果，但修改后又遇到困惑：script.js里写chrome.tabs.executeScript无法弹出测试提示，但直接写alert('test')或者修改Popup背景色的代码能生效，搞不懂哪里错了。

现有代码文件 #

background.js #

chrome.action.onClicked.addListener((tab) => {
    console.log('Injecting content script(s)');
    //On Firefox document.body.textContent is probably more appropriate
    chrome.tabs.executeScript(tab.id,{
        code: '(function (){return document.getElementById("dgrid_2-row-0").getElementsByClassName("dgrid-cell dgrid-cell-padding dgrid-column-0 field-field1").item(0).innerText})();'
    },receiveText);
});

function receiveText(resultsArray){
    chrome.extension.getBackgroundPage().console.log('foo');
    //console.log(resultsArray[0]);
}

manifest.json #

{
  "name": "test",
  "action": {        
        "default_popup": "index.html",
        "default_title": "test" },
  "manifest_version": 3,
  "version": "0.1",
  "description": "",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

index.html（展示结果的空表格） #

<html>
<head>
    <title>I Have To Go Out!</title>
    <meta charset="utf-8">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
        <h2 class="text-center">Report</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Entrance</th>
                <th>Country</th>
                <th>Confirmed</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="date"></td>
                <td id="areaName"></td>
                <td id="latestBy"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

修改后的script.js（无法生效的代码） #

chrome.tabs.executeScript(tab.id,{
    code: 'alert("test")';
});

核心误解点及解决办法 #

1. Manifest V3 已废弃 chrome.tabs.executeScript #

你用的是Manifest V3，这个版本已经淘汰了chrome.tabs.executeScript，必须改用chrome.scripting.executeScript，而且要确保scripting权限已在manifest中声明（你已经加了，没问题）。

2. Service Worker 日志查看位置不对 #

background用的是service worker，它的控制台不是Popup的控制台，要在Chrome扩展管理页面里，点击你的扩展的「背景页」链接，打开单独的控制台才能看到日志。另外，chrome.extension.getBackgroundPage()在Manifest V3里对service worker无效，直接用console.log就行。

修改后的background.js：

chrome.action.onClicked.addListener(async (tab) => {
    console.log('Injecting content script(s)');
    try {
        const results = await chrome.scripting.executeScript({
            target: { tabId: tab.id },
            func: () => {
                return document.getElementById("dgrid_2-row-0")
                    .getElementsByClassName("dgrid-cell dgrid-cell-padding dgrid-column-0 field-field1")
                    .item(0).innerText;
            }
        });
        receiveText(results);
    } catch (err) {
        console.error('执行脚本出错:', err);
    }
});

function receiveText(resultsArray){
    console.log('获取到的值:', resultsArray[0].result);
    // 用storage存值，让Popup可以读取
    chrome.storage.local.set({ tableValue: resultsArray[0].result });
}

3. Popup脚本调用API的错误 #

• Popup脚本里的tab.id是未定义的，因为Popup没有直接拿到当前标签页对象，需要先通过chrome.tabs.query获取活跃标签页。
• Manifest V3里Popup调用scripting.executeScript需要正确的权限和参数。

修改后的Popup script.js（引入到index.html中）：

document.addEventListener('DOMContentLoaded', async () => {
    // 先读取已存储的表格值
    const storedData = await chrome.storage.local.get('tableValue');
    if (storedData.tableValue) {
        document.getElementById('date').textContent = storedData.tableValue;
        // 按需填充其他单元格
    }

    // 可添加按钮触发获取操作（替代action.onClicked）
    const getBtn = document.createElement('button');
    getBtn.textContent = '获取表格值';
    document.body.appendChild(getBtn);
    getBtn.addEventListener('click', async () => {
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        try {
            const results = await chrome.scripting.executeScript({
                target: { tabId: tab.id },
                func: () => {
                    return document.getElementById("dgrid_2-row-0")
                        .getElementsByClassName("dgrid-cell dgrid-cell-padding dgrid-column-0 field-field1")
                        .item(0).innerText;
                }
            });
            const value = results[0].result;
            document.getElementById('date').textContent = value;
            chrome.storage.local.set({ tableValue: value });
        } catch (err) {
            console.error('获取值出错:', err);
            alert('获取失败，请检查页面元素是否存在');
        }
    });
});

4. chrome.action.onClicked不会触发（当扩展有Popup时） #

如果你的扩展配置了default_popup，点击扩展图标会直接打开Popup，不会触发chrome.action.onClicked事件。要么去掉default_popup，改用点击图标触发background脚本；要么在Popup里加按钮让用户主动触发获取操作（上面的代码已经实现了这个逻辑）。

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