Manifest V3版Chrome扩展：如何为PDF文件显示自定义UI？

要实现类似应用商店「PDF Viewer」的效果，核心是通过declarativeNetRequest拦截所有PDF请求（包括本地file://协议），并重定向到扩展的自定义渲染页面，以下是完整配置和排查要点：

1. Manifest.json 核心配置 #

必须声明足够的权限和规则关联，确保能处理本地和远程PDF：

{
  "manifest_version": 3,
  "name": "自定义PDF查看器",
  "version": "1.0",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "<all_urls>",
    "file:///*"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "pdf_rules",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  },
  "background": {
    "service_worker": "background.js"
  }
}

• host_permissions中的file:///*是处理本地PDF的关键，不能省略。
• declarativeNetRequestWithHostAccess是Manifest V3中处理跨域/本地请求规则的必要权限。

2. 拦截规则文件（rules.json） #

设置高优先级规则，拦截所有PDF主/子框架请求，重定向到扩展的查看页面：

[
  {
    "id": 1,
    "priority": 1000,
    "action": {
      "type": "redirect",
      "redirect": {
        "url": "chrome-extension://<你的扩展ID>/viewer.html?url=$requestUrl"
      }
    },
    "condition": {
      "urlFilter": "*.pdf",
      "resourceTypes": ["main_frame", "sub_frame"]
    }
  }
]

• 替换<你的扩展ID>为实际扩展ID（扩展管理页面开发者模式下可查看）。
• 优先级设为1000，确保覆盖Chrome内置的PDF处理规则。

3. 自定义PDF渲染页面 #

使用PDF.js实现渲染（直接用官方预编译包即可），示例viewer.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自定义PDF查看器</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; }
    #viewerContainer { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="viewerContainer"></div>
  <script src="pdf.js"></script>
  <script src="viewer.js"></script>
  <script>
    // 从URL参数获取PDF地址并加载
    const urlParams = new URLSearchParams(window.location.search);
    const pdfUrl = urlParams.get('url');
    // 初始化PDF查看器
    pdfjsLib.getDocument(pdfUrl).promise.then(doc => {
      // 渲染第一页示例，可扩展为完整分页逻辑
      doc.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.5 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({ canvasContext: ctx, viewport: viewport });
        document.getElementById('viewerContainer').appendChild(canvas);
      });
    });
  </script>
</body>
</html>

将PDF.js官方预编译的pdf.js、viewer.js文件放入扩展目录，也可直接使用完整的PDF.js viewer组件实现更丰富的功能（如分页、缩放）。

4. 本地PDF特殊设置 #

• 开启文件访问权限：在扩展管理页面进入你的扩展「详细信息」，开启「允许访问文件网址」选项，否则无法拦截file://协议的本地PDF请求。

常见问题排查 #

• 规则不生效：检查host_permissions是否包含file:///*，规则优先级是否≥1000。
• 重定向失败：确认扩展ID正确，直接在地址栏输入chrome-extension://<你的扩展ID>/viewer.html测试页面是否可访问。
• 本地PDF仍用默认查看器：确保已开启「允许访问文件网址」权限，且规则resourceTypes包含main_frame。

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