如何向Edge PDF阅读器注入内容脚本以捕获选中文本？

核心原因 #

Edge的PDF阅读器是独立的内置组件环境，常规内容脚本的匹配规则、注入时机无法覆盖其上下文；同时PDF内容的DOM结构为动态生成，普通事件监听逻辑无法准确捕获选中文本。

解决方案步骤 #

1. 更新manifest.json配置

扩展匹配规则以覆盖Edge PDF阅读器页面，补充必要权限并调整注入策略：

{
  "manifest_version": 3,
  "name": "PDF Text Selection Logger",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>",
    "edge://pdf/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>", "edge://pdf/*"],
      "js": ["content.js"],
      "run_at": "document_idle",
      "all_frames": true
    }
  ]
}

• 添加edge://pdf/*到matches和host_permissions，覆盖Edge内置PDF阅读器页面
• 开启all_frames: true，确保脚本注入到PDF内容所在的子框架
• 将run_at改为document_idle，等待页面DOM完全稳定后再注入脚本

2. 优化background.js的脚本注入逻辑

确保脚本注入到页面所有框架（包括PDF内容的子框架）：

console.log("Service worker starting...");

chrome.action.onClicked.addListener((tab) => {
  console.log("Action clicked, executing content script...");
  chrome.scripting.executeScript({
    target: { tabId: tab.id, allFrames: true },
    files: ["content.js"]
  }, () => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
    } else {
      console.log("Content script executed successfully.");
    }
  });
});

console.log("Service worker started.");

• 新增allFrames: true参数，确保脚本注入到页面的所有嵌套框架中

3. 改进content.js的文本捕获逻辑

使用更可靠的事件监听，并增加子框架文本捕获逻辑：

(function() {
  'use strict';

  function getSelectedText() {
    let selectedText = '';
    // 先尝试获取当前框架的选中文本
    if (window.getSelection) {
      selectedText = window.getSelection().toString();
    }
    // 若当前框架无选中内容，遍历子框架尝试获取
    if (!selectedText && window.frames.length > 0) {
      for (const frame of window.frames) {
        try {
          const frameSelection = frame.getSelection?.();
          if (frameSelection) {
            selectedText = frameSelection.toString();
            if (selectedText) break;
          }
        } catch (e) {
          // 跨框架访问可能触发权限错误，直接忽略
          continue;
        }
      }
    }
    return selectedText;
  }

  function handleSelection() {
    const selectedText = getSelectedText();
    if (selectedText) {
      console.log('Selected text: ', selectedText);
    }
  }

  // 用selectionchange事件替代mouseup/keyup，精准捕获选择变化
  document.addEventListener('selectionchange', handleSelection);

  console.log("PDF Text Selection Logger script activated.");
})();

• 替换mouseup和keyup为selectionchange事件，文本选择状态变化时立即触发
• 增加子框架遍历逻辑，确保能捕获PDF内容框架中的选中文本

验证方法 #

1. 重新加载扩展程序
2. 打开本地或在线PDF文件
3. 点击扩展图标注入脚本
4. 选中PDF中的文本，查看浏览器控制台输出

内容的提问来源于stack exchange，提问作者João Galdino