Моды — модификации? Если вы увлекаетесь играми, вы знаете, что нет ничего лучше игры с модами. Это ваша любимая игра, но она еще более мощная, функциональная и увлекательная. Теперь представьте, что вы привносите такое же волнение в свой опыт просмотра веб-страниц. Именно это и делают расширения браузера — они подобны модификациям вашего браузера, расширяя его возможности, о которых вы даже не мечтали.

С помощью расширения Chrome вы можете настроить свой браузер так, чтобы он идеально соответствовал вашим потребностям — будь то блокировка определенных URL-адресов, добавление новых функций или даже придание ему совершенно нового вида. И лучшая часть? Вы можете создать эти расширения самостоятельно. В этом руководстве я покажу вам пошаговый процесс создания собственного расширения Chrome.

Начать работу с веб-расширениями проще, чем вы думаете! Если вы знаете JavaScript, это несложно — достаточно изучить новый API. В конце концов, это по-прежнему JavaScript по своей сути.

Эта статья является дополнением к: Справочнику по расширениям Chrome: от большого объема памяти до готовности к работе

Оглавление

• Веб-расширения 101
• Разбор манифеста:
• Создание простого загрузчика изображений
• Функция загрузки:
• Мы готовы протестировать наше расширение
• Загрузка расширения
• Заключение

Веб-расширения 101

Веб-расширения похожи на моды, но для браузеров. Вы можете полностью настроить поведение браузера (например, AdBlock) или его внешний вид, как темы Mozilla.

Чтобы начать, создайте новую папку!

Все, что вам нужно, это файл манифеста.json. Это основная функция, но для веб-расширений. Это первый файл, который ищет браузер!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

Манифест содержит все метаданные вашего расширения. Это то, как браузеры понимают ваше расширение и на что оно способно.

Разбор манифеста:

• «manifest_version»: 3, Это сообщит браузеру версию API, которую вы будете использовать. Поскольку версия 2 является предыдущей, версия 3 (V3) является новейшим API. Он более безопасный и производительный, и большинство браузеров, включая Chrome, перешли только на версию 3.

Одним из ключевых отличий является переход от постоянных фоновых сценариев к сервис-воркерам. Фоновые сценарии в V2 выполнялись в течение всего срока службы расширения (пока пользователь просматривал сайт), отсюда и «постоянный» аспект. В V3 они запускаются только при необходимости!

• Скрипты контента: Сценарии контента внедряются в саму веб-страницу. В нашем небольшом расширении content.js будет внедрен в любой URL-адрес, соответствующий «соответствиям»: [""]. Таким образом, когда вы переходите по любому URL-адресу или открываете новую вкладку, контент.js будет внедрен на страницу и запущен.

Скрипты контента, в отличие от фоновых скриптов, имеют доступ к DOM.

Это базовая структура простого плагина. По мере создания новых проектов расширений вы узнаете о разрешениях и дополнительных функциях. Для введения этой простой разбивки достаточно.

Создание простого загрузчика изображений

Готовый?

Это расширение создано на основе курса по компьютерному зрению, который я прошел некоторое время назад. Нам нужно было реализовать инструмент для загрузки изображений из поиска Google.

Примечание. Я не советую использовать это расширение постоянно, если только вы не хотите загружать изображения каждый раз, когда просматриваете сайт.

В той же папке, что и ваш файл манифеста.json, создайте content.js и вставьте следующее:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

Помните, что скрипт контента внедряется в веб-страницу. Например, когда вы переходите на сайт example.com, запускается процессAllImages.

Все, что он делает, это захватывает все элементы изображения и передает их функции загрузки:

const images = document.querySelectorAll('img');

Функция загрузки:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

Примечание. Это работает только для статических изображений. Динамические и лениво загружаемые изображения могут быть повреждены — с этим можно справиться в будущих итерациях.

Мы готовы протестировать наше расширение

Я использую Brave, основанный на Chrome, но процесс во всех браузерах одинаков.

Для тестирования вам необходимо включить режим разработчика в выбранном вами браузере.

Загрузка расширения

Это расширение без изменений должно работать и в Mozilla, поскольку мы не полагаемся на пространство имен Chrome.

Храбрый:

              Введите Brave://extensions/ в адресной строке.        

              Включите режим разработчика.      

              Загрузите расширение, выбрав папку.
             

   Chrome и Edge: выполните те же действия, что и в Brave.

         (chrome://extensions/ или Edge://extensions/)

Заключение

Моды. Модификации — это весело! Это расширение может быть простым, но оно показывает основы, с которых можно начать. MDN Mozilla — это идеальный ресурс для расширения ваших знаний о веб-расширениях (как общих веб-расширениях, так и специфичных для браузера).

Запомните: отключите расширение или удалите его, когда закончите, чтобы избежать нежелательных загрузок.

Или еще лучше…

Задача: найдите способ получения входных данных (подсказка: щелчок, значок и фоновый сценарий) и запускайте функцию изображений процесса только тогда, когда пользователь нажимает кнопку.