Розширення Google Chrome для розробника. Розширення Google Chrome для веб-розробників. Розширення Web Developer

Існує безліч безкоштовних розширень для браузера Google Chromeякі допомагають зробити ваше життя простіше. Ось 20 із найкращих.

У цій статті ми пропонуємо найкращі розширення Google Chrome для різних цілей — але кожне покликане полегшити роботу.

Firefox вже давно славиться своїм налаштуванням і безліччю розширень, але Google Chrome також набув в останні кілька років велику популярність серед веб-дизайнерів і розробників. Одна з причин цього полягає у його швидкодії та вбудованих інструментах для розробників.

Тепер же, з розвитком колекції розширень Chrome, яка розширюється щодня, це стає причиною, через яку багато веб-розробників та дизайнерів вибирають для себе саме цей браузер.

Бажаєте дізнатися про це більше? Ознайомтеся із нашим списком.

01. iMacros для Chrome

Розширення iMacros для Chrome дозволяє записувати дії та зберігати їх.

Вам, як веб-розробнику, може знадобитися перевіряти свої веб-сторінки. Виконання тих самих дій знову і знову може бути стомлюючим процесом. iMacros – це зручне розширення для Chrome, яке дозволяє записувати ваші дії та зберегти їх, від вас потрібно лише вчинити дію один раз.

Після цього ви можете перевіряти свої сторінки знову та знову, повторюючи дії одним натисканням кнопки. Це заощаджує цінний час і дозволить вам сконцентруватися на найважливіших питаннях.

02. Font Playground

Font Playground дозволяє експериментувати з локальними шрифтами на активних веб-сторінках.

Кожен дизайнер та розробник знайде для себе багато корисного у цьому розширенні. Font Playground дозволяє експериментувати з локальними шрифтами та всіма бібліотеками шрифтів Google на активних веб-сторінках, при цьому не вносячи жодних змін у самі сторінки.

Перевагою цього розширення є те, що воно включає всі можливі розміри шрифту, стилі та ефекти. Ви можете спочатку візуалізувати різні варіанти шрифтів, перш ніж вносити реальні зміни до коду.

03. What Font

Який шрифт використовують? Розширення Chrome What Font може вам це показати!

Дуже корисне розширеннядля Google Chrome, What Font дозволяє розробникам та дизайнерам визначити, які шрифти використовуються на веб-сторінці.

Так що, якщо ви натрапили десь у мережі на шрифт, який виглядає просто фантастично, і хочете використати його в одному зі своїх майбутніх проектів, просто наведіть на нього курсор, і ви миттєво дізнаєтесь, що це за шрифт.

04. Yslow

YSlow підкаже вам, що уповільнює показ сторінки.

За допомогою цього інструменту не просто можна перевірити, як швидко завантажується веб-сторінка, він також покаже вам, чи уповільнює щось завантаження якщо так, те, що саме.

YSlow перевіряє веб-сторінки за 23 з 34 правил визначення продуктивності, розроблених командою Yahoo. Це надзвичайно корисний інструмент для аналізу веб-сторінок, який пропонує способи оптимізації їх роботи.

05. Web Developer

Розширення Chrome Web Developer надає низку корисних інструментівдля девелоперів

Якщо ви веб-девелопер, то можете запитати себе: як ви обходилися досі без цього розширення. Він додає кнопку на панелі інструментів, через яку в Chrome здійснюється доступ до безлічі корисних інструментів для веб-девелоперів.

Це офіційна версіярозширення Web Developer, розробленого для Firefox.

06. Web Developer checklist

У ньому виправлено проблеми зі швидкодією в цьому зручному інструменті Chrome.

Цей інструмент дозволяє перевірити все: чи відповідають ваші сторінки SEO, юзабіліті, а також їхня видимість та продуктивність (швидкість завантаження сторінки).

Так що, якщо, наприклад, ви пропустили тег H1 або якщо у сторінки немає мета-заголовок або мета-опис, розширення Web Developer checklist повідомляє вас про це.

Щоб ви могли швидко вирішити цю проблему. Якщо ви натиснете посилання « більше інформації та допомога» у нижній частині розширення, ви знайдете більш детальний список.

