当前位置：首页 > wzjs >正文

网站建设济南网络销售培训学校

wzjs 2025/8/7 14:03:28

网站建设济南,网络销售培训学校,新中式装修效果图,怎样把自己做的网站上传浏览器插件：图片抓取与下载工具下面是一个完整的浏览器插件代码，可以抓取当前页面的所有图片，提供预览功能，并允许用户选择下载。文件结构 image-downloader/ ├── manifest.json ├── popup.html ├── popup.js ├──…

浏览器插件：图片抓取与下载工具

下面是一个完整的浏览器插件代码，可以抓取当前页面的所有图片，提供预览功能，并允许用户选择下载。

文件结构

image-downloader/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
└── icons/├── icon48.png└── icon128.png

1. manifest.json

{"manifest_version": 3,"name": "图片抓取与下载工具","version": "1.0","description": "抓取当前页面的所有图片并提供下载功能","permissions": ["activeTab", "downloads"],"action": {"default_popup": "popup.html","default_icon": {"48": "icons/icon48.png","128": "icons/icon128.png"}},"icons": {"48": "icons/icon48.png","128": "icons/icon128.png"}
}

2. popup.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>图片抓取工具</title><link rel="stylesheet" href="popup.css">
</head>
<body><div class="container"><h1>页面图片抓取</h1><div class="controls"><button id="fetchImages">抓取图片</button><button id="downloadSelected">下载选中图片</button><button id="selectAll">全选</button><button id="deselectAll">取消全选</button></div><div class="filter"><label for="minWidth">最小宽度:</label><input type="number" id="minWidth" placeholder="最小宽度" min="0"><label for="minHeight">最小高度:</label><input type="number" id="minHeight" placeholder="最小高度" min="0"></div><div id="status"></div><div id="imageGallery"></div></div><script src="popup.js"></script>
</body>
</html>

3. popup.css

body {width: 600px;padding: 10px;font-family: Arial, sans-serif;
}.container {display: flex;flex-direction: column;gap: 10px;
}h1 {font-size: 18px;margin: 0 0 10px 0;text-align: center;
}.controls {display: flex;gap: 5px;flex-wrap: wrap;
}button {padding: 5px 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #45a049;
}.filter {display: flex;gap: 10px;align-items: center;flex-wrap: wrap;
}.filter input {width: 60px;padding: 3px;
}#status {color: #666;font-style: italic;min-height: 20px;
}#imageGallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 10px;max-height: 500px;overflow-y: auto;margin-top: 10px;
}.image-container {border: 1px solid #ddd;padding: 5px;border-radius: 4px;display: flex;flex-direction: column;align-items: center;
}.image-container img {max-width: 100%;max-height: 100px;object-fit: contain;margin-bottom: 5px;
}.image-info {font-size: 12px;text-align: center;word-break: break-all;
}.checkbox-container {margin-top: 5px;
}

4. popup.js

document.addEventListener('DOMContentLoaded', function() {const fetchImagesBtn = document.getElementById('fetchImages');const downloadSelectedBtn = document.getElementById('downloadSelected');const selectAllBtn = document.getElementById('selectAll');const deselectAllBtn = document.getElementById('deselectAll');const minWidthInput = document.getElementById('minWidth');const minHeightInput = document.getElementById('minHeight');const imageGallery = document.getElementById('imageGallery');const statusDiv = document.getElementById('status');let currentImages = [];// 抓取页面图片fetchImagesBtn.addEventListener('click', async function() {statusDiv.textContent = '正在抓取图片...';try {const [tab] = await chrome.tabs.query({active: true, currentWindow: true});// 注入内容脚本获取图片const results = await chrome.scripting.executeScript({target: {tabId: tab.id},func: getPageImages,});if (results && results[0] && results[0].result) {currentImages = results[0].result;filterAndDisplayImages();statusDiv.textContent = `找到 ${currentImages.length} 张图片`;} else {statusDiv.textContent = '未找到图片或发生错误';}} catch (error) {console.error('抓取图片时出错:', error);statusDiv.textContent = '抓取图片时出错: ' + error.message;}});// 下载选中的图片downloadSelectedBtn.addEventListener('click', function() {const selectedImages = currentImages.filter(img => img.selected);if (selectedImages.length === 0) {statusDiv.textContent = '请先选择要下载的图片';return;}statusDiv.textContent = `正在下载 ${selectedImages.length} 张图片...`;selectedImages.forEach(img => {chrome.downloads.download({url: img.src,filename: getFilenameFromUrl(img.src),conflictAction: 'uniquify'});});statusDiv.textContent = `已开始下载 ${selectedImages.length} 张图片`;});// 全选selectAllBtn.addEventListener('click', function() {currentImages.forEach(img => img.selected = true);renderImages();});// 取消全选deselectAllBtn.addEventListener('click', function() {currentImages.forEach(img => img.selected = false);renderImages();});// 过滤条件变化时重新显示图片minWidthInput.addEventListener('change', filterAndDisplayImages);minHeightInput.addEventListener('change', filterAndDisplayImages);// 根据过滤条件筛选并显示图片function filterAndDisplayImages() {const minWidth = parseInt(minWidthInput.value) || 0;const minHeight = parseInt(minHeightInput.value) || 0;const filteredImages = currentImages.filter(img => {return img.naturalWidth >= minWidth && img.naturalHeight >= minHeight;});renderImages(filteredImages);}// 渲染图片到画廊function renderImages(imagesToRender = currentImages) {imageGallery.innerHTML = '';imagesToRender.forEach(img => {const imgContainer = document.createElement('div');imgContainer.className = 'image-container';const imgElement = document.createElement('img');imgElement.src = img.src;imgElement.alt = '缩略图';const imgInfo = document.createElement('div');imgInfo.className = 'image-info';imgInfo.textContent = `${img.naturalWidth}×${img.naturalHeight}`;const checkboxContainer = document.createElement('div');checkboxContainer.className = 'checkbox-container';const checkbox = document.createElement('input');checkbox.type = 'checkbox';checkbox.checked = img.selected || false;checkbox.addEventListener('change', function() {img.selected = this.checked;});const checkboxLabel = document.createElement('label');checkboxLabel.textContent = '选择';checkboxContainer.appendChild(checkbox);checkboxContainer.appendChild(checkboxLabel);imgContainer.appendChild(imgElement);imgContainer.appendChild(imgInfo);imgContainer.appendChild(checkboxContainer);imageGallery.appendChild(imgContainer);});}// 从URL中提取文件名function getFilenameFromUrl(url) {try {const urlObj = new URL(url);const pathname = urlObj.pathname;const filename = pathname.split('/').pop() || 'image';// 如果文件名没有扩展名，添加一个if (!filename.includes('.')) {const extension = getImageExtensionFromUrl(url);return `${filename}.${extension}`;}return filename;} catch {return 'image.jpg';}}// 从URL中猜测图片扩展名function getImageExtensionFromUrl(url) {if (url.includes('.jpg') || url.includes('.jpeg')) return 'jpg';if (url.includes('.png')) return 'png';if (url.includes('.gif')) return 'gif';if (url.includes('.webp')) return 'webp';if (url.includes('.svg')) return 'svg';if (url.includes('.bmp')) return 'bmp';return 'jpg'; // 默认}
});// 在页面上下文中执行的函数，用于获取所有图片
function getPageImages() {const images = Array.from(document.querySelectorAll('img, [style*="background-image"]'));const result = [];images.forEach(element => {let src, naturalWidth, naturalHeight;if (element.tagName === 'IMG') {src = element.src;naturalWidth = element.naturalWidth;naturalHeight = element.naturalHeight;} else {// 处理背景图片const style = window.getComputedStyle(element);const bgImage = style.backgroundImage;if (bgImage && bgImage !== 'none') {src = bgImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');naturalWidth = element.offsetWidth;naturalHeight = element.offsetHeight;}}if (src && !src.startsWith('data:') && naturalWidth > 0 && naturalHeight > 0) {result.push({src,naturalWidth,naturalHeight,selected: false});}});// 去重const uniqueUrls = new Set();return result.filter(img => {if (uniqueUrls.has(img.src)) return false;uniqueUrls.add(img.src);return true;});
}