Прежде всего, чтобы прояснить ситуацию, я не являюсь экспертом в проектировании и разработке интерфейсной части моих проектов, поэтому, если вы найдете в этом руководстве «улучшаемый» код, не волнуйтесь. Но это также было одной из причин, по которой я решил разработать это простое расширение для Chrome. Всякий раз, когда я решаю начать личный проект, мне всегда трудно найти правильный дизайн, правильные шрифты и правильную цветовую схему, это просто не мое. И в конечном итоге я трачу слишком много времени на эту часть процесса, поэтому я могу начать издеваться над тем, как мое приложение будет выглядеть в конце.
С другой стороны, расширения Chrome всегда поражали меня и заставляли меня думать не только о традиционных идеях подработки для программистов, поскольку это рынок, который я готов исследовать больше, поскольку количество пользователей Chrome оценивается в 2,65 миллиарда. глобально.
Идея 💡
Как я уже упоминал, я не очень хорошо разбираюсь в интерфейсе и дизайне, и одна из моих болевых точек при запуске проекта — это выбор правильной цветовой схемы или правильного шрифта. Итак, что будет делать это расширение, так это показать вам наиболее часто используемые цвета шрифтов, цвета фона и семейства шрифтов веб-сайта, который вы посещаете.
Поэтому, если мне нужно вдохновение для выбора стилей с популярных веб-сайтов, вам просто нужно посетить веб-сайт, а затем проверить в расширении, какие цвета / шрифты использовались в нем.
Немного расследования перед тем, как начать…
Поэтому, прежде чем начать, мне нужно было немного узнать о ключевых файлах расширения Chrome. Перечислю и попытаюсь объяснить (по крайней мере, как я их понял):
manifest.json
Это рутинный файл каждого расширения, и он необходим, и он сообщает Chrome, как запускать и управлять вашим расширением.
Файл манифеста содержит важную информацию о вашем расширении, такую как его имя, описание, номер версии и файлы, к которым ему необходимо получить доступ. В нем также указывается, какие разрешения требуются вашему расширению, например, возможность доступа к истории просмотров или вашим закладкам.
Кроме того, файл манифеста может определять такие вещи, как значки, которые будут отображаться для вашего расширения, фоновый сценарий, который будет выполняться в фоновом режиме при установке вашего расширения, и любые сценарии содержимого, которые будут выполняться на определенных веб-страницах.
Обратите внимание, что в настоящее время используется версия 3 для manifest_version.
всплывающее окно.html
По сути, это файл HTML, который определяет пользовательский интерфейс для всплывающего окна вашего расширения.
Когда пользователь щелкает значок вашего расширения, появляется небольшое всплывающее окно, в котором отображается информация или функции, связанные с вашим расширением. Это всплывающее окно создается с использованием файла popup.html.
В нашем случае наш файл HTML будет отображать три строки, в которых мы будем отображать цвета шрифта, фон и семейства шрифтов. В нашем случае мы просто покажем три наиболее часто используемых из каждой категории.
всплывающее окно.css
Он идет вместе с popup.html и определяет стили вашего расширения. Он будет стилизовать ваш HTML-код и заставит ваше расширение сиять. Flexbox полностью…
всплывающее окно.js
Это логика JS, которую вы хотите запустить в своем расширении, и она поддерживает два файла, упомянутых выше.
Здесь следует напомнить, что у него нет доступа к активной вкладке DOM, он может получить доступ только к той, что находится в файле popup.html. Это может показаться очевидным, но я понял это по ходу дела.
контент.js
Они называются «скриптами контента» и представляют собой JS-файлы, которые запускаются в контексте определенной веб-страницы и используются для управления HTML, CSS и JavaScript страницы. Другая характеристика этих файлов и причина, по которой нам нужен этот файл, заключается в том, что он может взаимодействовать с другими частями вашего расширения Chrome, такими как фоновый сценарий или всплывающее окно.
иконки/
Это папка, в которой мы будем хранить все значки (разных размеров) вашего расширения. Этот значок отображается на панели вашего браузера.
… и многие другие файлы
При разработке расширения Chrome существует больше типов файлов, но я хотел сосредоточиться на тех, которые используются в этом руководстве. Если вы хотите узнать больше об этих других файлах (например, фоновых файлах и т. д.), я рекомендую вам посетить документацию от ребят из Google.
Время кодировать 🧑💻
Я попытался набросать, как будет выглядеть поток в нашем расширении, но поскольку мой рисунок отстой, я объясню своими словами.
По сути, когда новая страница отображается (событие будет прослушиваться файлом popup.js), нам нужно вызвать сценарий контента (content.js), чтобы очистить DOM страницы вкладки и отсортировать по наиболее часто используемым трем категориям: семейства шрифтов, цвета фона и цвета шрифта. После того, как он был очищен и у нас есть эта информация, мы должны отправить ее обратно в файл popup.js, который будет отвечать за отрисовку этих данных во всплывающем окне.
Итак, давайте объясним, как будет выглядеть наш файл popup.js:
Как уже упоминалось, в нижней части файла мы начнем прослушивать событие загрузки DOM с помощью события DOMContentLoaded. Затем мы запрашиваем активную вкладку, на которой находится пользователь, и вызываем функцию injectContentScript, которая говорит сама за себя. С этими результатами мы просто изменим DOM всплывающего окна, добавив результаты в соответствующие элементы HTML.
Теперь давайте более подробно рассмотрим, что делает файл content.js:
Процесс состоит из:
- Читать все стили элементов из основного фрейма страницы DOM
- Сопоставьте три интересующих нас атрибута и преобразуйте цветовые коды (которые вводятся в RGB или RGBA) в шестнадцатеричные цветовые коды с помощью пользовательских вспомогательных функций.
- Отсортируйте их по количеству вхождений, отбрасывая как черный, так и белый цвета (поскольку я не думаю, что они полезны для нашей цели).
- Верните результат как объект с тремя массивами.
Вот как в конечном итоге будет выглядеть структура папок…
Заключение
В общем, это был хороший и веселый крошечный проект, которым можно было заняться в воскресенье. Я думаю, что еще многое предстоит узнать и улучшить, поскольку я не слишком углублялся в обмен файлами и публикацию расширения, но это был хороший первый контакт с этой областью.
Опять же, я не эксперт, и это был просто способ поиграть и узнать что-то новое :)
🙌 🙌 🙌 Спасибо, что дочитали до этого места!
Полный код вы можете найти здесь.
