Hello world в Chrome extension

После использования fullhd монитора я обратил внимание, что некоторые сайты на разрешении 1920×1280 смотрятся мягко говоря не очень.

Это касается и довольно популярных сайтов, таких как вконтакте или upwork. Дело в том, что они фиксируются на ширине приблизительно 1000px, оставляя вокруг себя кучу свободного пространства. Лично мне не нравится смотреть на пустые блоки.

Один из способов повлиять на это — подгружать свой css со своими стилями. Более того, давно хотел разобраться что там и как с расширениями для браузеров. Решил сделать небольшое расширение, которое бы принимало css стили, сохраняло их и подключала к сайту.

С расширениями все оказалось довольно просто, как я и думал, все элементы работают на связке html+css+js. Для доступа к табам браузера используется апи хрома.

Схема работы

Находясь на сайте открываю popup окно расширения, вписываю код и жму кнопку «Save». Изменения применятся в реальном времени и сохраняются при перезагрузке страницы для каждого домена отдельно.

Так же встроил в расширение крутой js редактор ace, с подсветкой кода и выводом ошибок.

Установка

Кому интересно данное расширение, может скачать с github, поковырять или использовать. Для установки переходим в раздел расширений хрома ( chrome://extensions/ ), ставим галочку «Режим разработчика» и загружаем его с помощью появившихся кнопок.

Пример работы

Hello world в Chrome extension: 2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *