Chrome扩展如何通过JS获取当前活动标签页网页文本并存入变量

以下方案基于当前Chrome官方要求的Manifest V3规范编写，全程不需要复杂依赖，新手按步骤配置即可跑通。

1. 基础文件结构 #

你需要在本地新建一个文件夹作为扩展目录，里面放3个文件：

• manifest.json：扩展核心配置文件，声明权限和扩展基本信息
• popup.html：点击扩展图标弹出的页面
• popup.js：实现抓取逻辑的脚本文件

2. 编写manifest配置 #

把以下内容写入manifest.json，声明抓取页面需要的权限：

{
  "manifest_version": 3,
  "name": "页面时间抓取工具",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://www.utctime.net/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

配置说明：activeTab允许扩展访问用户当前激活的标签页，scripting权限允许扩展向页面注入执行脚本，host_permissions限定扩展只在utctime.net域名下生效，符合Chrome安全规则。

3. 编写弹出页 #

把以下内容写入popup.html，做一个触发抓取的按钮：

<!DOCTYPE html>
<html style="width: 200px; padding: 12px;">
<body>
  <button id="grabBtn" style="width: 100%; padding: 6px;">抓取当前页时间</button>
  <script src="popup.js"></script>
</body>
</html>

4. 核心抓取逻辑 #

把以下内容写入popup.js，实现活动标签页识别、DOM内容抓取、结果存入变量的全流程：

// 定义变量存储抓取到的目标文本
let targetPageTime = "";

// 绑定按钮点击事件
document.getElementById("grabBtn").addEventListener("click", async () => {
  // 第一步：获取当前窗口的活动标签页
  const [currentActiveTab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  // 第二步：向目标标签页注入脚本，在页面上下文执行DOM查询
  const [scriptRunResult] = await chrome.scripting.executeScript({
    target: { tabId: currentActiveTab.id },
    func: () => {
      // 以下代码直接在目标网页内运行，可直接访问页面DOM
      // 针对utctime.net的IST时间页，定位id为time的时间展示元素
      const timeDom = document.querySelector("#time");
      return timeDom ? timeDom.textContent.trim() : "";
    }
  });

  // 第三步：将抓取结果存入预先定义的变量
  targetPageTime = scriptRunResult.result;
  
  // 可在扩展控制台打印验证结果
  console.log("已获取页面时间数据：", targetPageTime);
});

调试方法 #

1. 打开Chrome浏览器，地址栏输入chrome://extensions/进入扩展管理页
2. 打开页面右上角的「开发者模式」开关
3. 点击页面左上角的「加载已解压的扩展程序」，选中你刚才放3个文件的文件夹完成加载
4. 打开https://www.utctime.net/ist-indian-time-now页面，点击扩展图标，再点击弹出页的抓取按钮，即可在扩展的控制台看到存入变量的时间数据

常见问题说明 #

• 扩展的popup运行在独立的沙箱上下文，无法直接访问网页DOM，必须通过chrome.scripting.executeScript注入脚本的方式读取页面内容，这是Chrome扩展的安全机制限制
• 如果需要抓取其他站点的内容，只需要修改host_permissions里的域名匹配规则，同时修改注入脚本里的DOM选择器即可
• 不要使用已经被官方淘汰的Manifest V2写法，新版Chrome已经完全禁止V2扩展上架和运行

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