Chrome扩展开发：如何获取音乐文件的元数据？

一、修复jsmediatags在Webpack+Chrome扩展环境的报错 #

Chrome扩展的CSP限制和Webpack打包规则经常会和jsmediatags冲突，按以下步骤调整：

1. 调整Content Security Policy：在manifest.json中修改CSP，开发环境允许unsafe-eval（生产环境建议用下面的Webpack配置替代）：

   {
     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
   }
   

2. Webpack兼容配置：给jsmediatags单独配置babel转译，避免打包后出现语法兼容问题，在webpack.config.js中添加：

   module.exports = {
     // 其他已有配置
     module: {
       rules: [
         {
           test: /jsmediatags/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };
   

3. 正确传递File对象：Chrome扩展无法直接访问本地文件路径，必须通过<input type="file">或拖拽获取File实例再传给jsmediatags：

   import jsmediatags from 'jsmediatags';
   
   document.getElementById('music-upload').addEventListener('change', (e) => {
     const file = e.target.files[0];
     if (!file) return;
   
     jsmediatags.read(file, {
       onSuccess: (tag) => {
         // 提取艺术家信息
         const artist = tag.tags.artist || '未知艺术家';
         // 提取封面并渲染
         const cover = tag.tags.picture;
         if (cover) {
           const base64 = btoa(String.fromCharCode(...new Uint8Array(cover.data)));
           document.getElementById('album-cover').src = `data:${cover.format};base64,${base64}`;
         }
       },
       onError: (err) => console.error('读取元数据失败:', err)
     });
   });
   

二、更稳定的替代方案：使用music-metadata #

如果jsmediatags的问题无法解决，试试music-metadata——它对Chrome扩展环境兼容性更好，无动态执行代码，无需调整CSP：

1. 安装依赖：npm install music-metadata
2. 使用示例：

   import * as mm from 'music-metadata';
   
   document.getElementById('music-upload').addEventListener('change', async (e) => {
     const file = e.target.files[0];
     if (!file) return;
   
     try {
       const meta = await mm.parseBlob(file);
       // 获取艺术家
       const artist = meta.common.artist || '未知艺术家';
       // 获取封面
       const cover = meta.common.picture?.[0];
       if (cover) {
         const blob = new Blob([cover.data], { type: cover.format });
         document.getElementById('album-cover').src = URL.createObjectURL(blob);
       }
     } catch (err) {
       console.error('解析元数据失败:', err);
     }
   });
   

三、Chrome扩展权限注意事项 #

• 若在popup/options页面操作文件，无需额外权限；
• 若在content script中处理，需通过消息传递将File对象传给popup/background页面处理（content script无法直接操作文件解析）；
• 不要申请多余权限，避免审核被拒。

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