Создание расширения Chrome/Brave для скачивания файлов по заданному формату
Сегодня нашему системному администратору поступила задача — создать расширение для браузеров Chrome и Brave для скачивания всех файлов со страницы по заданному формату файла (например, архив ZIP), зашитой в расширении. Это ускоряет работу в разы для обычных сотрудников, которые раньше были вынуждены кликать по каждой ссылке, чтобы скачать все что нужно.
Создание расширения браузера включает в себя написание кода, и в Chrome обычно используется несколько HTML, CSS и JavaScript. Ниже представлен код для скачивания всех ZIP файлов со страницы:
manifest.json:
{ "manifest_version": 2, "name": "MLHOST.RU Zip Downloader", "version": "1.0", "description": "Download all links with .zip extension", "permissions": ["activeTab", "downloads"], "browser_action": { "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "default_title": "Download Zip Links", "default_popup": "popup.html" }, "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] }
popup.html:
<!DOCTYPE html> <html> <body> <button id="downloadButton">Download Zip Links</button> <script src="popup.js"></script> </body> </html>
content.js:
chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if(request.action == "downloadZipLinks") { const zipLinks = document.querySelectorAll('a[href$=".zip"]'); const zipUrls = Array.from(zipLinks).map(link => link.href); sendResponse({ zipUrls }); } } );
popup.js:
document.getElementById('downloadButton').addEventListener('click', function() { chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { action: "downloadZipLinks" }, function(response) { const zipUrls = response.zipUrls; zipUrls.forEach(url => { chrome.downloads.download({ url: url }); }); }); }); });
Это расширение состоит из нескольких файлов:
- manifest.json: определяет расширение, его разрешения и файлы, которые оно использует.
- popup.html: всплывающее окно, которое появляется при нажатии на значок расширения.
- content.js: скрипт содержимого, внедренный во все веб-страницы, который прослушивает сообщения из всплывающего окна.
- popup.js: сценарий, который обрабатывает нажатие кнопки во всплывающем окне и взаимодействует со сценарием содержимого.
Чтобы использовать это расширение, создайте папку, поместите в нее эти файлы и загрузите расширение в Chrome, перейдя по адресу chrome://extensions/, включив «Режим разработчика» и нажав «Загрузить распакованное». Выберите папку расширения.