07. DevTools Autosave

Автоматично зберігає зміни у вихідних файлах сторінки (CSS та JS).

Справжній скарб для всіх розробників, DevTools Autosave дозволяє автоматично зберігати будь-які зміни, внесені до CSS та JS-вихідних файлів сторінки через середовище Chrome Dev Tools . Розширення легко в налаштуванні та використанні, воно заощадить вам багато часу.

08. Instant Wireframe

Дозволяє переглядати каркас веб-сторінок.

Підключіть каркасний перегляд будь-якої веб-сторінки лише одним клацанням миші. Це розширення для Google Chrome допомагає веб-розробникам і дизайнерам переглядати веб-сторінки, локальні або опубліковані в Інтернеті, з накладенням каркасу.

09. Ripple Emulator

Ripple Emulator допомагає проводити налагодження веб-сторінок, DOM-інспекцію та автоматичне тестування.

Ripple Emulator мультиплатформний емулятор мобільного середовища, який допоможе вам протестувати роботу вашого веб-програми на різних пристроях та дозволах екранів.

Розширення Ripple Emulator може бути використане у поєднанні з існуючими засобами розробки для налагодження, DOM-інспекції та автоматичного тестування.

10. Streak

Відстеження діалогів електронною поштою в одному тикеті, призначення завдань.

Streak є основним інструментом CRM та підтримки електронної пошти Gmail.

Розширення дозволяє об'єднати всі ваші скриньки електронної пошти в одному або організувати відстеження обміну повідомленнями в одному тикеті, призначати завдання, щоб ви могли управляти процесом спілкування з вашими контрагентами особисто або надати доступ іншим особам.

11. Search Stackoverflow

Отримайте швидкі відповіді на ваші запитання за допомогою цього обов'язкового використання розширення.

Якщо ви веб-розробник, то мали чути про Stack Overflow, місце, куди звертаються багато розробників з різними питаннями, пов'язаними з розвитком веб-проектів. Якщо ні, вам обов'язково потрібно познайомитися з ним. Це дійсно розвинена спільнота, яка охоплює широке коло питань: від C# і Java до PHP та JQuery.

Це фантастичне розширення додає вікно пошуку прямо у ваш браузер і дозволяє використовувати величезні ресурси Stack Overflow . Обов'язкове для використання розширення!

12. PHP Ninja Manual

Вся документація по PHP 5.5 у вашому браузері.

Це дійсно важко запам'ятати кожну функцію, тому якщо ви свого часу витратили багато годин на пошук конкретних PHP функцій через Google, це розширення обов'язково приверне вашу увагу. PHP Ninja Manual надає

Вам всю документацію по PHP 5.5 з конкретними прикладами восьми мовами у вашому браузері.

13. PerfectPixel

Це розширення допоможе вам забезпечити відповідність кожного пікселя вашого веб-сайту дизайну.

Дизайнери ненавидять ситуації, коли вони створюють чудовий дизайн, але в результаті після його перекладу в код щось не збігається з початковим дизайном. Процесор Perfect Pixel справді ідеальне розширення для веб-розробників, які прагнуть створювати сайти, що точно відповідають дизайну.

Це просте використання розширення дозволяє помістити поверх веб-сторінки напівпрозоре накладання зображення і виконати перевірку на збіг кожного пікселя, щоб переконатися, що відповідність 100-відсоткове.

14. Code Cola

Дозволяє редагувати CSS веб-сторінки на місці.

Мало того, що цей інструмент дозволить вам переглядати вихідний код, над яким ви працюєте, він також може працювати в якості редактора CSS. Це означає, що ви можете редагувати CSS стиль ваших веб-сторінок прямо на місці і бачити результат змін негайно.

15. Chrome Sniffer

Інспектування веб-додатків та бібліотек JavaScript.

Це розширення дозволить веб-розробникам перевіряти та визначати веб-додатки, а також бібліотеки JavaScript, підключені до конкретного проекту. Розширення працює максимально просто: адресному рядкуз'являється значок, що вказує на версію використовуваного фреймворку або CMS.

16. User Agent Switcher

