如何实现Google Chrome内置PDF查看器下载按钮的行为自定义及前置JS条件检查

首先得明确：Chrome官方并没有开放内置PDF查看器的官方API，所以我们得通过一些「间接手段」来实现你的需求。下面是几个可行的方案，按实用性排序：

方案1：开发Chrome扩展（最推荐） #

这是最可靠的方式，因为Chrome扩展可以直接访问和修改chrome://pdf/页面的内容。具体步骤如下：

1. 配置扩展权限
   在manifest.json里声明必要的权限和匹配规则：

   {
     "manifest_version": 3,
     "name": "PDF Download Guard",
     "version": "1.0",
     "permissions": ["activeTab", "scripting", "downloads"],
     "content_scripts": [
       {
         "matches": ["chrome://pdf/*"],
         "js": ["content.js"]
       }
     ]
   }
   

   注意：chrome://协议的页面属于Chrome内部页面，扩展需要明确声明匹配规则才能访问。

2. 注入内容脚本拦截点击
   在content.js里，先找到内置PDF查看器的下载按钮（可以通过Chrome DevTools打开chrome://pdf/页面查看元素），然后监听点击事件，阻止默认行为，执行你的自定义检查：

   // 等待PDF查看器DOM加载完成
   setTimeout(() => {
     // 注意：选择器可能随Chrome版本变化，建议自己用DevTools确认
     const downloadBtn = document.querySelector('button[aria-label="下载"]'); 
     if (downloadBtn) {
       downloadBtn.addEventListener('click', (e) => {
         // 阻止默认下载行为
         e.preventDefault();
         e.stopPropagation();
   
         // 执行你的自定义检查逻辑，这里替换成你的条件判断
         const isAllowed = confirm('确认满足下载条件了吗？'); 
         if (isAllowed) {
           // 如果检查通过，触发下载
           const pdfUrl = window.location.href.split('?')[1].replace('url=', '');
           chrome.downloads.download({ url: decodeURIComponent(pdfUrl) });
         }
       });
     }
   }, 1000);
   

   提示：Chrome更新可能会改变PDF查看器的DOM结构，所以需要定期验证选择器是否有效。

3. 测试与部署
   在Chrome开发者模式下加载扩展，测试功能正常后，可以打包成CRX文件部署，或者在企业环境通过组策略推送。

方案2：替换内置PDF查看器（灵活性最高） #

如果对内置查看器的定制需求很高，可以用开源的PDF.js（Mozilla开发的PDF渲染库）自己实现一个PDF查看器，然后通过Chrome扩展拦截PDF文件的请求，重定向到你自己的查看页面：

• 用PDF.js搭建自己的PDF查看页面，添加自定义的下载按钮和检查逻辑。
• 在扩展中注册webRequest拦截器，当用户打开PDF文件时，重定向到你的自定义页面，并传递PDF的URL。
• 这种方式完全控制所有交互，但需要额外的开发工作量。

方案3：使用用户脚本（轻量但受限） #

如果不想开发完整的扩展，可以尝试用Tampermonkey等用户脚本工具，但需要注意：

• 用户脚本默认可能无法访问chrome://页面，需要在脚本的@match规则中添加chrome://pdf/*。
• 权限比扩展少，比如可能无法直接调用Chrome的downloads API，需要依赖前端模拟下载（比如创建a标签触发）。

注意事项 #

• Chrome的版本更新可能会破坏对内置PDF查看器DOM的操作，需要定期维护。
• 对于企业环境，确保扩展被允许安装，避免被Chrome的安全策略阻止。
• 如果你的检查逻辑需要后端数据，扩展可以通过fetch调用你的API，或者和后台脚本通信。

希望这些方案能帮到你，如果有具体的实现细节问题，欢迎进一步提问。

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