Chrome扩展：实现点击按钮获取当前标签页HTML元素求助

以下是修改后的各文件代码：

1. popup.html（添加触发按钮） #

在弹窗中添加按钮，作为触发操作的入口：

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <button id="getHtmlBtn">获取当前页面HTML</button>
  <script type="text/javascript" src="popup.js"></script>
</body>
</html>

2. popup.js（处理按钮点击逻辑） #

监听按钮点击事件，获取当前活跃标签页并注入脚本执行HTML获取操作：

document.getElementById('getHtmlBtn').addEventListener('click', async () => {
  // 获取当前窗口的活跃标签页
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 向目标标签页注入脚本
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["parse_page.js"]
  });
  
  // 可选：执行后关闭弹窗
  window.close();
});

3. background.js（移除旧触发逻辑） #

原图标点击触发逻辑不再需要，可简化为：

// 移除原chrome.action.onClicked监听，改用弹窗按钮触发

4. parse_page.js（调整HTML获取逻辑） #

若需获取完整页面HTML而非特定元素，修改为：

// 获取整个页面的HTML内容
const fullPageHtml = document.documentElement.outerHTML;
alert(fullPageHtml);

// 若仍需保留原特定元素获取逻辑，可保留以下代码：
// var ps1 = document.getElementsByClassName('s1wl91l5-4 cBVHJG')[0].innerHTML;  
// window.alert(ps1);

补充说明 #

• 原有权限配置（activeTab、scripting）无需修改，已满足功能需求。
• 若想优化体验，可将alert改为复制HTML到剪贴板，只需替换alert代码为navigator.clipboard.writeText(fullPageHtml).then(() => alert('HTML已复制到剪贴板'))。

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