Перевірте, як виглядає ваш сайт на різних пристроях.

Відмінний інструмент для того, щоб подивитися, як сайт виглядає на різні види пристроїв, таких як iPad, iPhone або Android-пристрою. Це може бути дуже корисним і в плані того, щоб побачити сайт так, як бачать його пошукові системи.

Є купа безкоштовних розширень Chrome для спрощення вашого життя – ми вибрали найкращі.

Chrome DevTools – це чудово, але можливо додати ще більше цікавих можливостей у ваш браузер, щоб зробити веб-дизайн та розробку значно простіше. Ми представляємо 32 наших улюблених розширень Chrome.

Радикально прискорити процеси стилізації елементів з DomFlags – справді грандіозним розширенням, що дозволяє створювати сполучення клавіш для елементів DOM! Це як закладки для навігації по DOM і змінить спосіб роботи з DevTools.

Ось цікавий спосіб залучити людей до обговорення: Highly Highlighter дозволяє обмінюватися фрагментами зі статей в інтернеті, тому ви можете звернути увагу на найбільш значущі частини написаного.

Booom робить Dribbble кращим, показуючи більше кадрів у списках, додавши до них кнопки Like та Add to Bucket, а також створюючи автозапуск GIF-файлів і роблячи прокручування нескінченним.

Це потужне розширення для Chrome, що дозволяє створювати дизайн, а потім експортувати його в файл CSSдля використання на вашому сайті. Воно підтримує шари і містить безліч інструментів, які ви звикли використовувати у своєму звичайному фото-редакторі.

Це блискуче розширення візьме ваш код та виведе знімки для демо та макетів. Ви також можете додати теми та ефекти для створення зображень для ваших промо та онлайн-портфоліо.

Як веб-розробник, вам необхідно тестувати ваші веб-сторінки. Повторювати ті самі дії знову і знову може стати стомлюючим процесом. iMacros - це зручне розширення для Chrome, яке дозволяє записувати дії і зберігати їх, так що вам потрібно буде зробити певну дію лише один раз. Після цього ви можете тестувати ваші сторінки знову і знову, повторюючи дії одним натисканням кнопки, заощаджуючи дорогоцінний час і дозволяючи собі зосередитися на нагальних питаннях.

Кожен дизайнер та розробник знайде це розширення безцінним. Font Playground дозволяє експериментувати з локальними шрифтами та всією бібліотекою шрифтів Google на веб-сторінці, не роблячи жодних фактичних змін. Принадність цього розширення полягає в тому, що воно включає всі різні накреслення шрифтів, стилі і текстові ефекти, так що ви можете переглядати веб-сторінку перед тим, як впроваджувати зміни.

Це розширення Chrome є дуже корисним інструментом, який робить саме те, що свідчить про його назву - змінює розмір вікна браузера, щоб допомогти вам у створенні адаптивного дизайнусайту. Вибирайте зі списку популярних розмірів монітора або додавайте самостійно розміри та дозволи для збільшення точності.

Якщо вам доведеться працювати з макетом зображення з вбудованим текстом, це розширення може врятувати вас від невеликого роздратування. проект Лігроїн може врятувати вас у світ легкого роздратування. Завдяки майстерним трюкам OCR, розширення дозволяє виділяти, копіювати та вставляти текст із будь-якого зображення і навіть може перекласти його для вас.

Дуже корисне розширення для Google Chrome, що дозволяє розробникам та дизайнерам ідентифікувати шрифти, які використовуються на веб-сторінці. Тому, якщо ви наткнулися на веб-шрифт, що незвичайно виглядає, який хочете використовувати в одному зі своїх майбутніх проектів, просто наведіть на нього курсор і з'ясуйте, миттєво, який це шрифт.

Цей інструмент не тільки перевіряє, як швидко ваші веб-сторінки завантажуються, він також говорить вам, у разі чого уповільнює їх. Yslow перевіряє вашу веб-сторінку за 23 із 34 правил, визначених командою продуктивності компанії Yahoo. Це надзвичайно корисний інструмент для аналізу веб-сторінок, а також пропозиції щодо способів підвищення їх ефективності.

