Как написать расширение для Chrome на Python
Обновлено: 02.07.2024
Расширения C hrome — очень полезные инструменты. Популярным примером является Grammarly, который предлагает исправить в нашем письме. Нет никаких сомнений в том, что на заднем плане происходит какая-то магия машинного обучения, которая дает нам предложения по написанию. Как мы все знаем, Python — одна из наиболее часто используемых платформ в машинном обучении. Итак, если мы когда-нибудь захотим создать расширение для Chrome с некоторыми функциями машинного обучения, Python — отличный выбор для внутреннего сервера. В этом руководстве мы увидим, как подключить расширение Chrome к Python Backend.
Для простоты мы создадим расширение WikiSearch, которое принимает ключевое слово и показывает нам сводку из Википедии. Мы выполним четыре простых шага:
Мы будем использовать Django для создания внутреннего сервера. Мы будем непосредственно вдаваться в подробности настройки нашего сервера, для более подробного описания Django вы можете ознакомиться с их официальным руководством.
Давайте сначала установим необходимый пакет. Мы будем использовать пакет Википедии для получения результатов из Википедии.
После настройки среды Django давайте создадим вики-приложение.
Мы обновим файл «mysite/urls.py», чтобы наше приложение стало доступным.
Наш сервер Django готов к работе!
Мы будем обмениваться данными между нашим расширением Chrome и сервером Python с помощью REST API. Наш простой REST API будет работать, возвращая JSONResponse на входной запрос. Это самая важная, но простая часть всей нашей системы.
Для начала мы добавим файл «views.py» в каталог «wiki». Затем мы добавим функцию, которая принимает запрос GET и отправляет ответ JSON с результатом, полученным из Википедии.
Давайте обновим наш «wiki/urls.py», чтобы отразить наши изменения.
Так это работает! Теперь давайте погрузимся в наше расширение для Chrome.
Мы будем создавать простое расширение с очень простым шаблоном внешнего интерфейса, который принимает текстовый ввод. Опять же, мы обсудим только связанные части нашего руководства. Если вы хотите понять суть, у Codevolution есть отличная серия для понимания основ Chrome Extension.
Наш интерфейс выглядит так:
Наш рабочий процесс будет таким:
- Наш сценарий всплывающего окна будет взаимодействовать с фоновым сценарием посредством передачи сообщений. (строка 10)
- Наш фоновый сценарий отправит запрос GET на наш сервер с ключевым словом input и отправит его обратно во всплывающее окно. (строки 12–15)
- Наш сценарий всплывающего окна покажет ответ сервера в виде предупреждения/уведомления. (строки 13–23)
Наша базовая настройка почти завершена! Последнее, что нам нужно, это добавить разрешение на доступ к Localhost в наш файл манифеста. Если вы используете какой-либо выделенный сервер для хостинга (например, Ngrok), вам также необходимо добавить его в Разрешение.
Теперь давайте проверим, правильно ли он работает! Открыв наш интерфейс, укажите ключевое слово, которое вы хотите найти. Давайте попробуем "COVID19", который сейчас вызывает серьезную озабоченность.
И Бинго! Теперь нам будет предложено предупреждение/уведомление со сводкой нашего запроса!
Мы успешно создали наше очень простое расширение Chrome с сервером Python. Теперь пришло время использовать эту базовую концепцию для создания полноценного проекта. Основная идея та же, нам просто нужно изменить наш REST API, чтобы он соответствовал нашим потребностям. Вместо того, чтобы отправлять ответ из Википедии, вы должны использовать выходные данные модели машинного обучения или другие связанные средства. Весь код этого руководства доступен здесь!
Вы можете использовать Python вместо JavaScript, и в этом руководстве мы покажем вам, как это сделать.
Торопитесь? Загрузите код с этого сайта:
Создайте подключаемый модуль Google Chrome
Для начала нам нужно создать файл манифеста: manifest.json.
Создайте файл с именем popup.html
Наконец получите значок и сохраните его как icon.jpg. Откройте chrome://extensions и нажмите режим разработчика. Нажмите «загрузить распакованное расширение», выберите каталог и нажмите «ОК».
Добавление Python в расширение Chrome
- Способ A. Включите Brython в iframe (требуется сервер)
- Метод Б. Компиляция Python в Javascript с использованием Rapydscript (лучшее, бессерверное, чистое расширение).
Метод A: Python (Brython) в iframe
Теперь, когда вы знаете основы, мы можем добавить Python в код. Для запуска Python в браузере у вас есть несколько вариантов, включая Brython и emcascripten. Мы решили попробовать Brython. Мы будем запускать скрипт Brython с сервера. Измените popup.html на:
После перезапуска плагина в Google Chrome появится интерпретатор Python (Brython).
Python внутри Google Chrome
Запуск собственных скриптов
Чтобы запустить собственный скрипт, просто измените URL во фрейме popup.html:
Сценарий должен работать на вашем собственном сервере. Вы можете запустить любой скрипт Brython из Интернета. Используя Brython, вы можете просто ввести код Python внутри тегов script. Взгляните на эти примеры Brython или просто просмотрите галерею.
Метод B: скомпилируйте Python в Javascript. (без сервера, чистое расширение)
Существует несколько инструментов для компиляции Python в Javascript. Rapydscript работает нормально, Pyjs плохо работает с Chrome (требуется специальный параметр при запуске).
Установите Rapydscript с помощью:
Загрузить код с этого сайта:
Загрузить код расширения
Измените файл /src/hello.py под себя:
Вы можете найти расширение в /compiledpythonextension/. Загрузите его в Chrome как неупакованное расширение и посмотрите, как оно работает :-)
Заключение:
Подключаемые модули Chrome создаются с использованием HTML, JavaScript и CSS. Мы можем использовать Python для создания обычных расширений Chrome с помощью компилятора Python в Javascript (Rapydscript).
Здесь вы можете приступить к созданию расширений Chrome, которые в конечном итоге повысят вашу производительность и ускорят выполнение наших задач. Будь то текущий счет матча, музыка, обновления новых статей GeeksforGeeks или скриншот всей страницы, вы можете создать собственное расширение Chrome для каждой задачи.
-
: строительный блок всех веб-сайтов, стандартный язык разметки, который наряду с CSS и JAVASCRIPT используется веб-разработчиками для создания веб-сайтов, мобильных пользовательских интерфейсов и приложений.: язык таблицы стилей, используемый для установки стиля для элементов HTML.: Обычно используется для создания интерактивных эффектов в веб-браузерах.
JSON: нотация объектов JavaScript — это открытый стандартный формат, в котором для передачи объектов данных, состоящих из пар атрибут-значение, используется удобочитаемый текст. Это основной формат данных, используемый для асинхронной связи между браузером и сервером (AJAJ), в значительной степени заменяющий XML (используемый AJAX).
Несколько предварительных сведений. Расширения Chrome имеют определенную структуру каталогов. Это означает, что имя файла уже зафиксировано, они должны быть организованы определенным образом в соответствии с инструкциями.
Основные компоненты приложения Chrome:
- Манифест сообщает Chrome о вашем приложении, что это такое, как его запустить и какие дополнительные разрешения требуются.
- Фоновый сценарий используется для создания страницы событий, отвечающей за управление жизненным циклом приложения.
- Весь код должен быть включен в пакет приложения Chrome. Сюда входят модули HTML, JS, CSS и Native Client.
- Все значки и другие ресурсы также должны быть включены в пакет.
- JSON
- .js [файлы Javascript]
- .html [ файлы HTML ]
- png
Для этого урока мы собираемся создать простое расширение «Hello World». Далее следуют эффективные и содержательные расширения, требующие базового понимания
Шаг 1. Создайте новый каталог, в котором мы будем хранить все наши файлы.
Шаг 2. Создайте файл с именем Manifest.json
Вот основной формат.
Вот наш файл Manifest.json
Итак, раз вы разобрались с manifest.json, давайте продолжим.
Шаг 3. Создайте новый файл с именем window.html.
Это HTML-код, который появляется при нажатии кнопки расширения Chrome.
Шаг 4. Создайте файл javascript, назовем его background.js. Поскольку мы создаем простой HTML-файл, вы можете полностью пропустить этот шаг, так как нашему текущему проекту не потребуется никакой javascript.
Мы создаем его только для демонстрации того, как включить скрипт в расширение.
Шаг 5. Вы должны были заметить, что значок является неотъемлемой частью расширения, и вы можете щелкнуть его, чтобы начать выполнение расширения.
Мы добавляем файл значка, из которого вы можете получить представление.
Вот как должен выглядеть ваш каталог после создания всех 4 файлов.
Последний:
- Перетащите каталог, в котором находятся ваши файлы расширений, на chrome://extensions в браузере, чтобы загрузить его.
- Если расширение допустимо, оно будет загружено и активировано сразу же!
Откройте страницу chrome://extensions.
Перетащите папку на страницу chrome://extensions.
Нажмите на значок, и появится сообщение!
- Перейдите на страницу chrome://extensions в браузере Google Chrome. Установите флажок Режим разработчика в правом верхнем углу.
- Нажмите «Загрузить распакованное», чтобы открыть диалоговое окно выбора файла.
- Выберите каталог расширения. Если расширение допустимо, оно сразу же загрузится и станет активным!
Это простое расширение Hello World дает нам базовые знания о том, как мы можем начать создавать расширения Chrome, поскольку теперь мы знакомы с manifest.json и структурой каталогов, двумя новыми вещами помимо базовых веб-технологий, таких как HTML, CSS, JavaScript. , JQuery и т. д.
Эту статью подготовил Хеманг Кумар. Пожалуйста, пишите комментарии, если вы обнаружите что-то неверное или хотите поделиться дополнительной информацией по теме, обсуждаемой выше.
Это руководство по созданию расширения Chrome, использующего бессерверную архитектуру. В частности, мы будем использовать облачные функции Google в серверной части нашего расширения Chrome, чтобы сделать для нас немного необычной магии Python.
Расширение, которое мы создадим, – это расширение SummarLight для Chrome:
Представляем SummarLight — расширение для Chrome, которое выделяет наиболее важные части…
Расширение SummarLight берет текст текущей веб-страницы, на которой вы находитесь (предположительно, крутой блог на таком носителе, как мой) и выделяет наиболее важные части этой страницы/статьи.
Для этого мы настроим пользовательский интерфейс (в данном случае кнопку), который будет отправлять текст на нашей текущей веб-странице в наш серверный интерфейс. В этом случае «внутренней частью» будет облачная функция Google, которая проанализирует этот текст и вернет его извлекающее резюме (наиболее важные предложения этого текста).
Как мы видим, архитектура очень проста и гибка. Вы можете настроить простой пользовательский интерфейс, такой как приложение или, в данном случае, расширение Chrome, и передать любую сложную работу своим бессерверным функциям. Вы можете легко изменить свою логику в функции и повторно развернуть ее, чтобы попробовать альтернативные методы. И, наконец, вы можете масштабировать его для любого количества вызовов API.
Эта статья не посвящена преимуществам бессерверных технологий, поэтому я не буду вдаваться в подробности о преимуществах их использования по сравнению с традиционными серверами. Но обычно бессерверное решение может быть намного дешевле и масштабируемее (но не всегда… зависит от вашего варианта использования).
Вот хорошее руководство по настройке расширения Chrome:
Как создать и опубликовать расширение Chrome за 20 минут
Джейк Принс. Как создать и опубликовать расширение для Chrome за 20 минут. Фото Майка Фото…
бтахир/суммарлайт
Расширение Summarlight для Chrome выделяет наиболее важные части сообщений/историй/статей. - бтахир/суммарлайт
В файле main.py в корневом каталоге мы определяем нашу облачную функцию Google. В папке extension_bundle находятся все файлы, необходимые для создания расширения Chrome.
Облачная функция Google
Я выбрал Google вместо AWS Lamba, потому что у меня было несколько бесплатных кредитов (спасибо Google!), но вы можете легко сделать это и с AWS. Для меня было огромным плюсом то, что они только что выпустили Google Cloud Functions для Python, так как я обрабатываю большую часть своих данных на этом прекрасном языке.
Развертывание с локального компьютера | Документация по облачным функциям | Облако Google
Независимо от того, находится ли ваш бизнес на начальном этапе или на пути к цифровой трансформации, решения Google Cloud…
Я настоятельно рекомендую использовать gcloud sdk и начать с примера hello_world. Вы можете отредактировать функцию в файле main.py, который они предоставляют для ваших нужд. Вот моя функция:
Довольно прямолинейно.Я получаю какой-то текст через функцию read_article(), а затем, используя замечательную библиотеку Gensim, возвращаю сводку этого текста. Функция Gensim Summary работает, ранжируя все предложения в порядке важности. В этом случае я решил вернуть первые 30% самых важных предложений. Это выделит верхнюю треть статьи/блога.
Альтернативные подходы. Я пробовал разные методы суммирования, в том числе с использованием встраивания слов в перчатках, но результаты были ненамного лучше по сравнению с Gensim (особенно с учетом увеличения вычислительных ресурсов/времени обработки из-за загрузки этих массивных вложений). Однако здесь есть еще много возможностей для улучшения. Это активная область исследований, и в настоящее время разрабатываются лучшие подходы к обобщению текста:
Обобщение
Репозиторий для отслеживания прогресса в обработке естественного языка (NLP), включая наборы данных и текущие…
Набор расширений
Теперь о внешнем интерфейсе. Для начала нам понадобится файл popup.html. Это касается части пользовательского интерфейса. Это создаст меню с кнопкой.
Как мы видим, кнопка Highlight Summary имеет событие onClick, которое запускает файл popup.js. Это, в свою очередь, вызовет функцию суммирования:
Функция суммирования вызывает скрипт content.js (да, да, я знаю, что мы могли бы избежать этого лишнего шага…).
Опять же, используя Fetch, мы возвращаем обещание, которое представляет собой сводку, сгенерированную нашей бессерверной функцией. Как только мы решим эту проблему, мы можем проанализировать html-контент нашей страницы и выделить предложения из нашей сводки.
Поскольку вся эта обработка может занять некоторое время, мы добавим оповещение в верхней части страницы, которое укажет на это («Создание основных моментов сводки. Это может занять до 30 секунд в зависимости от продолжительности статья").
Наконец нам нужно создать файл manifest.json, необходимый для публикации расширения:
Обратите внимание на вкладку разрешений. Мы должны добавить сюда URL-адрес нашей облачной функции Google, чтобы убедиться, что мы не получаем ошибку CORS, когда мы вызываем нашу функцию через Fetch API. Мы также заполняем такие данные, как имя/описание и значки, которые будут отображаться для нашего расширения Chrome в Google Store.
И все! Мы создали расширение Chrome, которое использует бессерверную магистраль, известную как Google Cloud Function. Конечный эффект примерно такой:
Это простой, но эффективный способ создавать действительно классные приложения/расширения. Подумайте о некоторых вещах, которые вы сделали в Python. Теперь вы можете просто подключить свои скрипты к кнопке в расширении/приложении и сделать из этого хороший продукт. И все это, не беспокоясь о серверах или конфигурациях.
Сампурна Чапагейн
Если вы являетесь пользователем Google Chrome, вы, вероятно, использовали некоторые расширения в браузере.
Вы когда-нибудь задумывались, как построить его самостоятельно? В этой статье я покажу вам, как создать расширение для Chrome с нуля.
Оглавление
Что такое расширение Chrome?
Расширение Chrome — это программа, устанавливаемая в браузере Chrome и расширяющая его функциональные возможности. Вы можете легко создать его, используя такие веб-технологии, как HTML, CSS и JavaScript.
Создание расширения Chrome похоже на создание веб-приложения, но для этого требуется файл manifest.json, который мы обсудим в последнем разделе этой публикации.
Как будет выглядеть наше расширение для Chrome?
Как видите, указанное выше расширение для Chrome отображает последние данные о коронавирусе (COVID-19) в Великобритании. В этой записи блога мы рассмотрим, как создать это расширение.
Полный исходный код этого проекта можно найти на GitHub.
Как создать расширение для Chrome
Прежде всего нам нужно создать пустую папку, в которую мы добавим файлы HTML, CSS и JavaScript.
Давайте создадим внутри папки файл index.html со следующим шаблонным HTML-кодом:
Теперь добавим ссылку на CDN Bootstrap в тег head. Здесь мы будем использовать платформу Bootstrap, поэтому в этом примере нам не нужно писать дополнительный CSS.
В демо мы видели, что записи отображаются в виде таблицы. Итак, теперь нам нужно поработать над созданием таблицы.
Приведенный выше код создает таблицу шириной 450 пикселей. В таблице есть четыре разных заголовка: Дата , Страна , Подтверждено и Смерти .
Здесь вы можете видеть, что каждой таблице данных td присвоены разные идентификаторы.Мы будем использовать значение этих идентификаторов в JavaScript для обновления данных таблицы. Кроме того, здесь мы загрузили JavaScript в конце после загрузки всего содержимого HTML.
Теперь, поскольку таблица была отображена, нам нужно поработать над написанием JavaScript, чтобы получать данные из API.
Давайте создадим файл script.js и добавим следующий код:
Теперь давайте разберем приведенный выше код:
Если мы проверим браузер, мы сможем увидеть следующий результат.
Последний отчет о Covid в Великобритании – предварительный просмотр в браузере
Данные извлекаются из API и продолжают обновляться по мере изменения данных в API.
Файл манифеста.json
Как мы уже говорили ранее, создание расширения для Chrome аналогично созданию любого веб-приложения. Единственное отличие состоит в том, что для расширения Chrome требуется файл manifest.json, в котором мы храним все настройки.
Файл manifest.json содержит всю необходимую информацию для создания расширения Chrome. Это первый файл, который проверяет расширение, и все загружается из этого единственного файла.
Теперь давайте создадим файл manifest.json в корневой папке и добавим следующий код:
Наш файл manifest.json содержит поля name , version , description , manifest_version (в данном случае 3, что является последней версией манифеста), author и action. В поле действия есть значение для default_popup, которое содержит путь к файлу HTML, в данном примере это index.html.
Здесь можно просмотреть все конфигурации файла manifest.json.
Теперь, поскольку мы также добавили файл manifest.json, мы готовы добавить этот проект в качестве расширения в наш браузер Chrome.
Для этого нам нужно перейти к пункту «Выбор дополнительных инструментов», а затем выбрать «Расширения» в меню браузера, как показано на рисунке ниже:
Переход к расширениям в Chrome
После выбора "Расширения" выполняется перенаправление на страницу расширений в Chrome. Обязательно включите здесь режим разработчика.
После этого вам нужно нажать кнопку «Загрузить распакованное», что позволит нам загрузить наш проект в магазин расширений Chrome.
Теперь расширение доступно в нашем магазине расширений для Chrome. Вы также можете закрепить расширение в браузере, как показано на рисунке ниже:
Закрепить расширение в браузере
Это расширение работает только в вашем браузере. Если вы хотите опубликовать его в Интернет-магазине Chrome, перейдите по этой ссылке.
Заключение
Если у вас есть знания HTML, CSS и JavaScript, вы можете легко создавать расширения для Chrome. Я надеюсь, что после прочтения этой записи в блоге вы создадите несколько классных расширений.
Читайте также: