Меняем Интернет, по одному изображению щенка за раз
Давайте поговорим о расширениях для браузера или, более конкретно, о том, как создать ваше первое расширение для Chrome. Несколько недель назад я ходил в класс, где мы очень повеселились, создав это очень глупое расширение с помощью нескольких строк кода. Я думал, что поделюсь им, чтобы вы все могли попробовать и, возможно, даже расширить его.
Что такое расширение для браузера
Прежде чем мы начнем, давайте рассмотрим, что такое расширения для браузера. Расширения браузера на самом деле представляют собой короткие фрагменты кода, которые предоставляют браузеру некоторые дополнительные функции. Вы, вероятно, прямо сейчас используете некоторые из них, например Блокировщик рекламы или Менеджер паролей. У Google есть целый магазин действительно полезных и забавных расширений Chrome, которые люди создали для улучшения работы в Интернете.
Https://chrome.google.com/webstore/category/extensions
На сегодняшний день мы создадим расширение, которое нацелено на все изображения на веб-странице и заменяет их изображениями щенков!
Структура папки
Для начала:
Клонируйте следующее репо локально, чтобы получить стартовые файлы: https://github.com/himashi99/chrome-extension
chrome-extenstion/ ├── images/ │ ├── poop_16.png │ ├── poop_32.png │ ├── poop_48.png │ └── poop_128.png ├── manifest.json ├── scripts.js ├── main.js
- Структура вашей папки должна напоминать приведенную выше.
- Я включил смайлик "какашка" для вас в папку с изображениями, но вы можете использовать любой значок изображения, который вам нравится.
- Файл манифеста - это файл JSON, который описывает наше расширение для Chrome. Здесь мы указываем важную информацию о нашем расширении, такую как необходимые ему разрешения или значки, которые оно использует.
- Включите приведенный ниже код в свой файл manifest.json.
{
"name": "Yay Chrome!",
"version": "1.2",
"description": "First project to build a fresh chrome extension",
"manifest_version": 2,
"permissions": ["activeTab", "declarativeContent"],
"icons": {
"16": "images/poop_16.png",
"32": "images/poop_32.png",
"48": "images/poop_48.png",
"128": "images/poop_128.png"
},
"page_action": {
"default_icon": {
"16": "images/poop_16.png",
"32": "images/poop_32.png",
"48": "images/poop_48.png",
"128": "images/poop_128.png"
}
},
"background": {
"scripts": ["scripts.js"],
"persistent": false
}
}
Давайте разберем приведенный выше код:
Нам нужно дать нашему расширению имя, номер версии и краткое описание.
Текущий manifest_versions - 2, оставьте это как есть.
Разрешение «activeTab» позволяет получить доступ к текущей вкладке, на которой находится пользователь. Разрешение declarativeContent позволяет расширению узнавать об изменении вкладки или посещении новой веб-страницы.
Мы импортируем значки изображений разных размеров, чтобы наше расширение работало на экранах разных размеров.
«pageAction» помещает значок на панель инструментов Chrome и представляет действие, которое может быть выполнено на текущей веб-странице, т. е. кнопка является кликабельной.
В последнем блоке кода при необходимости загружаются фоновые сценарии, которые отслеживают события и управляют ими. Для постоянного установлено значение « false », поэтому фоновые сценарии выгружаются после завершения своего действия.
В этом случае файл манифеста указывает, что должен быть загружен файл «scripts.js». Вскоре мы вернемся к файлам «scripts.js» и «main.js».
Настройка Chrome
- Откройте Chrome и войдите в Менеджер расширений.
2. Нам нужно сообщить Chrome, что мы крутые разработчики, поэтому давайте включим режим разработчика в правом верхнем углу. Это позволит нам загружать собственные расширения.
3. Нажмите «Загрузить распакованный» и выберите папку «chrome-extension».
4. Хорошо! Теперь мы загрузили наше расширение. Вы должны увидеть расширение в диспетчере расширений и значок на панели инструментов Google Chrome. Значок станет серым и неактивным.
Если вы все же внесете какие-либо изменения в файл JSON на этом этапе, вы можете нажать кнопку обновления на своем расширении.
Файл scripts.js
Пришло время активировать значок, и для этого нам нужно связать кнопку с нашим файлом «scripts.js».
- Включите приведенные ниже блоки кода в свой файл «scripts.js».
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {schemes: ['https', 'http']},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
chrome.pageAction.onClicked.addListener(function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{file: 'main.js'}
);
});
});
Давайте разберем приведенный выше код:
Первый блок кода:
Возвращаясь на секунду к файлу манифеста, помните, что мы указали разрешения для activeTab и declarativeContent? Что ж, это позволяет нам использовать API-интерфейсы Chrome («chrome.declarativeContent»), которые затем позволяют нашему расширению выполнять действия в зависимости от содержимого веб-страницы, не запрашивая разрешения хоста на чтение содержимого веб-страницы.
Мы также определили «pageAction» в файле манифеста как значок нашего расширения на панели инструментов Chrome.
Декларативный API также позволяет устанавливать правила для события «onPageChanged», которое затем выполняет действие при выполнении условий «PageStateMatcher».
«PageStateMatcher» сопоставляет веб-страницы только при соблюдении перечисленных условий. В этом случае правила будут отображать действие страницы для любой веб-страницы http или https.
removeRules вызывается для очистки всех ранее определенных правил, которые были добавлены при установке расширения, поэтому можно определить новый набор правил («addRules» ).
Второй блок кода:
При нажатии pageAction, значка расширения, который мы создали в нашем файле манифеста, мы добавляем прослушиватель, то есть пока не запускаем скрипт.
Следующая строка относится к разрешению «активной вкладки», которое мы указали в нашем файле манифеста. Chrome запрашивает текущее окно, которое открыто, и определяет активную вкладку. После определения активной вкладки запускается функция с параметрами «вкладки».
Последний фрагмент кода указывает Chrome перейти на активную вкладку, которую мы изолировали в предыдущей строке, и выполнить сценарий, в данном случае файл «main.js».
2. Сохраните файл и обновите расширение.
3. Откройте новую вкладку, и вы увидите, что ваш значок теперь активен и больше не отображается серым цветом.
Мы, наконец, закончили все настройки и можем перейти к самому интересному!
Служба заполнителей изображений
Нам нужно найти изображения для замены нашего расширения. Есть несколько сайтов, которые делают это и имеют изображения разных размеров. Я собираюсь использовать щенок, https://placedog.net/, но их гораздо больше, так что выберите свой любимый!
Файл main.js
Теперь мы собираемся написать наш скрипт, чтобы мы могли заменять изображения нашими милыми фотографиями щенков, когда мы нажимаем на наше расширение.
- Включите приведенный ниже код в свой файл main.js
var allImages = document.getElementsByTagName('img');
for (var i = 0; i < allImages.length; i++) {
allImages[i].addEventListener('mouseover', function() {
var thisImageHeight = this.clientHeight;
var thisImageWidth = this.clientWidth;
this.setAttribute('src', 'https://placedog.net/' + thisImageHeight + '/' + thisImageWidth)
})
}
Давайте разберем приведенный выше код:
Мы хотим настроить таргетинг на все изображения на данной веб-странице. Поскольку все эти элементы изображения будут иметь тег «img», мы захватываем их с помощью document.getElements byTagName ('img') и присваиваем его переменной « allImages ».
Теперь мы можем использовать цикл for, чтобы перебирать каждое изображение и добавлять прослушиватель событий. В этом случае мы ожидаем, что пользователь наведет указатель мыши на изображение.
Ширина и высота наших новых изображений должны быть равны изображениям, которые заменяются. Мы назначаем исходную высоту и ширину изображения отдельным переменным: thisImageHeigh t и t hisImageWidth.
Теперь мы можем использовать функцию setAttribute для изменения атрибута элемента src. Помните, что «это» относится к изображению, на которое наведен курсор. Мы также включим высоту и ширину изображения, используя переменные из нашей предыдущей строки.
Ты сделал это!
Хорошо, сохраните файл и обновите расширение. Откройте веб-страницу (с большим количеством изображений) и попробуйте новое забавное расширение для Chrome!
