Chrome扩展：如何在新标签页打开站点时仅加载HTML与文本

当然可以实现，核心思路是在Chrome扩展层面拦截不需要的资源请求，从根源上避免加载样式、图片、视频及非必要脚本。下面是两种最实用的方案：

方案一：使用Declarative Net Request API（推荐） #

这是Chrome提供的高效资源拦截API，直接在浏览器层面处理请求，性能开销极小，适合批量标签页场景。

1. 配置扩展权限
   在manifest.json中添加必要权限和主机权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "permissions": ["declarativeNetRequest", "declarativeNetRequestWithHostAccess"],
  "host_permissions": ["*://*.google.com/*"], // 替换成你要处理的站点域名
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

2. 编写拦截规则
   创建rules.json文件，定义要阻止的资源类型：

[
  {
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": {
      "urlFilter": "*",
      "resourceTypes": ["image", "stylesheet", "media", "script"]
      // 如需保留部分脚本，可添加"excludeUrlFilters"排除特定脚本URL
    }
  }
]

如果要保留核心脚本（比如站点主入口脚本），可以在condition里补充"excludeUrlFilters": ["*://*.google.com/search/*main.js"]这类规则。

方案二：使用Web Request API #

如果你的扩展仍在使用manifest v2，或者需要更灵活的请求处理逻辑，可以采用这个API：

1. 配置权限
   在manifest.json中添加：

{
  "manifest_version": 2,
  "permissions": ["webRequest", "webRequestBlocking", "*://*.google.com/*"]
}

2. 添加请求拦截逻辑
   在background.js中编写拦截代码：

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 阻止图片、样式、视频及指定非必要脚本
    const blockTypes = ['image', 'stylesheet', 'media'];
    if (blockTypes.includes(details.type) || details.url.includes('analytics.js')) {
      return { cancel: true };
    }
  },
  { urls: ["*://*.google.com/*"] },
  ["blocking"]
);

注意事项 #

• 确保host_permissions覆盖你要打开的所有站点域名，否则拦截规则不会生效。
• 不要盲目拦截所有脚本，部分站点的核心HTML渲染依赖特定脚本，测试时需调整规则保留必要脚本。
• 用window.open打开标签页后，扩展的拦截规则会自动应用到这些新标签页，无需额外处理。

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