Прошло всего три дня с тех пор, как я выпустил Terp Data, расширение для Google Chrome, которое позволяет студентам Мэрилендского университета просматривать отзывы и рейтинги преподавателей на страницах курсов Testudo вместо того, чтобы открывать сторонний сайт для их поиска. Однако с тех пор многие люди спрашивали меня, что потребовалось для разработки этого расширения (то есть, какие инструменты я использовал, сколько времени это заняло и т. д.). По этой причине я поделюсь своим опытом со всеми вами сегодня.

Узнайте, как работают расширения Chrome

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

  • manifest.json
  • контент.js
  • фон.js
  • всплывающее окно.html
  • default_icon (png, jpeg и т. д.)

manifest.json

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

контент.js

Это скрипт, который работает за кулисами на всех URL-адресах, которые вы указали в файле манифеста. Подойдите к этому творчески. Возможно, вам нужен сценарий, который изменяет атрибут src для всех тегов изображения, чтобы он указывал на определенное изображение. Возможно, вам нужен скрипт, который меняет цвет фона для всех тегов абзаца на красный. Это все зависит от вас!

фон.js

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

всплывающее окно.html

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

default_icon

Это миниатюра, отображаемая пользователям при установке вашего расширения и в правом верхнем углу Chrome после установки. Этот значок имеет указанное требование к размеру изображения 128 x 128 пикселей.

Как я сделал терп-данные

Сбор данных

Чтобы получить отзывы и рейтинги профессоров, мне пришлось сначала собрать данные с другого сайта, Planet Terp, который мой друг сделал специально для рейтинга и обзора профессоров Университета Мэриленда. Я также хотел получить данные от Rate My Professors, но у них строгая политика в отношении очистки данных, так что это явно не вариант.

Для очистки данных я использовал библиотеку Python BeautifulSoup. Я позволил ему запуститься на 5945 профессорских страницах одним щелчком мыши, а затем загрузил данные в формате JSON, которые затем будут использоваться в расширении Chrome.

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

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

теги, в которых была нужная мне информация, получить данные профессора, которые я собрал ранее, и, наконец, внедрить оверлейный div со всеми этими данными. И, как обычно, потребовалось много времени на поиск в Stack Overflow и получение отзывов от других.

Окончательный прогноз

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

Я также слышал, как многие люди, создававшие проекты на незнакомых им языках, говорили, что они бросили определенный проект, потому что чувствовали, что специалисты по этому языку могут легко воспроизвести их работу и сделать ее в 100 раз лучше за более короткий промежуток времени. Я лично был там, и я могу заверить вас, что это не правильный путь. Кого волнует, если кто-то может разработать что-то лучше, чем вы? Настоящая причина, по которой вы работаете над проектом, — это получение опыта, а не создание наилучшей возможной версии. После того, как вы закончите, даже если проект не кажется таким уж хорошим, вы определенно сможете увидеть значительное улучшение глубины своих знаний в этой конкретной области. Таким образом, даже если кто-то и разработает что-то лучше вас, это вовсе не потеря. Вы чему-то научились, и вы можете продемонстрировать это, что делает это победой для вас. Если вам когда-нибудь захочется прекратить проект, вспомните и пересмотрите все, чему вы научились на этом пути. На поверхностном уровне может показаться, что вы мало чего достигли, но если вы покопаетесь в грязи, вы обнаружите, что на самом деле продвинулись довольно далеко.

«Что бы ни потребовалось, чтобы закончить дела, закончите. Вы узнаете больше из славной неудачи, чем из того, что никогда не заканчивали». — Нил Гейман

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

Ваши следующие шаги к успеху

  • Присоединяйтесь к моему Сообществу RealDevTalk в Твиттере и получайте отличный контент и советы, подобные тому, что вы нашли здесь.
  • Найдите расширение Terp Data Chrome здесь в магазине Google Chrome.

Первоначально опубликовано на https://realdevtalk.com 5 августа 2018 г.