如何通过Chrome扩展程序化触发停止按钮，实现页面加载硬限制？

这个问题我之前也踩过坑——内容脚本调用window.stop()在像http://blackhole.webpagetest.org这类无限加载的站点上完全没用，因为页面的JS执行环境已经被阻塞，内容脚本根本得不到执行机会。要实现真正的硬限制，得从扩展的后台层面入手，调用Chrome原生的标签页控制API，这和手动点击浏览器「停止」按钮的效果完全一致。

核心思路 #

扩展的后台脚本（Manifest V3中是Service Worker）是独立于网页运行的，不受页面加载状态影响。我们可以监听标签页的加载状态，在页面开始加载时启动定时器，超时后调用chrome.tabs.stop()强制停止页面加载。

具体实现步骤 #

1. 配置Manifest文件 #

首先在manifest.json中声明必要的权限和后台脚本：

{
  "manifest_version": 3,
  "name": "加载超时自动停止",
  "version": "1.0",
  "description": "指定时长后自动停止页面加载",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

• tabs权限是调用chrome.tabs.stop()的必要条件；
• 用Manifest V3的Service Worker作为后台，这是当前Chrome扩展的标准配置。

2. 后台脚本实现超时逻辑 #

在background.js中编写监听和定时器逻辑：

// 自定义超时时间，单位毫秒（这里设置为10秒）
const LOAD_TIMEOUT = 10000;
// 存储每个标签页的定时器ID，避免重复触发
const activeTimers = new Map();

// 监听标签页状态更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 页面开始加载时启动定时器
  if (changeInfo.status === 'loading') {
    // 清除该标签页已有的定时器（防止重复设置）
    if (activeTimers.has(tabId)) {
      clearTimeout(activeTimers.get(tabId));
    }

    // 设置新的超时定时器
    const timerId = setTimeout(() => {
      // 调用Chrome原生API停止页面加载
      chrome.tabs.stop(tabId, () => {
        // 处理可能的错误（比如标签页已关闭）
        if (chrome.runtime.lastError) {
          console.warn(`无法停止标签页 ${tabId}:`, chrome.runtime.lastError.message);
        } else {
          console.log(`已停止标签页 ${tabId} 的加载`);
        }
      });
      // 移除已触发的定时器记录
      activeTimers.delete(tabId);
    }, LOAD_TIMEOUT);

    // 保存定时器ID到映射表
    activeTimers.set(tabId, timerId);
  }

  // 页面加载完成时清除定时器
  if (changeInfo.status === 'complete') {
    if (activeTimers.has(tabId)) {
      clearTimeout(activeTimers.get(tabId));
      activeTimers.delete(tabId);
    }
  }
});

3. 额外优化（可选） #

如果需要让用户自定义超时时间，可以添加一个popup页面：

• 在Manifest中声明action字段指向popup页面；
• 在popup中添加输入框，将用户设置的时间存储到chrome.storage.local；
• 后台脚本监听chrome.storage.onChanged事件，动态更新LOAD_TIMEOUT的值。

为什么这个方案可行？ #

chrome.tabs.stop()是Chrome提供的原生API，直接控制浏览器的标签页加载状态，完全不依赖页面的JS执行环境。哪怕页面陷入无限加载、JS阻塞，后台的Service Worker依然能正常运行定时器，到点就触发停止操作，和手动点击浏览器「停止」按钮的效果完全一致。

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