谷歌扩展开发：表格单元格文本复制到剪贴板异常问题

问题根源 #

1. 事件绑定错误：你在设置onclick时直接执行了copy2Clipboard(text)，这会导致循环过程中函数立即被调用，而非点击时触发。循环结束后，所有单元格的点击事件实际上都绑定到了最后一次循环的text值。
2. 函数参数处理错误：copy2Clipboard函数中尝试访问itemName.innerHTML，但你传入的text已经是cell.innerHTML的结果，无需再次取innerHTML。

修复代码及说明 #

修改后的表格遍历代码

let r = 0;
while (row = table.rows[r++]) {
    let c = 0;
    while (cell = row.cells[c++]) {
        // 只处理第二行及以后的第二列单元格
        if (r >= 2 && c === 2) {
            // 用textContent获取纯文本，避免复制HTML标签
            const text = cell.textContent;
            // 创建可点击元素，通过箭头函数保存当前text的上下文
            const clickableEl = document.createElement('b');
            clickableEl.textContent = text;
            clickableEl.onclick = () => copy2Clipboard(text);
            // 替换单元格内容
            cell.innerHTML = '';
            cell.appendChild(clickableEl);
        }
    }
}

修改后的剪贴板复制函数

function copy2Clipboard(itemName) {
    // 直接写入传入的纯文本到剪贴板
    navigator.clipboard.writeText(itemName)
        .then(() => {
            console.log('复制成功:', itemName);
        })
        .catch(err => {
            console.error('复制失败:', err);
        });
}

核心修改点 #

• 改用textContent获取单元格的纯文本内容，避免复制不必要的HTML标签。
• 通过创建DOM元素并直接绑定onclick回调，利用箭头函数的闭包特性保存当前循环的text值，彻底解决变量覆盖问题。
• 移除原函数中冗余的返回值逻辑，因为无需返回函数字符串来绑定事件。
• 添加剪贴板操作的Promise处理，便于调试复制成功/失败的状态。

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