1. 引言

在日常开发与办公场景中，我们经常需要在浏览器里打开 Word、Excel、PPT 等 Office 文件，以及国内政务、电子发票等领域常见的 OFD 版式文件。传统做法是下载到本地再用对应软件打开，体验割裂且效率低下。前面两篇文章已经写了在系统中集成，现在我打算直接给他弄成一个插件

今天我将分享一个浏览器插件（Extension）的实现思路：安装后，插件会自动检测页面中的所有 <a> 标签，为指向 Office / OFD 文件的链接自动附加一个预览图标。点击该图标，即可在新窗口（或新标签页）中直接预览文件内容，无需下载、无需切换应用。

功能截图演示：

2. 功能概览

• 自动检测：扫描页面中所有 <a> 标签，识别指向 Office（doc/docx/xls/xlsx/ppt/pptx）与 OFD 文件的链接。
• 图标注入：在符合条件的链接旁自动插入一个醒目的预览图标。
• 新窗口预览：点击图标后，在新窗口打开预览页面，内嵌在线预览能力。
• 轻量无侵入：不改变原链接行为，仅在链接旁附加图标，用户仍可正常点击原链接下载。

3. 技术选型

4. 核心实现

4.1 插件清单（manifest.json）

{
  "manifest_version": 3,
  "name": "文件预览助手",
  "version": "1.0.0",
  "description": "自动检测页面中的Word/Excel/PPT/PDF/OFD文件链接，点击后在新标签页中预览，无需下载。",
  "permissions": [
    "tabs",
    "activeTab",
    "scripting",
    "storage",
    "contextMenus"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "文件预览助手",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"],
      "run_at": "document_idle",
      "all_frames": true
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["preview.html", "assets/*", "icons/*"],
      "matches": ["<all_urls>"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

4.2 内容脚本：检测与注入图标

// background.js - Service Worker (Manifest V3)
// 负责接收来自 content script 的消息，并在新标签页中打开预览页面

const SUPPORTED_EXTENSIONS = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'ofd'];

// 从 URL 中提取文件扩展名
function getFileExtension(url) {
  try {
    const urlObj = new URL(url);
    // 去除查询参数和哈希
    const pathname = urlObj.pathname;
    const match = pathname.match(/\.([a-zA-Z0-9]+)$/);
    return match ? match[1].toLowerCase() : '';
  } catch (e) {
    return '';
  }
}

function isSupportedFile(url) {
  const ext = getFileExtension(url);
  return SUPPORTED_EXTENSIONS.includes(ext);
}

// 打开预览页面
function openPreviewPage(fileUrl, sourceTabId) {
  const previewUrl = chrome.runtime.getURL(
    `preview.html?url=${encodeURIComponent(fileUrl)}`
  );
  chrome.tabs.create({
    url: previewUrl,
    index: sourceTabId != null ? sourceTabId + 1 : undefined
  });
}

// 监听来自 content script 的消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'OPEN_PREVIEW') {
    const { url } = msg;
    if (isSupportedFile(url)) {
      openPreviewPage(url, sender.tab?.id);
      sendResponse({ success: true });
    } else {
      sendResponse({ success: false, reason: 'unsupported' });
    }
    return true;
  }

  if (msg.type === 'CHECK_SUPPORTED') {
    sendResponse({ supported: isSupportedFile(msg.url) });
    return true;
  }

  if (msg.type === 'GET_SUPPORTED_EXTENSIONS') {
    sendResponse({ extensions: SUPPORTED_EXTENSIONS });
    return true;
  }
});

// 安装时初始化右键菜单和默认设置
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'preview-with-helper',
    title: '用文件预览助手打开',
    contexts: ['link']
  });

  chrome.storage.local.get(['settings'], (result) => {
    if (!result.settings) {
      chrome.storage.local.set({
        settings: {
          autoIntercept: true,        // 自动拦截文件链接点击
          showIndicator: true,        // 在链接旁显示小图标
          supportedExtensions: SUPPORTED_EXTENSIONS
        }
      });
    }
  });
});

// 监听右键菜单点击
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'preview-with-helper' && info.linkUrl) {
    openPreviewPage(info.linkUrl, tab?.id);
  }
});

5. 总结

本文实现了一个轻量、实用的浏览器插件：自动识别 Office 与 OFD 文件链接，注入预览图标，并支持新窗口预览。整体代码量小、无侵入，适合作为浏览器插件开发的入门实战项目。