成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

前端還原頁面你肯定干過吧？像仿 xxx 首頁那種。收素材時最煩的就是一張張存圖，慢不說還老漏。

跟我用 10 分鐘做個小插件，點(diǎn)一下，整頁圖片全下到本地

先看效果：在素材網(wǎng)站一鍵批量保存所有圖片

廢話不多說，直接上手！

項(xiàng)目結(jié)構(gòu)

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

1. 創(chuàng)建文件夾 image-downloader-extension

2. 創(chuàng)建manifest.json文件

這個文件是插件的身份證，告訴瀏覽器你的插件是誰、能干啥。

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

關(guān)鍵點(diǎn)解讀：

3. 創(chuàng)建background文件

Background后臺腳本負(fù)責(zé)創(chuàng)建并響應(yīng)右鍵菜單等事件來下載頁面圖片

// 1. 插件安裝時創(chuàng)建右鍵菜單
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'downloadAllImages', // 菜單唯一標(biāo)識
    title: '我要下載所有圖片', // 菜單顯示的文字
    contexts: ['page'], // 在頁面任意位置右鍵時顯示
  });
});
// 2. 監(jiān)聽右鍵菜單點(diǎn)擊事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'downloadAllImages') {
    // 使用 scripting API 在當(dāng)前頁面執(zhí)行腳本獲取所有圖片
    chrome.scripting.executeScript(
      {
        target: { tabId: tab.id },
        func: getImagesFromPage,
      },
      (results) => {
        // 獲取執(zhí)行結(jié)果
        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，避免瀏覽器限制
        });
      }
    );
  }
});
// 在頁面中執(zhí)行的函數(shù)，用于獲取所有圖片URL
function getImagesFromPage() {
  const images = Array.from(document.images)
    .map((img) => img.src)
    .filter((src) => src.startsWith('http'));
  return images;
}

API 文檔速查

• chrome.runtime（擴(kuò)展生命周期/事件）?

• chrome.contextMenus（右鍵菜單）

• chrome.scripting（腳本執(zhí)行）

• chrome.downloads（下載管理）

• 權(quán)限聲明（MV3）

4. 加載插件到瀏覽器

接下來我們將插件加載到瀏覽器中

步驟：

4.1 打開擴(kuò)展管理頁面 在 Chrome 地址欄輸入 chrome://extensions/ 并回車

4.2 開啟開發(fā)者模式

4.3 點(diǎn)擊 “加載未打包的擴(kuò)展程序”

選擇剛剛創(chuàng)建的image-downloader-extension文件夾進(jìn)行加載

4.4 插件加載成功

你會看到插件出現(xiàn)在列表中

至此，我們的下載插件就搞完了，是不是非常容易？

測試

接下來我們隨便打開一個網(wǎng)站，點(diǎn)擊鼠標(biāo)右鍵，就會發(fā)現(xiàn)右鍵菜單多了一個選項(xiàng)

點(diǎn)擊“我要下載所有圖片” 即可實(shí)現(xiàn)我們的需求了

轉(zhuǎn)自https://juejin.cn/post/7559124639323242506