Как установить расширение в google chrome

Как добавить расширение в Google Chrome

Google Chrome изначально далеко не так функционален как некоторые другие браузеры. Но зато у него огромная библиотека плагинов, который призваны внедрить новые возможности. И их список постоянно пополняется пользовательскими работами. Поэтому сегодня мы поговорим о том, как добавить расширение в Гугл Хром из интернет-магазина. Также будет упомянуты нюансы, которые касаются их настройки.

Подробности

Почти все дополнения для интернет-обозревателя находятся в официальном интернет-магазине Хром, то есть разработчики отвечают за их работоспособность и безопасность для браузера и ПК пользователя.

С другой стороны, в Сети есть множество сайтов, предлагающих сторонние плагины, не представленные на официальной платформе. Но их загружать стоит только в том случае, если вы уверены в источнике. В противном случае это чревато возможным заражением системы неизвестными вирусами.

Установка

Наверное, каждый пользователь знает, как добавить функционала своему браузеру, но мы все же приведем ниже пошаговую инструкцию:

1. Открываем Google Chrome и кликаем ЛКМ по главной кнопке в правом верхнем углу пользовательского интерфейса.
2. Теперь наводим курсор на вкладку «Дополнительные инструменты», в выпадающем списке выбираем пункт «Расширения».
3. Наводим курсор на кнопку в виде трех горизонтальный полосок (левый верхний угол окна).
4. В открывшейся шторке кликаем на «Открыть интернет-магазин Chrome».
5. Система автоматически перенаправляет нас на главную страничку сервиса.
6. Здесь мы активируем поисковую строку в левой части графической оболочки, вводим имя нужного плагина.

В большинстве случаев в конце происходит автоматическое перенаправление на страницу настроек, но так бывает не всегда. Так что теперь вам будет полностью понятно, как установить расширение в Google Chrome вручную с помощью интернет-магазина.

С инсталляцией на этом все, а теперь перейдем к настройкам.

Настройка

Вам необходимо по инструкции выше попасть на страницу «Расширения». Альтернативный вариант – ввести в адресную строку chrome://extensions/ и после этого нажать на клавиатуре Enter .

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

Для настройки конкретного расширения в Google Chrome достаточно найти его объект и кликнуть на кнопку «Подробнее». Открывается новое окно с информацией о разрешениях и других данных. В нем иногда присутствует пункт «Параметры…».Кликните по ней, чтобы перейти на соответствующую страницу.

Также попасть туда выйдет, если кликнуть ПКМ по иконке плагина сверху окошка браузера, а затем выбрать соответствующий пункт. Как правило, он тоже будет называться «Параметры».

Дополнение

Пользователи интересуются время от времени: «Как можно скачать расширение для Google Chrome без установки?». Но стоит понимать, что плагин в любом случае должен быть добавлен в браузер, иначе он попросту не будет работать. Другое дело, что устанавливать его как отдельную программу вовсе не нужно.

Установка расширений в Хром без интернета

Ситуация: Есть некий заказчик, у которого в закрытой сети работают сотрудники. Внутри, помимо прочего, есть веб-сайты с приложениями, для доступа к которым используется обычный Google Chrome. Внезапно уже им поставили задачу — перейти на ГОСТ. Везде. Пришлось им ставить Крипто-Про, разворачивать ГОСТовскую криптографию, и ставить известный в узких кругах софт CAdEs-plugin (или как там правильно в тамошнем капсе) для работы с ЭП. Софт состоит из двух частей — локальной программы и браузерного плагина, и с установкой последнего возникли сложности. Я думаю, что подобная ситуация может возникнуть не только с конкретно этим расширением, поэтому решил написать статью со сводкой необходимой информации в одном месте.

Механизм установки был определен давно — групповые политики, благо Хром их поддерживает довольно давно. Однако все описания установки расширений через политики оказались, мягко скажем, неполными либо устаревшими, и их применение в тестовом домене не приводило к успеху. В то же время, стоило включить доступ в Интернет, и расширения прекрасно устанавливались, но только если не указывать место, где проверять обновления.