Як веб-розробник, ви можете запитати себе, як ви жили без цього розширення. Він додає кнопку на панелі інструментів Chrome з багатьма корисними інструментами для веб-розробника. Це офіційний порт розширення Web Developer для Firefox.

Page Ruler - це відмінний інструмент для точного вимірювання елементів на будь-якій веб-сторінці та їх подальшій обробці відповідно до ваших вимог. Намалюйте лінійку, щоб отримати розміри в пікселях та розташування.

Цей інструмент дозволить вам перевірити, якщо ваші веб-сторінки слідують кращій практиці, коли справа доходить до SEO, юзабіліті, доступності та продуктивності (швидкість завантаження). Так, наприклад, якщо у вас відсутній тег H1 на сторінці або вона без мета-тегів, розширення повідомляє вас про це, так що ви зможете швидко усунути цю проблему. Якщо ви клацніть на посилання «Докладніше та допомога» в нижній частині розширення, то знайдете більш поглиблений список.

Справжня перлина для всіх веб-розробників, DevTools Autosave дозволяє автоматично зберігати будь-які зміни, зроблені на веб-сторінці, CSS і JS через Chrome DevTools. Розширення легке у налаштуванні та використанні, а також заощадить вам багато часу.

Перетворити будь-яку веб-сторінку на вайрфрейм за допомогою всього одного кліка. Це розширення для Google Chrome допомагає веб-розробникам і дизайнерам переглядати веб-сторінки, локальні або в Інтернеті, з накладанням вайрфрейма.

Розширення ColorZilla - це вдосконалена піпетка, збирач кольору, генератор градієнта та інші корисні інструменти кольорів, які допоможуть вам у вашому дизайні - прямо у вікні вашого браузера.

Це мультиплатформний емулятор мобільного середовища, який може допомогти вам перевірити ваші веб-застосунки, використовуючи різні пристроїта роздільної здатності екрана. Ripple Emulator може використовуватися у поєднанні з існуючими засобами розробки для налагодження, перевірки DOM та автоматизованого тестування.

Якщо ви веб-розробник, то, напевно, чули про Stack Overflow – місце для вирішення будь-яких проблем та питань, пов'язаних із розробкою. Якщо ні, то вам обов'язково потрібно його перевірити, спільнота процвітає та охоплює широкий спектр тем від C# та Java до PHP та jQuery. Це фантастичне розширення додає вікно пошуку прямо до вашого браузера, дозволяючи шукати серед величезних ресурсів Stack Overflow.

Це може бути досить важким пам'ятати кожну функцію, тому якщо ви бували в ситуаціях, коли доводилося витрачати години на пошук певної функції PHP в Google, то це розширення обов'язково приверне вашу увагу. PHP Ninja Manual надає вам всю документацію PHP-5.5 з прикладами восьми мовами, не виходячи з вашого браузера.

Дизайнери ненавидять, коли вони створюють приголомшливий дизайн, який не збігається з результатом кодування. PerfectPixel є ідеальним розширенням для веб-розробників, які прагнуть розробляти сайти, які є точними образами дизайну. Це просте використання розширення дозволяє накласти напівпрозоре зображення поверх веб-сторінки і виконати порівняння пікселів, щоб гарантувати 100% точність.

Цей інструмент дозволить вам не тільки переглядати вихідний код, з яким ви вже працюєте, але також функціонує як CSS редактор, де ви можете редагувати свої веб-сторінки і бачити зміни миттєво.

Відмінний інструмент, щоб переглядати, як виглядає сайт, використовуючи різні засоби користувача, такі як iPad, iPhone або Android. Це може бути дуже корисним, якщо сайт був зламаний, і так ви можете переглядати те, як пошукові системи бачать сторінки.

Один із найпопулярніших і корисних емуляторів IE. Він дозволяє веб-розробникам тестувати веб-сторінки в різних версіях IE безпосередньо в браузері Chrome.

Це простий у використанні безкоштовний онлайн-фоторедактор, який дозволяє редагувати веб-сторінки, зображення та скріншоти. Але це не те, що робить його добрим. PicMonkey дозволяє захопити будь-який образ та робити скріншот усієї сторінки одним натисканням кнопки. Після того, як ви оберете зображення, ви можете відредагувати його, як ви хочете, застосовуючи ефекти для зміни експозиції.

