image-downloader-extension
├── manifest.json      # 擴展的"身份證"
└── background.js      # 插件后臺腳本

{
  "manifest_version": 3,
  "name": "我的下載插件",
  "version": "1.0.0",
  "permissions": ["contextMenus", "downloads", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

// 1. 插件安裝時創建右鍵菜單
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'downloadAllImages', // 菜單唯一標識
    title: '我要下載所有圖片', // 菜單顯示的文字
    contexts: ['page'], // 在頁面任意位置右鍵時顯示
  });
});

// 2. 監聽右鍵菜單點擊事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'downloadAllImages') {
    // 使用 scripting API 在當前頁面執行腳本獲取所有圖片
    chrome.scripting.executeScript(
      {
        target: { tabId: tab.id },
        func: getImagesFromPage,
      },
      (results) => {
        // 獲取執行結果
        if (!results || !results[0]?.result || results[0].result.length === 0) {
          console.log('未找到圖片');
          return;
        }
        const images = results[0].result;
        // 批量下載圖片
        images.forEach((url, index) => {
          setTimeout(() => {
            chrome.downloads.download({
              url: url,
              filename: `images/image_${index + 1}.jpg`, // 保存路徑
              saveAs: false, // 不彈出保存對話框
            });
          }, index * 500); // 每張圖片間隔 500ms，避免瀏覽器限制
        });
      }
    );
  }
});

// 在頁面中執行的函數，用于獲取所有圖片URL
function getImagesFromPage() {
  const images = Array.from(document.images)
    .map((img) => img.src)
    .filter((src) => src.startsWith('http'));

  return images;
}