Политики установки описаны здесь — относительно известное место в Гугле, которое легко ищется встроенным поисковиком, но не описывает достаточно деталей, чтобы настроить автоматическую установку без доступа в Интернет. Если присмотреться, абсолютно все примеры отсылают к установке через https, причем стабильно с URL магазина Google. Другие результаты в Интернете намекали на возможность использования в качестве источника файлов UNC-путей (т.е. общих файловых ресурсов).

Дальнейший поиск спустя солидное время и много подходов привел вот на этот нерешенный вопрос в поддержке Гугла, где внезапно обнаружился недостающий, как впоследствии оказалось, один из двух, элемент, необходимый для решения задачи — шаблон XML-файла с примером, который у пользователя как раз не работал. Сам файл представляет собой структуру ответа Google Update с выделенным элементом приложения, местом нахождения обновления и его версией. Выглядит шаблон так:

Что меня порадовало больше всего, так это указание, в каком формате правильно задавать UNC-путь. Быстрая проверка показала, что нет, не всё так легко, и файл с расширением, заботливо скачанный ещё в самом начале, оказался не у дел. Зато в соседних политиках с ExtensionInstallForcelist нашлись некоторые дополнительные настройки, из которых удалось собрать полный паззл.

Итак, для того, чтобы установить расширение в управляемый Хром без доступа в Интернет понадобилось настроить три политики, создать один файл и выложить само расширение в доступное место. Политики были следующими:

• ExtensionInstallForcelist — создан список из 1 элемента, с ID расширения и UNC-путем через file:/// для корректности поиска;
• ExtensionInstallSources — создан список из 1 элемента (но можно и двух), содержащий разрешенные пути для поиска источников обновлений. Описание указывает, что значениями являются регулярные выражения, однако рабочий пример содержал обычный wildcard match для проверки, его я и использовал, добавив элемент со значением \\server\share\* .
• И похоже, элемент, на котором споткнулся автор того самого вопроса в техподдержку — политика ExtensionSettings, в описании которой содержится на редкость странный пункт:

Если для экспериментального параметра override_update_url указано значение True, расширение будет установлено и обновлено с помощью URL обновления, указанного в правиле ExtensionInstallForcelist или в поле update_url правила ExtensionSettings.

После такой настройки политик Chrome успешно установил расширение из файла в общей папке.

• chrome
• offline
• extension
• расширение
• сисадминские извращения
• никто не читает теги

Как установить расширение в Google Chrome

Для начала немного о том, из себя представляет расширение: расширение – это небольшое дополнение для браузера, расширяющее его функционал. Выполнять расширения могут самые разнообразные функции: дают возможность скачивать музыку или видео там, где просто так скачать не получится, к примеру, вконтакте или на Youtube. Упрощают работу с документами, изображениями, дают возможность выбора, какой поисковой системой воспользоваться в конкретной ситуации без перехода на сайт поисковика, изменяют внешний вид сайта.

Как установить расширение в Google Chrome из магазина

Расширения в Google Chrome устанавливаются из официального магазина приложений, пусть название вас не смущает – покупать ничего не придется. Чтобы попасть в магазин расширений, перейдите по ссылке

Ссылка откроется в новой вкладке, а вы позже сможете вернуться к этой статье.

Или перейдите в магазин, воспользовавшись меню браузера: в правом верхнем углу браузера нажмите на кнопку с тремя точками. Откроется меню браузера, в нем нужно выбрать «Дополнительные инструменты». Появится еще одно окно, в котором нужно найти пункт «Расширения» и нажать на него:

Теперь вы находитесь во вкладке с расширениями, установленными в браузере. Если до этого никаких расширений установлено не было, то здесь не будет ничего, или же будут отображены предустановленные расширения Google Chrome – документы, презентации, таблицы. Зависит от версии браузера. Нажмите слева сверху на пункт меню «Расширения», затем внизу на «Открыть интернет-магазин Chrome»:

после чего вы попадете в магазин расширений. Здесь можно просмотреть все доступные, отсортировать их по категориям, возможностям, оценкам. Единственный минус – язык, не все расширения имеют описание и интерфейс на русском языке.

Если вы знаете, какое именно расширение вам нужно, то достаточно вписать его название в «Поиск по магазину» и нажать Enter. Обратите внимание, в результатах поиска могут присутствовать не только расширения, но и приложения. Чтобы не ошибиться, выберите в результатах поиска «Расширения». Из найденных результатов выберите необходимое расширение и нажмите кнопку «Установить»:

После установки в правом верхнем углу должна появиться иконка, с помощью которой осуществляется управление расширением, его настройка, включение или отключение каких-либо функций:

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

Как установить стороннее расширение в Google Chrome

Если у вас есть стороннее расширение или юзерскрипт из источника, которому вы доверяете, но по какой-либо причине в магазине Google Chrome это расширение отсутствует, установить обычным способом его не получится. Для обеспечения безопасности установка сторонних расширений, т. е. расширений не из магазина, в хроме запрещена. Ниже представлены способы, с помощью которых это ограничение можно обойти.

Установка скачанного расширения в формате .crx

1. Вначале нужно открыть страницу расширений в браузере, как это сделать было описано выше: Меню браузера в правом верхнем углу > Дополнительные инструменты > Расширения. Или скопируйте chrome://extensions/ вставьте в адресную строку браузера и нажмите Enter.
2. В верхней части страницы есть переключатель «Режим разработчика», активируйте его. Ниже появятся 3 дополнительные кнопки: «Загрузить распакованное расширение»«Упаковать расширение» и «Обновить расширения»:

1. Файл расширения, оканчивающийся на .crx, переименовать так, чтобы он оканчивался на .zip и открыть его с помощью архиватора как обычный архив. Распаковать его в подготовленную для этого папку (например, создать на диске «C» папку с названием Extensions, или любым другим названием).
2. В браузере, на странице с расширениями, нажать на кнопку «Загрузить распакованное расширение» и в появившемся окне выбрать созданную папку, после чего нажать ОК.

Расширение будет установлено в браузер, теперь осталось лишь активировать его, переведя переключатель рядом с расширением в положение «Включено».

Установка юзерскрипта – файла вида .user.js в Google Chrome

Способ первый, более простой, но требующий установки дополнительного расширения. Расширение называется tampermonkey, его нужно установить из магазина Google Chrome. После установки оно будет доступно в правом верхнем углу браузера. При нажатии левой кнопкой мыши на значок расширения появится вот такое окно:

в котором нужно выбрать пункт «Создать новый скрипт». Обратите внимание, напротив пункта «Включено» должна стоять зеленая галочка.

Откроется окно для создания нового скрипта. Теперь нужно скаченный юзерскрипт открыть с помощью текстового редактора, код из него скопировать и вставить в это окно в браузере. После чего нажать на « Файл -> Сохранить»:

Скрипт готов к работе.

Второй способ установки юзерскрипта – без использования расширений. Для этого скрипт придется немного доработать, создать для него файл manifest.json, благодаря которому скрипт можно будет установить как распакованное расширение.

1. Для начала нужно скачать сам файл скрипта с названием *.user.js.
2. Теперь создайте папку и положите в нее скрипт (например, создайте на диске «C» папку с названием Extensions, или любым другим названием).
3. Откройте скрипт с помощью текстового редактора. Обратите внимание! Обычный блокнот Windows может не подойти – желательно использовать текстовый редактор с возможностью изменения кодировки, например Notepad++. Текст двух этих файлов должен быть в кодировке UTF-8, иначе установить не получится. В файле скрипта, в самом начале, найдите следующие строки:

Создание расширения браузера Google Chrome для извлечения всех изображений web-страницы. Часть 1