Дефіцит колірного зору або дальтонізм торкається мільйонів людей по всьому світу. Це геніальне розширення використовує техніка, яка дозволяє створювати образи, які підходять для перегляду людям із цим порушенням.

Розширення допоможе веб-розробнику у перевірці бібліотек фреймворків, CMS та JavaScript на сайті, в той момент, коли ви його переглядаєте. В адресному рядку з'явиться іконка, яка вказує на виявлену бібліотеку. Це розширення Chrome має високий рейтинг і може виявити понад 100 популярних бібліотек CMS і JS.

Закінчили сайт, але забули перевірити усі посилання? Незалежно від того, наскільки ретельно ви стежили за цим, можливо, що ви пропустили одну чи дві, і переглянути їх все буде досить нудно. З цим розширенням, ви можете просто залишити сайт у роботі, і воно читатиме всі посилання на кожній сторінці, виділяючи доступні зеленим кольором і биті – червоним.

Це просто невелике розширення, яке відображає популярні фотографії з Fickr щоразу, коли ви відкриваєте вікно. Натисніть на фотографію, щоб переглянути її у Flickr або клацніть ім'я користувача, щоб побачити більше фотографій від фотографа.

Як і у випадку з попереднім розширенням, у кожній новій вкладці ви бачитимете шедеври від таких великих художників як Ван Гог та Моне. Якщо вам сподобалося зображення, натисніть на нього, і ви потрапите на веб-сайт Google Cultural Institute, який повний інформації про роботу та її творця.

Отже, ваш останній рахунок від мобільного провайдера за Інтернет був значним? Не панікуйте. Вам просто потрібне це розширення: воно зменшує обсяг даних, які використовуються під час перегляду веб-сторінок. При включенні Chrome використовуватиме сервери Google, щоб стискати сторінки перед завантаженням. Є тільки один нюанс: не буде увімкнено SSL і режим інкогніто.

Доброго дня любі друзі.

Продовжуючи тижневий марафон оглядів про корисні інструменти — я не можу не згадати найкращі розширення для веб-дизайнерів та веб-програмістів для самого кращого інтернетбраузера Google Chrome. Чому я вважаю його найкращим? Тому що він сучасний, швидкий і найзахищеніший, а також я люблю його за мінімалізм. Але сьогодні не про це. І так переходимо в повну версіюстатті.

Огляд кращих розширень для Google Chrome

Дуже багато на сьогоднішній день користувачі розробляють розширення. Їх просто величезна кількість і з кожним разом вони стають не тільки все потужнішими і функціональнішими, але й істотно допомагають нам збільшити нашу продуктивність праці. Я робитиму серію статей про кращих розширенняхдля Google Chrome. На сьогодні я зосереджуся на розширеннях, які прості в установці та корисні для веб дизайнерів та розробників.Сподіваюся, що якісь розширення Chromeбудуть корисними і для Вас дорогі читачі.

Найкращі розширення Google Chromeдля веб-дизайнерів та розробників:

Дозволяє Вам просто визначити, які шрифти використовуються на сторінках.

Опис:

За допомогою цього розширення ви можете визначити, які веб-шрифти використовуються на сайті. Це дуже просто та швидко. Розширення підтримує Typekitі Google Font API.

Фантастично легка лінійка для вирівнювання та вимірювання елементів та блоків на сайтах.

Опис:

Отримуйте розміри легко: c горизонтальною і вертикальною лінійкою, що перетягується, пікселі, піки і типи вимірювань. Ви можете використовувати одночасно до 4 лінійок з різними кольорами та типами: дерев'яні та сталеві.

"Кожен веб-дизайнер повинен мати при собі це розширення для Chrome"

Screen Capture (by Google)

Швидке захоплення видимого вмісту вкладки, області веб-сторінки або всієї сторінки повністю. Збереження в PNG формат. Підтримка вертикального та горизонтального прокручування.

Опис:

Це дуже просте використання розширення для захоплення зображення з екрана моніторів. Ви можете захоплювати зображення як з активної вкладки, області сторінки або сторінки цілком у вигляді зображення PNG.

Показує всі пов'язані зображення на сайті та дозволяє їх скачати.

Опис:

Якщо Вам потрібно завантажити з веб-сторінок, з цим розширенням Ви зможете легко: переглянути зображення, відсортувати по URL. Завантажити можна вибрати відповідні зображення - позначаючи їх прапорцями або натисканням на зображення, тоді вони відкриються в новій вкладці. Налаштування відображення ширини, розмір кордону, стиль і колір, фільтри приховування, кнопки та сповіщення все, що вам знадобиться можна налаштувати!

RescueTime - Це відмінне аналітичне розширення, яке допоможе вам зрозуміти, як Ви проводите свій час.

Опис:

RescueTime є особистим-аналітичним сервісом, який допоможе вам зрозуміти, як ви проводите час за вашим комп'ютером, смартфоном або планшетом. Від Вас не потрібно ніякого ручного введення даних. Веб-додаток взаємодіє зі встановленим клієнтом працює на OS X, Windows, Linux, Android пристроях, та ChromeOS.

Pinterest for Google Chrome

Дізнайтеся, збирайте та діліться натхненням

Опис:

Pinterest – сервіс для пошуку натхнення та можливості поділиться ним з іншими дизайнерами та розробниками. Використовуйте його для збору колекції речей, які Вас надихають, організуйте та плануйте ваші проекти.

Офіційне розширення Pinterest для Google Chrome додасть кнопку ваш браузер, яка дозволяє вам взаємодіяти з сервісом. Швидко та легко!

Додає кнопку панелі інструментів із різними інструментами веб-розробника до браузера. Це офіційний порт розширення, який був спочатку написаний для Firefox.

Адаптація зовнішнього виглядусайтів.

Опис:

Дозволяє швидко змінювати вигляд будь-якого веб-сайту (за допомогою CSS).

У редакторі ви вибираєте будь-які зміни, які хочете зробити з елементом. Ви також можете змінити розмір шрифту, колір і багато іншого. Досвідчені користувачі можуть писати свої CSS таблиціу ручну.

Використовуючи Stylebot, ви можете налаштувати зовнішній вигляд ваших улюблених веб-сайтів. Також це чудовий інструмент для пізнання CSS і для налагодження дизайну власних проектів.

Офіційне розширення Alexa Traffic для аналізу сторінки та трафіку зі сторінок.

Опис:

Alexa Traffic Rank офіційне безкоштовне розширення для Chrome. Ви зможете переглянути повну інформаціюпро будь-який сайт в інтернеті. Порівнюйте та аналізуйте легко та просто.

Розширення для браузера, який дозволяє вам вибрати та переглянути код колір з будь-якої сторінки.

Опис:

За допомогою інструменту піпетки ви зможете переглянути код кольору з будь-якого сайту. Є вбудована історія ваших вимірів. Працює як у Chrome так і Chromium.

Розширення для розробників для тестування веб-сторінок за різних роздільних здатностей екрана.

Опис:

Розширення для розробників для тестування веб-сторінок за різних роздільних здатностей екрана, з можливістю визначати власні параметри дозволу.

Дозвіл змінює розмір вікна браузера, щоб переглянути свої веб-сайти в різних роздільних здатнах екрана. Є список найпоширеніших дозволів екранів і можливість налаштування цього списку.

Speed ​​Tracer (by Google)

Отримайте уявлення про швидкість веб-сайтів за допомогою цього розширення.

Опис:

Speed ​​Tracerце відмінний інструмент і створений він для того, щоб допомогти вам виявити та усунути проблеми з продуктивністю ваших веб-додатків. Він збирає інформацію та робить аналіз показників, які беруться на низькому рівні вашого браузера.

Використання цього розширення дозволить вам отримувати інформацію про те, де найбільше час губиться у вашому додатку. Це можуть бути проблеми викликані: Javascript, css, Dom обробка подій, завантаження мережевих ресурсів, зворотний виклик XMLHttpRequest, великі зображення та багато іншого.

Firebug Lite for Google Chrome

Firebug Lite для Google Chrome — офіційне розширення від Firebug Working Group.

Опис:

Firebug Lite не замінює Firebug або Google Deweloper Tools. Це розширення, яке буде добре поєднується з даними інструментами. Firebug Lite забезпечує багате візуальне уявлення, яке ми звикли бачити в Firebug, коли справа доходить до елементів HTML, DOM елементів, та затінення Box Model. Він забезпечує також деякі цікаві функції такі, як перевірка HTML elemements за допомогою миші та живе редагування CSS властивостей.

Corporate Ipsum

Генерація рандомного тексту для заповнення макетів.

Опис:

lorem ipsum генератор із корпоративним ухилом. Створює наповнювач за змістом чи абзацом.

Це клон (з дозволу) корпоративного Ipsum Брайан Haslanger.

Висновок:

У цій статті я описав перші 15 розширеньдля Google Chromeя використовую сам у повсякденній роботі. Сподіваюся парочка і вам знадобиться. Радий почути в коментарях про розширення. які Ви використовуєте Ви дорогі друзі! Мене звуть Віктор Доценко. Всього найкращого!

Не секрет, що сьогодні веб-сайти використовують каскадні таблиці стилів (CSS), що містять параметри всіх елементів сторінки. У CSS вказуються шрифти, розміри об'єктів, рамок, картинок, блоки та таблиці. Ми вирішили зібрати добірку додатків Google Chrome, які дозволять відредагувати стиль будь-якої сторінки в інтернеті. Бонусом ми покажемо, як змінити тло сторінки.

Кожна людина має свої переваги та інтереси, особливо, коли справа стосується веб-дизайну. Згадайте хоча б вічні холівари після кожного оновлення YouTube. Та й у вас, напевно, є кілька зауважень до відображення інформації на улюбленому сайті: десь шрифт негарний або дрібний, десь взагалі непотрібний блок повідомлень висить. А ось тут було б непогано додати фонову картинку!

Сьогоднішні браузери дозволяють редагувати сайти буквально на кілька кліків. Користувач може налаштувати все, що завгодно, аж до розташування та порядку елементів на сторінці. Для цього були написані спеціальні розширення та доповнення, які ми розберемо, перш ніж почати зміну головної сторінки Google.

Stylebot

Мабуть найпопулярніше розширення з відкритим вихідним кодом. Дозволяє на льоту редагувати шрифти, кольори, розміри та багато іншого. Має простий режим редагування: при відкритому вікні Stylebot можна вибрати потрібний елемент, просто навівши на нього покажчик миші. Зміни зберігаються миттєво, стилями користувача можна ділитися з друзями.

Web Override

Програма для підключення Javascript'ових скриптів до зовнішніх веб-сайтів. Вже містить jQuery, async.js, moment.js і Lodash, так що функції цих бібліотек можна вільно використовувати. Підходить для просунутих користувачів, які вміють користуватися Javascript, проте новачки можуть використовувати розширення для впровадження вже написаних кимось скриптів.

Styler

Принцип той же, що і у Stylebot: швидко редагуємо стиль сторінки, зміни зберігаються миттєво. Інтерфейс та послідовність дій трохи інші, трохи менше можливостей. Тож вибір залишається за вами: що більше до вподоби доведеться.

Stylish

Найпотужніший інструмент для кастомізації веб-сайтів, наскільки це можливо, близький до Stylebot. Дозволяє приховувати непотрібні елементи, редагувати стилі, ділитися результатом із друзями. Веб-сайт доповнення містить більше 10 000 стилів користувача для зміни зовнішнього вигляду Facebook, YouTube, App Storeта багатьох інших популярних ресурсів.

Live CSS Editor

Після натискання клавіш відкриває невелике віконце, де користувач може вписати будь-який стиль, який відразу буде застосований до сторінки (після закриття зміни зберігаються). Просто та зручно: нічого зайвого.

Розкажемо, як і обіцяли, як відредагувати фон будь-якої сторінки на прикладі Stylebot.

Важливо! Цей метод красиво виглядає на “легких” сторінках, не перевантажених блоками та меню та представлений лише для ознайомлення з можливостями доповнень. Рекомендуємо пробувати його на сайті Google.com.

• заходимо на необхідну сторінку
• клацаємо по іконці Stylebot у правому верхньому кутку Chrome
• натискаємо Open Stylebot
• унизу вибираємо опцію Edit Css
• Вводимо наступний код:

body (
background: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
background-size: 100%; 100%;
!important;
}

• закриваємо Stylebot

Готово! Замість картинки, наведеної як приклад, можна використовувати будь-яку іншу (потрібно просто замінити посилання у коді вище). Для більш складної кастомізації сайтів доведеться почитати мануали CSS, але повірте: в цьому немає нічого складного.

Ця стаття призначена для адміністраторів Chrome Enterprise та розробників, які мають досвід створення пакетів програм Chromeта їх публікації.

Якщо в Інтернет-магазині Chrome немає продукту з потрібною вам функціональністю, ви можете створити власну програму або розширення, а користувачі зможуть додати його на свої пристрої з Chrome OS або в браузер Chrome. Наприклад, як адміністратор, ви можете автоматично встановити на пристроях користувачів приватну програму-закладку, яка посилається на веб-сайт відділу кадрів.

Підготовка

• Якщо у файлі маніфесту вказано цільовий сайт, на який посилається програма або розширення, підтвердьте право власності на цей сайт.
• Якщо програма або розширення розміщено на приватному сервері, можна вказати, хто має право публікувати його в Інтернет-магазині Chrome. Ви можете вимкнути підтвердження права власності на сторонні сайти, на які посилається програма.

Крок 1. Створіть програму або розширення

Нижче як приклад використовується додаток-закладка. Інструкції зі створення більш складних програм та розширень Chrome наведено в посібнику з початку роботи .

1. Створіть на комп'ютері папку, де зберігатимуться файли програми або розширення. Надайте їй ім'я програми.
2. Створіть файл маніфесту.
   1. Створіть у текстовому редакторіфайл JavaScript ® Object Notation (JSON). Перегляньте приклад файлу JSON для програми-закладки.
   2. Перевірте, чи правильно відформатовано код у файлі JSON, використовуючи спеціальний інструмент, наприклад JSONLint .
3. Помістіть файл manifest.jsonдо папки програми або розширення.
4. Створити логотип.
   1. Зображення повинне мати розмір 128 х 128 пікселів.
   2. Збережіть файл логотипу під назвою 128.pngу папці програми.

Крок 2. Протестуйте програму або розширення

Розробники можуть тестувати свої програми та розширення у браузері Chrome або на пристроях Chrome OS.

Щоб усунути проблеми з програмою або розширенням, скористайтеся журналами Chrome.

Крок 3. Створіть колекцію програм (необов'язково)

Адміністратор може створити для організації колекцію програм, щоб рекомендувати користувачам програми та розширення Chromeдля установки.

Крок 4. Опублікуйте програму або розширення в Інтернет-магазині Chrome

Розробник може зробити програму або розширення загальнодоступною або обмежити доступ до неї. Під час публікації в Інтернет-магазині Chrome можна вибрати один із трьох варіантів.

• Загальнодоступне: хто завгодно може знайти та встановити програму.
• Доступ за посиланням: встановити програму або розширення можна лише за посиланням. Він не включається до результатів пошуку в Інтернет-магазині Chrome. Посилання можна надіслати користувачам як у домені організації, так і за його межами.
• Приватне: знайти та встановити програму або розширення можуть лише користувачі у вашому домені. Крім цього, можна надати доступ до продукту лише довіреним тестувальникам, чиї імена вказані в панелі інструментів розробника.

Щоб додати програму або розширення до Інтернет-магазину Chrome, створіть ZIP-архів відповідної папки, а потім опублікуйте продукт .

Крок 5. Налаштуйте правила роботи з програмою або розширенням

У панелі адміністратора Google можна керувати використанням програм та розширень на пристроях Chrome та в браузері Chrome на комп'ютерах Windows, Mac та Linux у вашій організації. Правила Chrome можна налаштовувати