网页上的文件我不想下载只想看，一个插件满足你(所有文件)

往期google插件

谷歌插件之一键关闭同域名页面

谷歌插件之页面标记

为什么做

起初，我在实现一个后端生成 Excel 并在前端页面直接展示的功能。不过因为这个功能并未被要求，我的代码没有提交。但有同事想看看如何实现，于是我搭建了一个本地文件服务，方便局域网内的同事访问。然而，我发现每次点击链接都会直接下载文件，而无法在线预览。于是我萌生了开发这个浏览器文件预览插件的想法。

需求

要实现在线文件预览，前提是网站需要支持相关功能，比如集成了 Office 或其他预览服务（如 kkviewfile）。但对于那些不支持预览的网站，点击文件时通常会直接触发下载。而在这种情况下，我的自制浏览器插件就派上用场了，能够帮助轻松实现文件的在线预览。

当我想预览，不想下载的时候，我直接右键选择预览文件就会出现新的页面展示该文件的内容

构思

要实现上述功能，需要满足以下条件：

​ • 支持通过右键菜单预览文件内容；

​ • 文件预览时提供代码或文本的高亮显示；

​ • 支持多种文件格式的预览（如 .java、.py、.txt 等）。

重点代码实现

目录结构显示

实现右键菜单预览

// 创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "previewFile",
    title: "预览文件",
    contexts: ["link"], // 仅在链接上显示右键菜单
  }); 
});

// 处理右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "previewFile") {
    const fileUrl = info.linkUrl; // 获取文件链接
    chrome.tabs.create({ url: chrome.runtime.getURL("preview.html") + `?fileUrl=${encodeURIComponent(fileUrl)}` });
  }
});

多种文件+高亮实现

这里只展示部分代码

// 处理文本文件，适用于 Java、Python、Vue 等
fetch(fileUrl)
  .then(response => response.text())
  .then(data => {
  const fileTypeMapping = { 
    'java': 'language-java',
    'py': 'language-python',
    'vue': 'language-html',
    'xml': 'language-markup',
    'conf': 'language-none',
    'txt': 'language-none',
    // 其他文件类型
  };  
  const languageClass = fileTypeMapping[fileExtension] || 'language-none';
  const fileContentElement = document.getElementById('fileContent');
  fileContentElement.className = languageClass;  // 设置代码块的语言类型
  fileContentElement.textContent = data;
  Prism.highlightElement(fileContentElement);  // 使用 Prism.js 进行语法高亮
})                                                                                            
  .catch(error => {
  document.getElementById('fileContent').textContent = '无法加载文件内容';
}); 

结果展示