(Внимание! Это сообщение может оказаться очень длинным. Если вам интересно, продолжайте, несмотря на мое уведомление. )
Небольшая справка обо мне:
Я был настоящим книжным червем, когда у меня не было компьютера. На самом деле я все еще червь, но уже книжный червь, веб-червь (не путайте с компьютерным вирусом, пожалуйста) 😜 . Дело в том, что я много читал и до сих пор много читаю. Я читал до поздней ночи до утра и под партой на уроках зоологии/ботаники/химии после выпуска. Именно так я многое узнал о своем компьютерном программировании и разработке, что было моей страстью, так как я знаю о компьютере.
Проблема:
Поэтому я начал читать много сообщений, статей и руководств, и в итоге я закрыл слишком много вкладок в своем Chrome. Около 70-100 таб. И я не закрываю ни одну вкладку, не прочитав ее внимательно. Иногда я открываю еще две ссылки, прежде чем закрыть одну вкладку.
Поскольку слишком много вкладок начало загромождать мой браузер и вид на моем компьютере, было трудно управлять ими, потому что от 70 до 100 заголовки вкладок сжимаются почти до уровня, при котором вы можете видеть либо значок значка, либо кнопку закрытия, когда вы наводите на него курсор. . Поэтому также было очень сложно перейти на конкретную вкладку, когда вы не можете прочитать ее заголовок. Если на какой-то вкладке начала воспроизводиться какая-либо музыка/звук, вы никогда не знаете, на какой вкладке воспроизводится звук.
Если на какой-то вкладке начала воспроизводиться музыка/звук , вы никогда не узнаете, на какой вкладке воспроизводится звук.
Взволнованные жемчужины грядут…
Вот тогда я и подумал о том, чтобы решить вышеупомянутые проблемы. Я начал узнавать о расширениях Chrome и о том, как их создать. Раньше я понятия не имел, как создаются расширения Chrome и из чего они состоят. Я знал, что могу сделать один. Как трудно это может быть? Даже если бы это была проблема ракетостроения, я бы в конце концов решил ее. Так я узнал о Chrome Extension API или JavaScript API. Это были расширения API, которые использовались для создания расширений Chrome и вели себя почти как JavaScript. Я начал узнавать об этом, поэтому я могу начать использовать его.
Прежде чем я начал практиковать Chrome API, я решил изучить другие расширения, которые управляют вкладками в Chrome. В итоге я заглянул в исходники расширения OneTab, но код был запутан, и я мало что мог из него извлечь. Затем я посмотрел несколько видео на YouTube, чтобы сделать несколько основных расширений. Они были хороши, но недостаточно хороши, чтобы удовлетворить мои потребности. Пришлось досконально изучить API, и тогда я был на верном пути 🚊.
Сначала о простых вещах: отображение вкладок с помощью jQuery
Я начал с отображения всех вкладок в формате списка на новой странице, как Компонент группы списка в Twitter Bootstrap. Как это сработало? Мне нужно было получить данные из фонового скрипта, использующего Chrome API, и отправить их в скрипт контента или HTML-код вашей страницы расширения. Оттуда я использовал jQuery для перечисления активных вкладок в формате списка с дополнительными кнопками/значками для управления вкладками. Опыт был хорошим, но мой код становился неуклюжим и выходил из-под контроля. Пришлось попробовать что-то другое, что-то получше. Я решил React.js. Подробности будут позже.
Sassing мой рабочий процесс
Я начал стилизовать свой дизайн с помощью CSS. Когда код начал усложняться, я добавил SASS в свой рабочий процесс. Было большим облегчением и успокоением то, что я делал модули/компоненты и легко управлялся с интерфейсом без особых сложностей..
Добавление Gulp в рабочий процесс:
В то время Gulp.js был очень известным таск-раннером, оставив позади других известных таск-раннеров, таких как Grunt. Было хорошо сделать много автоматизации, которую нужно сделать для рабочих процессов переднего плана, таких как минимизация, слияние, копирование файлов из каталога в другой и другие вещи оптимизации. Это был хороший шаг, чтобы получить оптимизированный и организованный вывод для производственной платформы.
Добавление Typescript и позже Babel:
Javascript и jQuery были хороши и делали то, что ожидалось, и я уже написал большую часть своего кода, включая фоновый скрипт и скрипт страницы расширения. Теперь я хотел включить ES6 в свой рабочий процесс. Но потом я также узнал о Typescript, который был типизированным надстрочным индексом поверх ES6. Typescript был хорош, но в то время он выдал мне столько предупреждений и ошибок, что мне пришлось пока отказаться от идеи использовать Typescript и перейти на ES6 с Babel.
От Gulp к Webpack:
Все было хорошо, и я много узнал о Gulp в начале, и на какое-то время он мне очень помог. Но позже работа с Gulp стала замедляться, так как в проект включалось больше файлов. В те дни я много слышал о Webpack и некоторых других причудливых терминах, таких как tree-shaking, code-splitting и т. д. Я также слышал о хорошей производительности Webpack, поэтому решил попробовать Webpack. Поначалу это было очень сложно реализовать, так как он сильно отличался от Gulp.js, а я мало знал о Webpack. Но после большого количества чтения и возни я начал понимать Webpack и то, как он работает. Это был Webpack 3.0, последний на тот момент, когда я добавил его в свой рабочий процесс.
Версия Firefox
У меня был план сделать это расширение и для Firefox. Я мог бы хорошо использовать боковую панель Firefox. Но я не был уверен, когда начать. Затем я услышал новость о Firefox Quantum и конкурсе дополнений, и тогда я подумал: «Если не сейчас, то когда? ». Не так много нужно было сделать, чтобы преобразовать то же самое расширение в Firefox Addon. Большую часть времени он просто заменял «хром» на «браузер». Итак, 2 месяца назад я уже опубликовал свой аддон в Firefox. Хоть я и не выиграл конкурс, но многому научился в процессе.
В настоящее время мое расширение/аддон может делать следующие вещи.
- Список активных вкладок в текущих/всех окнах Chrome/Firefox.
- Показать общее количество открытых вкладок. Значок расширения/аддона.
- Он может сортировать вкладки по URL-адресу или названию вкладки.
- Фокус, закрепление/открепление, отключение/включение звука определенной вкладки из списка. Вы также можете отметить выбор и применить желаемое действие только к выбранным вкладкам.
- Закрыть вкладку. Перед закрытием он подтверждает от вас, хотите ли вы закрыть запрошенную вкладку.
- Поиск/фильтр на вкладках. Вы можете искать по URL-адресам или заголовкам или по обоим. Вы можете использовать регулярные выражения или обычный текст. Поиск может быть как с учетом регистра, так и без него.
- Он показывает выброшенные вкладки как тусклые или полупрозрачные. То же самое для вкладок, которые меняют свое состояние, например. загрузка, переход на новый URL и т. д.
Также есть некоторые спящие функции, которые будут доступны вскоре после их тщательного тестирования. Эти особенности есть.
- Ведение журнала сеансов. Так что если вы случайно закрыли браузер и вкладки не сохраняются. Вы можете вернуться к предыдущему сеансу.
- Сохранить нужный сеанс на потом.
- Просмотрите небольшое всплывающее окно с предварительным просмотром URL-адреса, на который вы наводите указатель мыши, прежде чем щелкнуть по нему.
- Поиск DOM/HTML/веб-элементов на веб-странице с помощью селекторов CSS.
Я не являюсь частью какой-то группы разработчиков. Я делаю это самостоятельно. И у меня все еще есть ограниченные знания. Моя работа может быть уже подвержена многим ошибкам или дырам в безопасности, о которых я мог не знать. Если кто-то из вас может помочь мне или направить меня, я буду очень благодарен. Любые комментарии, предложения или отзывы приветствуются.
Get Excited Gem для Firefox (В настоящее время Firefox более совершенен, чем его аналог Chrome. Он имеет больше функций и лучший дизайн)
С Уважением
Амир Хамид
