Как использовать чат Microsoft Bing AI в любом веб-браузере (рабочий метод)
С момента запуска несколько недель назад новый ИИ Bing от Microsoft был воспринят со смесью любви и скептицизма. В то время как некоторые пользователи провели бесчисленные часы, разговаривая с ним, другие с осторожностью относились к его ответам. Компания даже вмешалась и ограничила ответы Bing, чтобы держать его под контролем. Однако еще одно ограничение нового чат-бота Bing AI заключается в том, что вы можете использовать его только в браузере Microsoft Edge. Если вы принадлежите к числу тех, кто (каким-то образом) любит Bing, но не хочет использовать Edge, вам повезло. Теперь есть удобный способ использовать новый Microsoft Bing AI во всех настольных браузерах. Итак, откройте новую вкладку в Google Chrome и начнем.
Оглавление
Используйте чат Bing AI в любом веб-браузере (2023 г.)
Прежде чем мы начнем использовать Bing AI Chat в любом браузере на Windows или Mac, мы должны выполнить определенные требования. Однако, если вы уже знаете об этом, используйте таблицу ниже, чтобы перейти к самому процессу.
Требования для доступа к Bing AI в вашем браузере
1. Учетная запись Майкрософт
Поскольку мы собираемся использовать службу Microsoft, нам потребуется учетная запись Microsoft для использования Bing AI. К счастью, его легко сделать. Просто отправляйтесь в Страница учетной записи Майкрософт (регистр) и сделать один для себя. Вам нужно предоставить несколько стандартных данных и подтвердить свой адрес электронной почты, но вы должны быть готовы к этому.
2. Доступ к новому Bing
Новый чат-бот Bing AI пока доступен с ограниченным доступом. Таким образом, вам нужно будет присоединиться к списку ожидания чтобы вас впустили. Хотя это не идеально, в настоящее время это единственный способ начать использовать новый Bing AI в вашем веб-браузере.
2. Существует высокая вероятность того, что вы выйдете из своей учетной записи Microsoft, поэтому вы просто окажетесь на главном экране Microsoft Bing. Когда-то, щелкните Кнопка «Войти» вверху справа.
3. Продолжайте вводить свой адрес электронной почты и пароль для входа в систему. Если вам будет предложено оставаться в системе, нажмите «Да» на следующем экране.
4. После этого закройте открытую вкладку Bing и нажмите на расширение и кнопку, как показано на первом шаге. После этого откроется режим чата Bing AI, и вы готовы к работе.
Как мы упоминали выше, вы получите доступ только после того, как Microsoft очистит вас. Этот шаг потребует регистрации, как показано выше, а затем ожидания письма с подтверждением. Однако не беспокойтесь, так как вам не придется ждать слишком долго. Тем не менее, когда вы это сделаете, вы можете выполнить описанные выше шаги, чтобы легко установить Bing во всех своих браузерах.
Мой опыт использования чат-бота Bing AI в разных браузерах совсем без усилий. Расширение запускает Bing быстро и без проблем. Я мог общаться с чат-ботом AI несколько раз без сбоев браузера или расширения. Кроме того, я даже установил Bing AI в Firefox, и там он тоже работал хорошо. Таким образом, независимо от того, какой браузер вы используете, можно с уверенностью сказать, что вы можете использовать там бота MS Bing AI.
Используйте чат-бот Bing AI во всех ваших браузерах
Мы надеемся, что это краткое руководство поможет вам настроить новый Microsoft Bing AI во всех ваших браузерах, будь то macOS или Windows. После того, как вы закончите с чат-ботом Bing AI, ознакомьтесь с другими приложениями для написания ИИ, а также некоторыми интересными вещами, которые вы можете делать с помощью ChatGPT. Ну что, уже надоело? Затем ознакомьтесь с этими лучшими альтернативами ChatGPT или скачайте Snapchat+ и попробуйте новый чат-бот «Мой ИИ» в приложении для обмена сообщениями. Если у вас возникнут какие-либо проблемы, оставьте свои вопросы в комментариях ниже.
Как установить crx в Chrome
Установите расширение Chrome из ZIP-файла менее чем за минуту
Обычно при установке расширения Chrome вы делаете это из Интернет-магазина Chrome. Однако некоторые расширения не публикуются в интернет-магазине. Это может быть связано с тем, что они используют дополнительные функции, не поддерживаемые правилами Интернет-магазина, независимо разработаны или являются бета-версиями.
Они называются внешними расширениями, и их необходимо устанавливать вручную.
Ниже приведены два простых шага по установке внешних расширений в Chrome. Эти шаги подходят для «распакованных» расширений (загруженных в виде сжатой папки .zip/rar), а также для файлов .crx.
Прежде чем мы перейдем к шагам, которые буквально занимают меньше минуты, мы хотим отметить риски безопасности.
Угрозы безопасности
Когда расширения отправляются в Интернет-магазин, Google может просмотреть и заблокировать вредоносные расширения. Когда вы устанавливаете расширение вручную, такая проверка не производилась, и код может быть вредоносным и непроверенным.
Вручную устанавливать расширение следует только тогда, когда вы осознаете этот риск.
Как вручную установить расширение Chrome
-
- Загрузить расширение. Обычно расширения поставляются в виде файла zip/rar. Извлеките файлы в их собственную папку. Если расширение представляет собой файл «.crx», это формат для расширений Chrome, который содержит все его данные — ничего извлекать не нужно.
- В Chrome перейдите к chrome://extensions/. Теперь перетащите расширение из файлового менеджера в любое место на страницу расширений в Chrome. Если расширение представляет собой файл .crx, вам будет предложено проверить разрешения и добавить расширение.
Готово! Расширение установлено, и вы готовы к работе. Теперь вы можете управлять расширением так же, как и любым другим, а его значок появится в меню Chrome (если он есть) справа от адресной строки.
Обратите внимание, что каждый раз, когда вы перезапускаете Chrome, в первом новом окне будет отображаться уведомление об угрозах безопасности, связанных с режимом разработчика. Чтобы оставить расширения включенными, нажмите «Отмена». Это немного неприятно, но это всего лишь один клик!
Я только что создал очень простое расширение для Chrome, и оно отлично работает. Но когда я преобразовал в файл .crx и попытался открыть его с помощью Chrome, ничего не происходит. моя версия браузера Chrome — 19.0.1081.2 dev-m. В моем расширении используется jquery-1.4.2.min. Я не мог понять, в чем проблема?
Когда вы говорите открыть его с помощью Chrome , как вы его открываете? Просто вы использовали, чтобы иметь возможность перетаскивать crx в Chrome, чтобы открыть его, и это больше не работает, теперь мне нужно дважды щелкнуть расширение в проводнике, чтобы установить его.
6 ответов 6
Обновление: кажется, перестало работать с Chrome 80
Перетащите файл ‘.crx’ на страницу «Расширения»
- Настройки — значок >Инструменты >Расширения
(значок «гамбургер» в правом верхнем углу) - Включить режим разработчика (переключатель в правом верхнем углу)
- Перетащите файл с расширением ‘.crx’ на страницу расширений из шага 1
(файл crx, скорее всего, должен находиться в папке Загрузки) - Установить
Источник: Chrome YouTube Downloader – инструкции по установке
Спасибо 🙂 это работает даже с новой политикой Chrome, запрещающей принимать расширения, кроме тех, что из Интернет-магазина Chrome. («Расширения, приложения и пользовательские скрипты можно добавлять только из Интернет-магазина Chrome».)
Обратите внимание, что вы должны сначала загрузить crx из окна Chrome непосредственно перед попыткой перетащить его, как описано. Если у вас есть предыдущая копия crx, загруженная неизвестно когда и кто знает как, вы не сможете просто перетащить ее.
У меня была аналогичная проблема, когда я не мог установить файл CRX в Chrome.
Оказывается, поскольку моя папка «Загрузки» была настроена на сетевой диск, он не позволял Chrome устанавливать какие-либо расширения и либо ничего не делал (перетаскивал в Chrome), либо предлагал загрузить расширение (если Я щелкнул ссылку из интернет-магазина).
Установка папки «Загрузки» в каталог локального диска вместо сетевого каталога позволяла устанавливать расширения.
Бег: 20.0.1132,57 м
Я изменил место загрузки с сетевого диска на внешний диск, и теперь надстройки устанавливаются правильно! Больше никаких поддельных ошибок «Это не CRX»! Спасибо.
Если Chrome сообщает вам, что это можно добавить только из Интернет-магазина Chrome, вы можете попробовать следующее:
- Перейдите в интернет-магазин и попробуйте добавить расширение.
- Произойдет сбой, и вместо этого будет предложена загрузка.
- Переименуйте загруженный файл в .zip и распакуйте его в каталог (вы можете получить предупреждение о поврежденном заголовке zip, но большинство распаковщиков все равно продолжит работу)
- Откройте «Настройки» -> «Инструменты» -> «Расширения».
- Включить режим разработчика
- Нажмите «Загрузить распакованное расширение»
- Перейдите к распакованной папке и установите расширение.
спасибо, теперь это работает для меня, перетаскивание не работает для хрома 65.0. но для этого нужно, чтобы распакованная папка всегда существовала.
При попытке распаковать файл .zip создается файл .cpgz, который невозможно загрузить на страницу расширений.
Открывая консоль отладки в Chrome или даже просматривая исходный HTML-файл (после его загрузки в браузере), убедитесь, что все пути в нем действительны (т. е. когда вы переходите по ссылке, вы попадаете в ее содержимое, и не ошибка). Если что-то недействительно, исправьте путь (например, избавьтесь от части, относящейся к серверу, и убедитесь, что вы ссылаетесь только на файлы, которые являются частью вашего расширения, через такие пути, как /js/jquery-123-min.js).
Этот флаг характерен для Ungoogled Chromium и отсутствует в стандартном Chromium или любом другом форке Chromium.
Формат файла
Этот инструмент анализирует формат .CRX версии 2, задокументированный Google. Как правило, формат файла .CRX состоит из нескольких частей:Волшебный заголовок
Версия формата файла
Информация об открытом ключе и подпись пакета Заархивированное содержимое исходного кода расширения Волшебный заголовок — это подпись файла, говорящая о том, что этот файл является расширением Chrome. Используя этот заголовок, операционная система может определить фактический тип файла (MIME-тип — это приложение/x-chrome-extension) и как с ним следует обращаться (исполняемый файл или текстовый файл?). Тогда оконная система сможет показать пользователю красивую иконку.В файлах .CRX магический заголовок имеет постоянное значение Cr24 или 0x43723234.
Версия предоставляется поставщиком. Байты версии: 0x02000000.
Следующая часть файла содержит информацию о длине открытого ключа и длину цифровой подписи.
Все пакеты .CRX, распространяемые через Chrome WebStore, должны иметь информацию об открытом ключе и цифровую подпись, чтобы браузер мог проверить, что пакет был передан без изменений и что не было сделано никаких добавлений или замен.
После всех заголовков, обычно заканчивающихся на 307-м байте, идет код расширения, хранящийся в виде zip-архива. Таким образом, остальная часть файла .crx представляет собой хорошо известный архив .zip.
Файл .crx, открытый в шестнадцатеричном редакторе HexFiend (на Mac) Часть заголовка файла .crx, выбранная на изображении выше. Очевидно, что вы можете распаковать оставшийся .zip-архив «вручную» с помощью любого простого шестнадцатеричного редактора. В этом примере мы используем удобный редактор HexFiend на Mac.
Экстрактор CRX загружает предоставленный файл, проверяет магический заголовок, версию и обрезает файл, поэтому остается только архив .zip. Затем он возвращает полученный .zip-архив пользователю.
Хотите узнать, как установить расширения Chrome? И как загрузить файлы CRX в Chrome? Google Chrome — это быстрый веб-браузер, и вы можете настроить его в соответствии со своим личным стилем. С расширением Chrome вы можете настроить дизайн и функциональность веб-браузера. Все расширения Chrome для веб-браузера Google Chrome доступны только в интернет-магазине Chrome. Это магазин Google, где можно получить ваши «Расширения», «Темы» и «Приложения». Обратите внимание, что приложения доступны только для пользователей Google Chromebook.
Кроме того, очень легко получить новое расширение Chrome в своем личном веб-браузере Google Chrome. Итак, чтобы узнать, как установить расширение Chrome, следуйте приведенным ниже инструкциям для всех операционных систем (Windows, Linux и Mac):
Теперь в веб-браузере Google Chrome установлено расширение Chrome. И большинство расширений Chrome предоставляют дополнительную страницу для настройки расширения Chrome. Например, изменить цвет или добавить другие визуальные эффекты. Или включите функцию YouTube AutoHD для 4K или используйте качество видео 360p, чтобы решить проблему климата, которая снижает высокую производительность на интернет-сервере, что приводит к значительному увеличению выхода углекислого газа (CO2). И нанесет ущерб углеродному следу.
Углеродный след — это общий объем выбросов парниковых газов, вызванных отдельным лицом, мероприятием, организацией, услугой или продуктом, выраженный в эквиваленте углекислого газа.
Определение углеродного следа
Метод разработчика расширений Chrome
Если вы хотите узнать, как устанавливать расширения Chrome вручную. Затем вы можете использовать режим разработчика. Однако режим разработчика рекомендуется только для создания и отладки расширения Chrome. Поэтому его нельзя использовать для повседневного использования в веб-браузере Chrome.
- Загрузите файл CRX на свой компьютер для расширения Chrome, которое вы хотите установить.
- Откройте веб-браузер Google Chrome.
- Перейдите на страницу chrome://extensions/ и установите флажок «Режим разработчика» в правом верхнем углу.
- Нажмите кнопку «Загрузить распакованное» и перейдите к расположению этого содержимого этого файла CRX. И нажмите кнопку «ОК», чтобы установить это расширение Chrome.
Заключение
Надеюсь, что вы ответили на один из ваших вопросов об установке расширения Chrome и загрузке файла CRX в Google Chrome:
- Где установить расширения Chrome в веб-браузере Google Chrome?
- Как установить расширения Chrome?
- Как загрузить файлы CRX в Chrome?
Теперь вы знаете, как установить расширение Chrome в веб-браузере Google Chrome. И как загрузить файлы CRX в Chrome. Если вы сочтете это полезным, вы можете поделиться ссылкой на Facebook или поделиться ссылкой на Twitter. Чтобы ваша семья, друзья или коллеги знали об этом полезном совете.
Как загрузить файлы CRX в FAQ по установке Chrome
�� Является ли процесс установки CRX одинаковым для всех веб-браузеров?
Да, шаги одинаковы для всех веб-браузеров Chromium, таких как Microsoft Edge, Opera, Brave, Vivaldi, Yandex и т. д. Однако Firefox использует другой движок Chromium, и вы не можете установить файл CRX в этом веб-браузере. .
�� Могу ли я повторно опубликовать файл CRX на своем веб-сайте?
Нет, CRX защищены Законом о защите авторских прав в цифровую эпоху, и лучше всего загружать официальные расширения Chrome из интернет-магазина Chrome.
�� Могу ли я изменить файлы и воссоздать файл CRX?
Нет, это приведет к потере подписанного подтверждения, и вы не сможете установить этот файл CRX в своем веб-браузере Chromium.
�� Как посмотреть файлы в файле CRX?
CRX – это ZIP-файл. Если вы измените расширение файла с CRX на ZIP. Вы можете разархивировать его в папку и просматривать файлы как обычный ZIP-файл.
Нашли ли вы технические, фактические или грамматические ошибки на веб-сайте Turn Off the Lights?
Вы можете сообщить о технической проблеме, используя онлайн-форму обратной связи по технической ошибке Turn Off the Lights.Как установить расширения Chrome за 3 простых шага? Последнее изменение: 26 марта 2021 г., Стефан Ван Дамм.
Об авторе
Стефан Ван Дамм
Стефан Ван Дамм — ведущий разработчик браузерного расширения Turn Off the Lights для Google Chrome, Safari, Opera, Firefox, Maxthon, Brave, Vivaldi и Microsoft Edge.
Google заставляет вас думать, что расширения Chrome можно устанавливать только из Интернет-магазина Chrome. Однако, если вы готовы рискнуть, есть способ установить сторонние расширения, которые вы найдете в свободном доступе.
Мэтт Эллиотт, писатель с опытом работы более десяти лет, тестировщик ПК и пользователь Mac из Нью-Гэмпшира.
За прошедшие годы компания Google ужесточила ограничения на установку сторонних расширений Chrome, чтобы защитить пользователей Chrome от вредоносного кода. Несколько лет назад вы могли без проблем установить расширение с сайта разработчика. В прошлом году вам нужно было только включить режим разработчика перед установкой файла CRX (расширение Chrome). Теперь, по словам Google, «для защиты вас во время просмотра Chrome позволяет использовать только те расширения, которые были опубликованы в Интернет-магазине Chrome».
Если вы готовы взять на себя риск, Google оставила открытой боковую дверь для разработчиков, чтобы они могли тестировать свои расширения, которые вы можете использовать для установки расширений, которых нет в Интернет-магазине Chrome. И вот та часть, где я еще раз говорю, что установка непроверенных расширений из неизвестных источников рискованна и может подвергнуть ваш компьютер вредоносному коду. Действуйте на свой страх и риск.
Все еще со мной? Хорошо, вот шаги, необходимые для установки расширения не из Интернет-магазина Chrome.
1. Загрузите файл CRX на свой компьютер для расширения Chrome, которое вы хотите установить.
2. Перейдите на страницу chrome://extensions/ и установите флажок Режим разработчика в правом верхнем углу.
3. Используйте приложение CRX Extractor — я использовал CRX Extractor — чтобы распаковать файл CRX и превратить его в ZIP-файл.
4. Найдите ZIP-файл на своем компьютере и разархивируйте его.
5. Вернитесь на страницу chrome://extensions/, нажмите кнопку «Загрузить распакованное расширение» и выберите распакованную папку для своего расширения, чтобы установить его.
Tech Enabled: CNET ведет хронику роли технологий в обеспечении новых видов специальных возможностей.
Технически грамотный: оригинальные короткометражки с уникальным взглядом на технологии, исключительно на CNET.
Тим Фишер имеет более чем 30-летний опыт работы в сфере технологий.Он пишет о технологиях более двух десятилетий и является вице-президентом и генеральным директором Lifewire.
Файл с расширением CRX — это файл расширения Chrome, используемый для расширения функциональных возможностей веб-браузера Google Chrome с помощью программ, добавляющих дополнительные функции к работе в Интернете по умолчанию.
Большинство файлов CRX загружаются через Интернет-магазин Chrome, но, поскольку вы можете создавать собственные расширения Chrome и устанавливать их в автономном режиме, другие файлы могут быть получены из других источников.
Некоторые файлы, использующие это расширение, могут быть файлами курса Links Games или программными файлами, используемыми программой Autodesk DWG TrueView.
Как открыть файл CRX
Файлы расширения Chrome используются веб-браузером Google Chrome. Обычно они загружаются через веб-сайт Google. Инструкции см. в разделе Как добавить расширения Chrome.
После установки они по умолчанию сохраняются здесь:
Операционная система Расположение CRX Windows C:\Users\[имя пользователя]\AppData\Local\Google\Chrome\User Data\Default\Extensions Mac /Users/[имя пользователя]/Library/Application Support/Google/Chrome/Default/Extensions Linux ~/.config/google-chrome/Default/Extensions/ Для установки неофициальных расширений (т. е. файлов CRX, которые вы загрузили не из Интернет-магазина Chrome) требуется отдельный набор инструкций: перейдите по адресу chrome://extensions в строке URL в Chrome. , включите режим разработчика, а затем перетащите файл в окно и подтвердите любые запросы.
Веб-браузер Opera также может использовать этот формат файла, но только если установлено приложение «Установить расширения Chrome». Браузеры Vivaldi и Edge также изначально поддерживают этот формат.
Поскольку файл CRX подобен переименованному файлу ZIP, программа архивации/сжатия, такая как PeaZip или 7-Zip (обе бесплатные), должна иметь возможность открыть файл для расширения. Если это не сработает, используйте веб-сайт CRX Extractor, чтобы сохранить расширение в виде ZIP-файла.
Однако это позволит вам увидеть только данные, из которых состоит расширение, а не запустить программу.
Autodesk DWG TrueView также использует файлы CRX, но назначение этих файлов неясно. Программа, скорее всего, не может открыть файл через меню, поэтому они, вероятно, просто автоматически используются определенными компонентами программного обеспечения и не предназначены для открытия вручную.
Если вы обнаружите, что приложение на вашем компьютере пытается открыть файл, но это не то приложение, или вы предпочитаете, чтобы его открывала другая установленная программа, ознакомьтесь с нашим руководством «Как изменить ассоциации файлов в Windows», чтобы внести это изменение. .
Как преобразовать файл CRX
Файлы XPI (Firefox), EXE (Internet Explorer) и SAFARIEXTZ (Safari) похожи на файлы CRX в том смысле, что они являются файлами расширения, используемыми в соответствующих браузерах. Однако эти форматы, независимо от их общего назначения (расширения функциональности), не могут быть легко преобразованы в другие форматы или из них.
Однако есть одно исключение: расширения Chrome можно установить в браузере Opera с помощью упомянутого ранее инструмента. Это означает, что вы можете установить расширение Chrome из Интернет-магазина Chrome прямо из Opera, не прибегая к конверсии.
Вы также можете преобразовать расширения Opera в расширения Chrome, переименовав файл Opera .NEX в файл Chrome .CRX. Этот новый файл необходимо установить в Chrome вручную с помощью метода перетаскивания, описанного выше.
Нет причин искать конвертер расширений Chrome-to-Edge, потому что файлы CRX также могут быть установлены в Edge по умолчанию и без отдельного инструмента.
Имейте в виду то, что вы прочитали выше о ZIP-файлах. CRX Extractor — отличный способ преобразовать его в ZIP, но вам также может повезти, просто переименовав расширение файла в .ZIP и открыв его с помощью программы архивирования/распаковки файлов.
Если вы хотите преобразовать файл CRX в EXE для какой-либо автоматической установки, лучше всего попробовать скомпилировать его с помощью установщика, такого как Inno Setup.
Все еще не можете открыть?
Будьте внимательны, чтобы правильно прочитать расширение файла. Некоторые форматы файлов добавляют суффикс в конец имени файла, который очень похож на «.CRX», хотя на самом деле он отличается на одну или две буквы.
Например, CXR может выглядеть так же, но использоваться для файлов другого формата, в частности результатов планшета FMAT, используемых с системой FMAT 8100 HTS. Аналогично CXX, используемому Microsoft Visual Studio для файлов исходного кода C++.
Смысл здесь в том, чтобы проверить расширение файла, а затем провести соответствующее исследование, ища любую возможную информацию о формате, в котором находится файл, что поможет вам найти правильную программу, которая может его открыть.
Читайте также:
- Как играть в UFC 3 по сети на PS4
- Wow64 dll что это такое
- Как перенести фото с вайбера на компьютер
- Как подключить видеомагнитофон к компьютеру
- Подозрительная дыра в стене, чем открыть Divinity Original Sin 2
Как установить расширение в Опере (плагин дополнение)
Каждый браузер имеет много разработанных дополнений (плагинов), которые улучшают или дополняют его работу. Opera не стала исключением и также имеет много дополнений, которые улучшают пользователю жизнь и позволяют получить доступ к заблокированным ресурсам, оперативно получать дополнительную информацию например: погода, курс валют, информация о пробках, новости на разных информационных ресурсах.
Как установить, включить или обновить плагины в Opera? Такие вопросы задают многие пользователи, поэтому дальше мы расскажем, как просто, легко и быстро это сделать.
Как и каждый уважающий себя браузер Опера имеет свой сервис дополнений, который находится по ссылке https://addons.opera.com/ru/ .
Для установки нужного приложения, достаточно ввести его название в поиске и перейти к соответствующим результатам.В открывшемся окне мы увидим детальное описание о нем, скриншоты (его отображение на экране) после установки, комментарии пользователей (которые его уже установили) и кнопку с возможностью добавить его к своему браузера Opera.
Нажимаем на кнопку добавить в Opera и ждем пока завершится процесс установки. Об удачном завершении этой процедуры мы получим информацию в правом верхнем углу браузера (появится иконка плагина).
Кликнув по иконке плагина, мы получим нужную нам информацию, которая является продуктом его работы.
Нажав правой клавишей по иконке плагина пользователь вызовет контекстное меню. Оно позволяет настроить и управлять расширением.
Вы можете временно отключить его работу, обновить, скрыть значок с панели инструментов, или разрешить использование только в приватном режиме.
Открытие раздела с плагинами
Многие пользователи не знают даже, как попасть в раздел плагинов. Это объясняется тем, что пункт перехода в данный раздел по умолчанию в меню скрыт.
Прежде всего, переходим в главное меню программы, наводим курсор на раздел «Другие инструменты», а затем во всплывающем списке выбираем пункт «Показать меню разработчика».
После этого, снова заходим в главное меню. Как видим, появился новый пункт – «Разработка». Наводим на него курсор, и в появившемся меню выбираем пункт «Плагины».
Таким образом, мы попадаем в окно плагинов.
Существует более простой способ для перехода в данный раздел. Но, для людей, которые не знают о нем, воспользоваться им самостоятельно ещё сложнее, чем предыдущим методом. А достаточно просто ввести в адресную строку браузера выражение «opera:plugins», и нажать на кнопку ENTER на клавиатуре.
Включение плагина
В открывшемся окне менеджера плагинов, чтобы удобнее просматривать отключенные элементы, особенно если их много, переходим в раздел «Отключенные».
Перед нами предстают нефункционирующие плагины браузера Опера. Для того, чтобы возобновить работу, достаточно нажать на кнопку «Включить» под каждым из них.
Как видим, наименования плагинов исчезли из списка отключенных элементов. Чтобы проверить, включились ли они, переходим в раздел «Включенные».
Плагины появились в данном разделе, а это значит, что они функционируют, и процедуру включения мы произвели правильно.
Начиная с версии Opera 44, разработчики убрали в браузере отдельный раздел для настройки плагинов. Таким образом, описанный выше способ их включения перестал быть актуальным. В настоящее время нет возможности полного их отключения, а соответственно, и включения пользователем. Тем не менее, существует возможность отключать функции, за которые данные плагины отвечают, в разделе генеральных настроек браузера.
В настоящее время в Опере встроено всего три плагина:Flash Player (проигрывание содержимого флэш);
Chrome PDF (просмотр документов PDF);
Widevine CDM (работа защищенным содержимым).Добавить другие плагины нельзя. Все эти элементы встроены в браузер разработчиком, и удалить их невозможно. На работу плагина «Widevine CDM» пользователь никак не может воздействовать. А вот функции, которые выполняют «Flash Player» и «Chrome PDF», юзер может выключить через настройки. Хотя по умолчанию они всегда включены. Соответственно, если эти функции были отключены вручную, в будущем может возникнуть необходимость их включения.
Давайте разберемся, как произвести активацию функций двух указанных плагинов.Щелкните «Меню». В открывшемся списке выберите «Настройки». Или просто воспользуйтесь комбинацией Alt+P.
В открывшемся окне настроек переместитесь в раздел «Сайты».
Для включения функции плагина «Flash Player» в открывшемся разделе найдите блок «Flash». Если в нем радиокнопка активирована в позиции «Блокировать запуск Flash на сайтах», то это означает, что функция указанного плагина отключена.
Для её безусловного включения следует установить переключатель в позицию «Разрешить сайтам запускать Flash».
Если же вы желаете включить функцию с ограничениями, то переключатель следует переставить в позицию «Определять и запускать важный Flash-контент (рекомендуется)» или «По запросу».
Для включения функции плагина «Chrome PDF» в этом же разделе перейдите к блоку «Документы PDF». Он размещен в самом низу. Если около параметра «Открывать PDF-файлы в приложении, установленном по умолчанию для просмотра PDF» стоит галочка, то это означает, что функция встроенного в браузер PDF-просмотрщика отключена. Все PDF документы будут открываться не в окне браузера, а посредством стандартной программы, которая назначена в системном реестре приложением по умолчанию для работы с данным форматом.
Для активации функции плагина «Chrome PDF» нужно просто убрать указанную выше галочку. Теперь документы PDF, расположенные в интернете, будут открываться через интерфейс Оперы.
Раньше включить плагин в браузере Опера было довольно просто, перейдя в соответствующий раздел. Теперь параметры, за которые отвечают немногочисленные плагины, оставшиеся в браузере, регулируются в том же разделе, где размещены и другие настройки Оперы. Именно там теперь активируются функции плагинов.
Настройки плагина Flash Player более объемные.Они расположены в том же разделе «Сайты» общих настроек Оперы. Располагаются в блоке под названием «Flash». Существует четыре режима работы данного плагина:
Разрешить сайтам запускать Flash;
Определять и запускать важный Flash-контент;
По запросу;
Блокировать запуск Flash на сайтах.Переключение между режимами производится путем перестановки радиокнопки.
В режиме «Разрешить сайтам запускать Flash» браузер безусловно запускает любой флэш-контент, где бы он только не присутствовал. Данный вариант позволяет проигрывать ролики, использующие флэш-технологию без ограничений. Но следует знать, что при выборе данного режима, компьютер становится особенно уязвим для вирусов и злоумышленников.
Режим «Определять и запускать важный Flash-контент» позволяет установить оптимальный баланс между возможностью проигрывания контента и безопасностью системы. Именно данный вариант рекомендуют пользователям установить разработчики. Он включен по умолчанию.
При включенном режиме «По запросу» в случае, если на странице сайта имеется флэш-контент, браузер предложит вручную запустить его. Таким образом, пользователь всегда сам будет принимать решение проигрывать содержимое или нет.
Режим «Блокировать запуск Flash на сайтах» предполагает полное отключение функций плагина Flash Player. В этом случае флэш-содержимое проигрываться вообще не будет.
Но, кроме того, имеется возможность отдельно выставить настройки для конкретных сайтов, независимо от того, какое именно положение занимает вышеописанный переключатель. Для этого нажмите кнопку «Управление исключениями…».
Запускается окошко «Исключения для Flash». В поле «Шаблон адреса» следует указать адрес веб-страницы или сайта, на котором вы желаете применять исключения. Можно добавить несколько сайтов.
В поле «Поведение» нужно указать один из четырех вариантов действий, которые соответствуют вышеописанным положениям переключателя:
Разрешить;
Автоматически обнаруживать содержимое;
Спросить;
Блокировать.После добавления адресов всех сайтов, которые желаете добавить в исключения, и определения типа поведения браузера на них, жмите «OK».
Теперь если вы установили вариант «Разрешить», даже в том случае, если в главных настройках «Flash» был указан вариант «Блокировать запуск Flash на сайтах», то все равно на внесенном в список сайте контент будет воспроизводиться.
Загрузка плагинов
Добавить плагин в Оперу можно скачав его на сайте разработчика. Например, именно таким образом устанавливается плагин Adobe Flash Player. Инсталляционный файл загружается с сайта Adobe, и запускается на компьютере. Установка довольно проста, и интуитивно понятна. Нужно просто следовать всем подсказкам. По окончании установки плагин будет интегрирован в Opera. В самом браузере никаких дополнительных настроек производить не нужно.
Кроме того, некоторые плагины уже изначально входят в состав Оперы при её установке на компьютер.
Управление плагинами
Все возможности по управлению плагинами в браузере Opera заключаются в двух действиях: включение и выключение.
Отключить плагин можно нажав соответствующую кнопку около его наименования.
Включаются плагины таким же образом, только кнопка приобретает название «Включить».
Для удобной сортировки в левой части окна раздела плагинов можно выбрать один из трех вариантов просмотра:
показывать все плагины;
показывать только включенные;
показывать только отключенные.Кроме того, в верхнем правом углу окна имеется кнопка «Показать подробности».
При её нажатии показывается дополнительная информация о плагинах: местонахождение, тип, описание, расширение, и т.д. Но дополнительные возможности, собственно, по управлению плагинами тут не предоставляются.
Настройка плагинов
Для того, чтобы перейти в настройки плагинов нужно попасть в общий раздел настроек браузера. Открываем меню Оперы, и выбираем пункт «Настройки». Или же набираем на клавиатуре сочетание клавиш Alt+P.
Далее переходим в раздел «Сайты».
Ищем на открывшейся странице блок настроек «Плагины».
Как видим, тут можно выбрать, в каком именно режиме запускать плагины. По умолчанию выставлена настройка «Запускать все содержимое плагинов в важных случаях». То есть, при этой настройке плагины включаются только тогда, когда из работы требует конкретная веб-страница.
Но пользователь может изменить данную настройку на следующие: «Запускать все содержимое плагинов», «По запросу» и «Не запускать плагины по умолчанию». В первом случае, плагины будут постоянно работать независимо от того, нуждается ли в них конкретный сайт. Это создаст дополнительную нагрузку на браузер, и на оперативную память системы. Во втором случае, если отображение содержимого сайта требует запуска плагинов, то браузер каждый раз будет спрашивать у пользователя разрешения на их активацию, и только после подтверждения запускать. В третьем случае, плагины вообще не будут включаться, если сайт не добавлен в исключения. При этих настройках, значительная часть мультимедийного содержимого сайтов просто не будет отображаться.
Чтобы добавить сайт в исключения, жмем на кнопку «Управление исключениями».
После этого, открывается окно, в которое можно добавлять не только точные адреса сайтов, но и шаблоны. К этим сайтам можно выбрать конкретное действие плагинов на них: «Разрешить», «Автоматически обнаружить содержимое», «Сбросить» и «Блокировать».
При клике на запись «Управление отдельными плагинами» мы переходим в раздел плагинов, о котором уже подробно говорили выше.
Вот и все приятного пользования.
Помните, что установка расширений из непроверенных ресурсов потенциально может повредить работе вашего персонального. компьютера.
Создание расширения браузера 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 Image Grabber
Кнопка имеет идентификатор grabBtn который в дальнейшем будет использоваться из скрипта, чтобы реагировать на нажатия.
Чтобы увидеть, что изменилось, снова обновите расширение в Chrome Extensions Manager. Если все было сделано как написано выше, то при нажатии на иконку расширения будет появляться содержимое файла popup.html во всплывающем окне:
Работает!! Но выглядит не очень. Теперь нужно стилизовать этот интерфейс с помощью CSS.
Создайте файл popup.css со следующим содержимым и поместите его в папку с расширением:
body < text-align:center; width:200px; >button
Этот файл определяет стили для кнопки и для body всей страницы: все содержимое выровнено по центру, а также, ширина содержимого будет 200 пикселей.
Добавьте ссылку на файл с этими стилями в popup.html:
Image Grabber Image Grabber
Теперь при нажатии на кнопку расширения появится стилизованный интерфейс:
Обратите внимание, что в данном случае не требовалось нажимать кнопку Reload, для того чтобы обновить расширение. Изменения в файлах web-интерфейса расширения начинают работать автоматически.
Чтобы придать интерфейсу завершенность, добавим JavaScript-код, который будет реагировать на нажатия кнопки «GRAB NOW«. Создайте файл popup.js в папке с расширением со следующим содержимым:
const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < alert("CLICKED"); >)и добавьте ссылку на этот файл в popup.html:
Image Grabber Image Grabber
Таким образом мы добавили событие 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 должен быть определен как: .
Теперь давайте изменим код обработчика нажатия кнопки grabBtn в popup.js чтобы он получал активную вкладку и ее идентификатор, когда пользователь нажимает на кнопку «GRAB NOW» в интерфейсе расширения:
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") >>) >)Этот код выполняет запрос ко всем вкладкам, которые активны. Может быть только одна такая вкладка, поэтому к ней можно обратиться как tabs[0] . Если такая вкладка существует, то функция отображает ее id, а если не существует, то показывает сообщение об ошибке.
Если все сделано как описано выше, то при нажатии кнопки GRAB NOW должен появляться идентификатор текущей вкладки браузера. Далее мы изменим этот код таким образом, чтобы этот идентификатор использовался для доступа к web-странице, открытой на этой вкладке.
Извлечение изображений из текущей страницы
Расширение может взаимодействовать с открытыми страницами с помощью интерфейса Chrome Scripting API, доступного через chrome.scripting . В частности, мы будем использовать функцию для внедрения своего кода в текущую web-страницу и для исполнения этого кода в ее контексте. При запуске этот код будет иметь доступ к DOM-дереву этой страницы и сможет делать нужные нам действия с любыми HTML-тэгами.
Для внедрения скрипта в страницу Web-браузера используется функция executeScript , определенная следующим образом:
chrome.scripting.executeScript(injectSpec,callback)Рассмотрим ее параметры.
injectSpec
Это объект типа ScriptInjection. В нем определяется какой Javascript-код, в какую web-страницу и каким образом внедрить. В частности, в параметре target указывается идентификатор вкладки браузера со страницей, которая нам нужна. Мы получили его ранее. Остальные параметры указывают каким образом передать скрипт на эту страницу. Возможно использовать следующие параметры для передачи скрипта:
- files — указывается список путей к JS-файлам, которые нужно внедрить, относительно корневой папки расширения
- func — указывается Javascript-функция, которую нужно внедрить. Функция должна быть предварительно написана.
Скрипт, который планируется внедрить, будет извлекать список изображений с web-страницы и возвращать список URL этих изображений. Это небольшой скрипт, поэтому достаточно создать функцию для него. Она будет называться grabImages . Эта функция должна извлекать список URL изображений web-страницы и возвращать его. Возвращаемое значение этой функции будет передано расширению.
В итоге injectSpec будет определен следующим образом:
< target:< tabId: tab.id, allFrames: true >, func: grabImages, >,Здесь функция, указанная в параметре func будет внедрена на страницу, определенную параметром target . В параметре target указывается полученный на предыдущем этапе идентификатор вкладки, а также, устанавливается параметр allFrames . Этот дополнительный параметр говорит что скрипт должен выполняться во всех фреймах web-страницы, в случае если они на этой странице есть.
Саму функцию grabImages мы напишем чуть позже.
callback
Это функция обратного вызова, которая будет вызвана после того, как внедренный скрипт исполнится на странице и во всех ее фреймах. В качестве параметра в ней будет массив результатов, которые вернула функция grabImages для каждого фрейма (возможно это будет всего один элемент, если фреймов нет). Каждый элемент этого массива — это объект типа InjectionResult. Он в частности содержит свойство result . Именно оно содержит то, что возвращает функция grabImages, т.е. список URL-ов.
Теперь соберем все вместе в следующем коде:
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-ов, полученных из каждого фрейма в один, // затем объединить их в строку, разделенную символом перевода строки // и скопировать в буфер обмена >Функция grabImages может быть определена следующим образом:
/** * Функция исполняется на удаленной странице браузера, * получает список изображений и возвращает массив * путей к ним * * @return Array массив строк */ function grabImages() < const images = document.querySelectorAll("img"); return Array.from(images).map(image=>image.src); >Здесь все просто: получаем список DOM-элементов
и извлекаем свойство src каждого из них в итоговый массив. Считаю нужным напомнить, что объект document , указанный в этой функции указывает на содержимое не той HTML-страницы, где находится функция grabImages , а удаленной web-страницы, в которую эта функция будет внедрена.
После того как данная функция выполнится в каждом фрейме, результаты будут объединены в единый массив и переданы в функцию onResult . Эта функция может быть определена следующим образом:
/** * Выполняется после того как вызовы 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(); >); >Следует упомянуть что не все вкладки браузера — это вкладки с web-страницами. Например, может быть вкладка свойств браузера. Страницы на таких вкладках не имеют свойства document . В этом случае функция grabImages не выполнится и не вернет результатов. Этот случай обрабатывается в самом начале функции. Затем массив массивов результатов объединяется в единый плоский массив используя концепцию map/reduce, затем функция window.navigator.clipboard используется, чтобы скопировать его в буфер обмена. Предварительно массив результатов преобразовывается в строку, разделенную символом перевода строки.
Завершающие штрихи
Здесь я описал только незначительную часть Chrome Scripting API и описал только в контексте данного расширения. Полная документация по Chrome Scripting API доступна здесь: https://developer.chrome.com/docs/extensions/reference/scripting/.
Теперь немного почистим код. Здесь я считаю нужным часть функции обработчика grabBtn, которая выполняет chrome.scripting.executeScript вынести в отдельную функцию execScript . В результате файл popup.js выглядит так:
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(); >); >Заключение
Теперь, если нажать по иконке расширения Image Grabber и затем кликнуть кнопку GRAB NOW, то в буфере обмена будет список URL-ов всех изображений текущей web-страницы. Можно вставить его в любой текстовый редактор.
Для начала, возможно, неплохо, но практическая ценность такого расширения не велика. Поэтому в следующей части я покажу как выгрузить все эти изображения в виде zip-архива, а также, создать дополнительный интерфейс, для того чтобы выбрать какие картинки добавлять в этот ZIP-архив, а какие нет. Также опишу процесс публикации готового расширения в Chrome Store.
Поэтому подписывайтесь, думаю к концу следующей недели вторая часть будет доступна вместе с полным исходным кодом.
Вторая часть опубликована и доступна здесь.