Расширения браузера — это web-приложения, которые устанавливаются в web-браузер, чтобы расширить его возможности. Обычно, для того чтобы воспользоваться расширением, пользователю нужно найти его в Chrome Web Store и установить.

В этой статье я покажу как создать расширение для браузера Google Chrome с нуля. Это расширение будет использовать API браузера, для того чтобы получить доступ к содержимому web-страницы любой открытой вкладки. С помощью этих API можно не только читать информацию с открытых web-сайтов, но и взаимодействовать с этими страницами, например, переходить по ссылкам или нажимать на кнопки. Таким образом расширения браузера могут использоваться для широкого круга задач автоматизации на стороне клиента, таких как web-scrape или даже автоматизированное тестирование frontend.

Мы создадим расширение, которое называется Image Grabber. Оно будет содержать интерфейс для подключения к web-странице и для извлечения из нее информации о всех изображениях. Далее, при нажатии на кнопку «GRAB NOW» список абсолютных URL этих изображений будет скопирован в буфер обмена. В этом процессе вы познакомитесь с фундаментальными строительными блоками, которые в дальнейшем можно будет использовать для создания других расширений.

Расширения, создаваемые таким образом для браузера Chrome совместимы с другими браузерами, основанными на движке Chromium и могут быть установлены, например, в Yandex-браузер или Opera.

В результате при правильном выполнении всех шагов, вы получите расширение, которое будет выглядеть и работать так, как показано на следующем видео:

Это только первая часть истории. Во второй части я покажу, как расширить интерфейс, чтобы выгрузить все или выбранные изображения в виде ZIP-архива, а также, как опубликовать свое расширение в Chrome Web Store.

Базовая структура расширения

Расширение Google Chrome — это web-приложение, содержащее любое количество HTML-страниц, файлов CSS и изображений, а также, файл manifest.json, который определяет как расширение выглядит и работает. Все эти файлы должны быть в одной папке.

Минимальное расширение состоит только из одного файла manifest.json. Вот пример этого файла, который вы можете использовать как шаблон при начале создания любого расширения:

< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": <>, "action": <>, "permissions": [], "background":<> >

Здесь только manifest_version должен быть равен 3. Остальные поля заполняются произвольно в зависимости от назначения расширения: name — название расширения, description — краткое описание, version — версия. Остальные параметры мы будем заполнять по ходу разработки интерфейса. Полный список параметров manifest.json можно найти в официальной документации.

Папка с одним файлом manifest.json — это минимальное расширение, которое может быть установлено в Google Chrome и запущено. Оно ничего не будет делать, однако именно с установки нужно начинать. Поэтому создайте папку image_grabber, затем добавьте в нее текстовый файл manifest.json с содержимым приведенным выше.

Установка расширения

В процессе разработки расширения, оно представляет собой папку с файлами. В терминологии Google Chrome это называется «unpacked extension». После завершения разработки, его нужно упаковать в ZIP-архив и загрузить в Chrome Web Store, откуда оно потом может быть установлено в браузер.

Однако на этапе разработки, «unpacked extension» тоже можно установить, просто как папку с файлами. Для этого нужно ввести chrome://extensions в браузере, чтобы открыть Chrome Extensions Manager:

Это покажет список уже установленных расширений. Чтобы устанавливать в него «unpacked extensions», включите флажок «Developer mode» в правом верхнем углу. После этого должна отобразиться панель управления расширениями.

Затем нажмите первую кнопку Load unpacked и укажите папку, в которой находится расширение с файлом manifest.json. В нашем случае это папка image_grabber. Расширение должно отобразиться в списке:

Эта панель должна показывать данные расширения такие как имя, описание и версию, ранее указанные в manifest.json, а также уникальный идентификатор, присвоенный этому расширению. Каждый раз после изменения manifest.json и файлов, непосредственно указанных в нем, нужно обновлять расширение в браузере, нажимая на кнопку «Reload«:

Чтобы запустить и использовать установленное расширение в браузере, нажмите кнопку Extensions на панели инструментов Google Chrome рядом с URL и найдите «Image Grabber» в списке установленных расширений:

Также можно нажать иконку Pin в списке рядом с расширением, чтобы добавить кнопку данного расширения на панель Chrome, рядом с другими расширениями:

Вот как выглядит минимальное расширение — кнопка с серым прямоугольником и буквой внутри. При нажатии на эту кнопку ничего не происходит. Давайте заполним остальные поля файла manifest.json, чтобы изменить картинку расширения и заставить его выполнять нужные действия.

Добавление иконок

Параметр icons файла manifest.json принимает объект JavaScript, ключами которого являются размеры иконок, а значениями пути к файлам с этими иконками. Иконка это картинка с расширением PNG (для прозрачности). Расширение должно иметь иконки разных размеров: 16×16, 32×32, 48×48 и 128×128. Я создал иконки для всех этих размеров и поместил их в папку «icons» внутри папки с расширением. Сделайте то же самое. Имена файлов могут быть любыми:

< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": <>, "permissions": [], "background":<> >

Как видно, здесь указаны относительные пути к файлам в папке icons.

После изменения manifest.json нажмите кнопку «Reload» на панели расширения Image Grabber в Chrome Extensions Manager, чтобы обновить установленное расширение. Если все сделано как описано выше, то картинка на кнопке расширения должна измениться:

Так значительно лучше, однако когда мы нажимаем на эту кнопку все еще ничего не происходит. Пришло время добавить «действия» (actions) к расширению.

Создание интерфейса расширения

Расширение должно что-то делать, то есть запускать определенные действия. Расширение может выполнять действия двумя способами:

• В фоне, при запуске расширения и при дальнейшей его работе
• Из интерфейса, когда пользователь нажимает кнопку расширения и затем взаимодействует с различными интерфейсными элементами.

Расширение может использовать обе эти возможности одновременно.

Чтобы запускать действия в фоне, нужно создать Javascript-файл и указать путь к нему в параметре «background» файла manifest.json. Этот скрипт может содержать функции обработчики различных событий браузера и жизненного цикла самого расширения. Background-скрипт слушает эти события и запускает написанные для них функции обработчики.

Однако в этом расширении мы этим пользоваться не будем и параметр «background» останется пустым. Он присутствует только для того, чтобы показать что это возможно и что данный файл manifest.json может использоваться для создания расширений любого типа. Однако расширение Image Grabber выполняет действия только когда пользователь нажимает кнопку «GRAB NOW» из интерфейса.

Соответственно мы создадим интерфейс для расширения. Интерфейс расширения это фактически Web-сайт, состоящий из HTML-страниц с элементами управления, CSS-таблиц стилей и скриптов, которые реагируют на события элементов управления из этих HTML-страниц и выполняют определенные действия, используя в частности API расширений Google Chrome.

Интерфейс должен содержать главную страницу, которая появляется при нажатии на кнопку расширения. Эта страница может появляться либо в новой вкладке браузера, либо внутри всплывающего окна, как было показано на видео. Именно так и будет реализован интерфейс Image Grabber. Чтобы создать интерфейс всплывающего окна, внесите следующие изменения в manifest.json:

< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": < "default_popup":"popup.html" >, "permissions": [], "background":<> >

Здесь определено, что основное действие (action) расширения это всплывающее окно (popup), которое содержит страницу popup.html.

Теперь создайте файл popup.html с заголовком Image Grabber и кнопкой «GRAB NOW» и поместите его в папку с расширением:

     
Image Grabber
 GRAB NOW  

Кнопка имеет идентификатор grabBtn который в дальнейшем будет использоваться из скрипта, чтобы реагировать на нажатия.

Чтобы увидеть, что изменилось, снова обновите расширение в Chrome Extensions Manager. Если все было сделано как написано выше, то при нажатии на иконку расширения будет появляться содержимое файла popup.html во всплывающем окне:

Работает!! Но выглядит не очень. Теперь нужно стилизовать этот интерфейс с помощью CSS.

Создайте файл popup.css со следующим содержимым и поместите его в папку с расширением:

body < text-align:center; width:200px; >button

Этот файл определяет стили для кнопки и для body всей страницы: все содержимое выровнено по центру, а также, ширина содержимого будет 200 пикселей.

Добавьте ссылку на файл с этими стилями в popup.html:

     
Image Grabber
 GRAB NOW  

Теперь при нажатии на кнопку расширения появится стилизованный интерфейс:

Обратите внимание, что в данном случае не требовалось нажимать кнопку Reload, для того чтобы обновить расширение. Изменения в файлах web-интерфейса расширения начинают работать автоматически.

Чтобы придать интерфейсу завершенность, добавим JavaScript-код, который будет реагировать на нажатия кнопки «GRAB NOW«. Создайте файл popup.js в папке с расширением со следующим содержимым:

const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < alert("CLICKED"); >)

и добавьте ссылку на этот файл в popup.html:

     
Image Grabber
 GRAB NOW  

Таким образом мы добавили событие onClick для кнопки с идентификатором «grabBtn«. Теперь, при нажатии на кнопку «GRAB NOW» в интерфейсе, должно появляться предупреждение «CLICKED».

В результате мы имеем такую файловую систему расширения:

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

Теперь реализуем бизнес логику расширения: при нажатии на кнопку «GRAB NOW» расширение должно извлечь список путей ко всем картинкам текущей страницы в браузере и скопировать этот список в буфер обмена.

Функция «GRAB NOW»

Используя Javascript в расширении можно делать все то же самое, что и при использовании JavaScript на web-сайте, например открывать различные web-страницы из текущей или делать AJAX HTTP-запросы к различным серверам. Но в дополнении к этому, Javascript-код в расширении браузера может использовать различные API Chrome для взаимодействия с компонентами самого браузера. Большинство этих API доступно через пространство имен chrome . В частности, расширение Image Grabber будет использовать следующие API:

• chrome.tabs — Chrome Tabs API. Будет использоваться для доступа к активной вкладке браузера.
• chrome.scripting — Chrome Scripting API. Будет использоваться для внедрения кода JavaScript на web-страницу активной вкладки и для исполнения этого кода в контексте этой страницы.

Получение необходимых разрешений

По умолчанию, из соображений безопасности, расширение Chrome не имеет доступа ко всем API браузера. Необходимо запросить этот доступ через механизм разрешений. Для этого нужно указать список требуемых разрешений в параметре permissions в файле manifest.json. Существует множество различных разрешений, которые описаны здесь: https://developer.chrome.com/docs/extensions/mv3/declare_permissions/. Для Image Grabber нужно указать следующие из них:

• activeTab — разрешение для получения доступа к текущей вкладке браузера.
• scripting — разрешение для получения доступа к Chrome Scripting API для исполнения скриптов в контексте Web-страницы, открытой в браузере.

Добавьте эти разрешения в параметр permissions в файле manifest.json:

< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": < "default_popup":"popup.html", >, "permissions": ["scripting", "activeTab"], "background":<> >

и обновите расширение в Chrome Extensions Manager.

Между тем, листинг выше — это окончательный вариант файла manifest.json для расширения. Теперь здесь есть все: название, описание, версия, иконки, ссылка на главную страницу интерфейса и разрешения на доступ к браузеру, которые этому интерфейсу необходимы.

Получение информации об активной вкладке браузера

Для получения информации о вкладках браузера используется функция chrome.tabs.query , которая определена следующим образом:

chrome.tabs.query(queryObject,callback)

• queryObject — объект запроса в котором указываются параметры поиска нужных вкладок.
• callback — функция обратного вызова, которая выполняется после выполнения этого запроса. В нее передается массив tabs , содержащий все найденные вкладки, соответствующие критерию запроса. Каждый элемент этого массива — это объект типа Tab , содержащий информацию о вкладке, включая ее уникальный идентификатор. Этот идентификатор будет использоваться для исполнения Javascript-кода на этой вкладке.

Здесь я не буду полностью описывать синтаксис queryObject , а также все поля возвращаемых объектов Tabs . Эту информацию можно найти в официальной документации по chrome.tabs : https://developer.chrome.com/docs/extensions/reference/tabs/.

Для расширения Image Grabber нужно получить только активную вкладку. Для этой цели queryObject должен быть определен как: .

const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < chrome.tabs.query(, (tabs) => < const tab = tabs[0]; if (tab) < alert(tab.id) >else < alert("There are no active tabs") >>) >)

chrome.scripting.executeScript(injectSpec,callback)

< target:< tabId: tab.id, allFrames: true >, func: grabImages, >, 

const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < chrome.tabs.query(, function(tabs) < var tab = tabs[0]; if (tab) < chrome.scripting.executeScript( < target:, func:grabImages >, onResult ) > else < alert("There are no active tabs") >>) >) function grabImages() < // TODO - Запросить список изображений // и вернуть список их URL-ов >function onResult(frames) < // TODO - Объединить списки URL-ов, полученных из каждого фрейма в один, // затем объединить их в строку, разделенную символом перевода строки // и скопировать в буфер обмена >

/** * Функция исполняется на удаленной странице браузера, * получает список изображений и возвращает массив * путей к ним * * @return Array массив строк */ function grabImages() < const images = document.querySelectorAll("img"); return Array.from(images).map(image=>image.src); >

/** * Выполняется после того как вызовы grabImages * выполнены во всех фреймах удаленной web-страницы. * Функция объединяет результаты в строку и копирует * список путей к изображениям в буфер обмена * * @param <[]InjectionResult>frames Массив результатов * функции grabImages */ function onResult(frames) < // Если результатов нет if (!frames || !frames.length) < alert("Could not retrieve images from specified page"); return; >// Объединить списки URL из каждого фрейма в один массив const imageUrls = frames.map(frame=>frame.result) .reduce((r1,r2)=>r1.concat(r2)); // Скопировать в буфер обмена полученный массив // объединив его в строку, используя символ перевода строки // как разделитель window.navigator.clipboard .writeText(imageUrls.join("\n")) .then(()=>< // закрыть окно расширения после // завершения window.close(); >); >

const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < // Получить активную вкладку браузера chrome.tabs.query(, function(tabs) < var tab = tabs[0]; // и если она есть, то выполнить на ней скрипт if (tab) < execScript(tab); >else < alert("There are no active tabs") >>) >) /** * Выполняет функцию grabImages() на веб-странице указанной * вкладки и во всех ее фреймах, * @param tab Объект вкладки браузера */ function execScript(tab) < // Выполнить функцию на странице указанной вкладки // и передать результат ее выполнения в функцию onResult chrome.scripting.executeScript( < target:, func:grabImages >, onResult ) > /** * Получает список абсолютных путей всех картинок * на удаленной странице * * @return Array Массив URL */ function grabImages() < const images = document.querySelectorAll("img"); return Array.from(images).map(image=>image.src); > /** * Выполняется после того как вызовы grabImages * выполнены во всех фреймах удаленной web-страницы. * Функция объединяет результаты в строку и копирует * список путей к изображениям в буфер обмена * * @param <[]InjectionResult>frames Массив результатов * функции grabImages */ function onResult(frames) < // Если результатов нет if (!frames || !frames.length) < alert("Could not retrieve images from specified page"); return; >// Объединить списки URL из каждого фрейма в один массив const imageUrls = frames.map(frame=>frame.result) .reduce((r1,r2)=>r1.concat(r2)); // Скопировать в буфер обмена полученный массив // объединив его в строку, используя возврат каретки // как разделитель window.navigator.clipboard .writeText(imageUrls.join("\n")) .then(()=>< // закрыть окно расширения после // завершения window.close(); >); >