如何用JavaScript查看ZIP文件及内容？有无可用NPM模块或原生方法？

一、使用NPM模块（推荐方案） #

首选jszip模块，它在浏览器和Node.js环境都能稳定工作，专门用于解析和处理ZIP文件，能轻松提取你需要的manifest.json和index.js内容。

安装 #

npm install jszip

示例代码 #

Node.js环境（读取本地ZIP文件）

const fs = require('fs');
const JSZip = require('jszip');

async function parsePluginZip(zipFilePath) {
  // 读取本地ZIP文件的二进制数据
  const zipBuffer = fs.readFileSync(zipFilePath);
  const zip = await JSZip.loadAsync(zipBuffer);

  // 读取并解析manifest.json
  const manifestText = await zip.file('manifest.json').async('text');
  const pluginManifest = JSON.parse(manifestText);
  console.log('插件元信息:', pluginManifest);

  // 读取index.js代码
  const pluginCode = await zip.file('index.js').async('text');
  console.log('插件核心代码:', pluginCode);
}

// 调用示例
parsePlugin('./your-plugin.zip');

浏览器环境（读取用户上传的ZIP文件）

// 绑定文件上传控件的change事件
document.getElementById('plugin-upload').addEventListener('change', async (e) => {
  const zipFile = e.target.files[0];
  if (!zipFile) return;

  const zip = await JSZip.loadAsync(zipFile);
  
  // 提取manifest信息
  const manifest = JSON.parse(await zip.file('manifest.json').async('text'));
  console.log('插件名称:', manifest.name);
  console.log('作者:', manifest.author);

  // 提取插件代码
  const coreCode = await zip.file('index.js').async('text');
  console.log('插件代码内容:', coreCode);
});

二、无NPM依赖的原生实现（复杂度较高） #

原生JavaScript没有内置的ZIP解析API，需要手动处理ZIP文件的底层结构（包括文件头、压缩块、目录记录等），仅适合简单场景或完全不想引入依赖的情况。

浏览器端简化示例（仅支持未压缩的ZIP条目） #

注意：该示例仅处理未压缩的ZIP文件，不支持加密、压缩算法（如DEFLATE）等复杂情况，仅作演示用

async function readZipWithoutDependencies(zipFile) {
  const arrayBuffer = await zipFile.arrayBuffer();
  const dataView = new DataView(arrayBuffer);
  let offset = 0;

  // 遍历ZIP文件中的条目
  while (offset < arrayBuffer.byteLength) {
    // 检查ZIP本地文件头的签名（固定为0x04034b50）
    if (dataView.getUint32(offset, true) !== 0x04034b50) break;

    // 读取文件名长度、扩展字段长度
    const fileNameLen = dataView.getUint16(offset + 26, true);
    const extraFieldLen = dataView.getUint16(offset + 28, true);
    // 提取文件名
    const fileName = new TextDecoder().decode(
      new Uint8Array(arrayBuffer, offset + 30, fileNameLen)
    );

    // 读取文件内容（假设未压缩，直接取原始长度）
    const contentLen = dataView.getUint32(offset + 20, true);
    const contentStart = offset + 30 + fileNameLen + extraFieldLen;
    const content = new TextDecoder().decode(
      new Uint8Array(arrayBuffer, contentStart, contentLen)
    );

    // 处理目标文件
    if (fileName === 'manifest.json') {
      console.log('Manifest内容:', JSON.parse(content));
    } else if (fileName === 'index.js') {
      console.log('插件代码:', content);
    }

    // 移动到下一个条目的起始位置
    offset = contentStart + contentLen;
  }
}

// 绑定上传事件
document.getElementById('plugin-upload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) readZipWithoutDependencies(file);
});

Node.js端原生实现逻辑 #

可结合fs模块读取文件二进制数据，再用zlib模块处理压缩内容，但同样需要手动解析ZIP结构细节，代码复杂度高，除非特殊需求，不推荐使用。

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