如何在不修改地址栏URL的情况下自定义浏览器PDF查看器

我来帮你拆解这个问题——你之前用webRequest重定向的方法会修改地址栏，而Google Scholar PDF Reader能保留原URL，核心在于它没有替换整个页面，而是在Chrome内置PDF查看器的渲染页面上做注入和修改，而非跳转到独立的自定义页面。结合你分析的扩展权限和内容脚本，下面是具体的实现思路和关键细节：

核心原理：利用Chrome内置PDF查看器的原生特性 #

Chrome打开PDF时的原生行为是：地址栏显示原PDF的URL，但实际渲染用的是内置PDF扩展的页面（URL格式为chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/viewer.html，这个ID是Chrome默认PDF扩展的固定标识）。这种“代理渲染”机制让我们可以修改内置查看器的UI，同时保留用户看到的原URL。

具体实现步骤 #

1. 配置权限与内容脚本匹配规则

首先在扩展的manifest.json中，配置允许访问Chrome内置PDF查看器的页面，并注入内容脚本：

{
  "permissions": ["scripting", "webNavigation", "declarativeNetRequest"],
  "content_scripts": [
    {
      "matches": ["chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/*"],
      "js": ["contentscript.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ]
}

这里的matches规则直接指向Chrome内置PDF扩展的页面，确保你的脚本能注入到PDF渲染的上下文里。

2. 动态注入脚本（替代静态配置，更灵活）

如果你用scripting权限（就像Google Scholar扩展那样），可以通过webNavigation事件检测PDF页面加载，再动态注入脚本，这样能更精准控制时机：

// background.js
chrome.webNavigation.onCompleted.addListener(async (details) => {
  // 检测是否是内置PDF查看器页面
  if (details.url.startsWith('chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/')) {
    await chrome.scripting.executeScript({
      target: { tabId: details.tabId, allFrames: true },
      files: ['contentscript.js']
    });
  }
});

3. 自定义内置PDF查看器的UI与功能

注入的contentscript.js可以直接操作内置PDF查看器的DOM，甚至和底层的PDF.js API交互（因为内置查看器基于PDF.js开发）。比如添加自定义工具栏按钮、修改渲染样式：

// contentscript.js
// 等待PDF查看器DOM加载完成
document.addEventListener('DOMContentLoaded', () => {
  // 找到内置工具栏，添加自定义按钮
  const toolbar = document.querySelector('.toolbar');
  const customBtn = document.createElement('button');
  customBtn.textContent = '我的自定义按钮';
  customBtn.addEventListener('click', () => {
    // 调用PDF.js API获取当前页码
    const pdfViewer = window.PDFViewerApplication.pdfViewer;
    alert(`当前页码：${pdfViewer.currentPageNumber}`);
  });
  toolbar.appendChild(customBtn);

  // 修改PDF渲染样式（比如添加水印）
  const viewerContainer = document.querySelector('.viewer');
  viewerContainer.style.position = 'relative';
  const watermark = document.createElement('div');
  watermark.textContent = '自定义水印';
  watermark.style.cssText = 'position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:48px; opacity:0.2; pointer-events:none;';
  viewerContainer.appendChild(watermark);
});

4. 用declarativeNetRequest预处理PDF请求（可选）

如果需要确保浏览器总是用内置查看器打开PDF（而不是下载），可以用declarativeNetRequest修改响应头，避免触发下载行为：

// manifest.json中添加规则
"declarative_net_request": {
  "rule_resources": [
    {
      "id": "pdf_rules",
      "enabled": true,
      "path": "rules.json"
    }
  ]
}

// rules.json
[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        { "header": "Content-Disposition", "operation": "set", "value": "inline" }
      ]
    },
    "condition": {
      "urlFilter": "*.pdf",
      "resourceTypes": ["main_frame"]
    }
  }
]

关键注意事项 #

• 跨浏览器兼容：不同浏览器的内置PDF扩展ID不同，比如Edge的ID是ejjicmeblgpmajnghnpcppodonldlgfn，如果要兼容多浏览器，需要配置多个matches规则或动态检测。
• PDF.js API兼容性：Chrome内置的PDF.js版本可能会随浏览器更新变化，建议测试不同Chrome版本的API兼容性，避免出现功能失效。
• 权限最小化：只申请必要的权限，比如如果不需要动态注入，用静态内容脚本配置即可，无需scripting权限。

这种方法完全复刻了Google Scholar PDF Reader的核心逻辑：通过注入脚本修改Chrome原生的PDF渲染页面，既实现了自定义功能，又保留了原URL的显示。

备注：内容来源于stack exchange，提问作者Meo