如何通过Chrome扩展访问开发者工具Sources面板中的资源（含图片）？

完全可以，Chrome扩展提供了专门的开发者工具API，能绕过普通JS的限制访问Sources面板里的资源，以下是具体实现思路：

核心权限与API #

• 必须在扩展清单中声明devtools相关配置，同时配合activeTab或<all_urls>权限（个人使用选activeTab更安全，仅在激活标签页生效）。
• 关键API是chrome.devtools.inspectedWindow.getResources()，它能直接获取当前被检查页面的所有资源列表，包含Sources面板里的图片、脚本、样式等。

实现步骤 #

1. 配置扩展清单（manifest.json）

   {
     "manifest_version": 3,
     "name": "个人资源提取工具",
     "version": "1.0",
     "permissions": ["activeTab"],
     "devtools_page": "devtools.html"
   }
   

2. 创建开发者工具入口页（devtools.html）
   这个页面是扩展接入Chrome开发者工具的入口，只需引入逻辑脚本：

   <!DOCTYPE html>
   <html>
   <body>
     <script src="devtools.js"></script>
   </body>
   </html>
   

3. 编写资源获取逻辑（devtools.js）
   调用API获取并筛选图片资源：

   // 当开发者工具面板加载完成后执行
   chrome.devtools.panels.create('资源提取', '', 'panel.html', (panel) => {
     panel.onShown.addListener(() => {
       // 获取当前页面所有资源
       chrome.devtools.inspectedWindow.getResources((resources) => {
         // 筛选出图片类型的资源（根据MIME类型判断）
         const imageResources = resources.filter(res => res.type === 'image');
         // 后续可以处理这些资源，比如打印URL、下载等
         console.log('找到的图片资源:', imageResources);
       });
     });
   });
   

4. 可选：创建自定义面板（panel.html）
   如果你需要可视化界面展示图片，可以写一个简单的面板页面，把筛选后的图片列表渲染出来：

   <!DOCTYPE html>
   <html>
   <body>
     <h3>页面图片资源</h3>
     <div id="imageList"></div>
     <script src="panel.js"></script>
   </body>
   </html>
   

   对应的panel.js可以把图片资源渲染到页面上：

   // 从devtools.js传递资源数据，或者直接在panel里调用API
   chrome.devtools.inspectedWindow.getResources((resources) => {
     const imageList = document.getElementById('imageList');
     resources.filter(res => res.type === 'image').forEach(imgRes => {
       const imgItem = document.createElement('div');
       imgItem.innerHTML = `<img src="${imgRes.url}" style="max-width:200px;"><br>${imgRes.url}`;
       imageList.appendChild(imgItem);
     });
   });
   

注意事项 #

• 这个扩展仅能在你打开Chrome开发者工具时生效，符合你访问Sources面板资源的场景。
• 由于是个人使用，无需考虑上架Chrome应用商店，直接在开发者模式下加载已解压的扩展即可。

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