Darbe.ru

Быт техника Дарби
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как просмотреть исходный код расширения Chrome

Как просмотреть исходный код расширения Chrome

Как просмотреть исходный код расширения Chrome

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

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

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

Найдите исходный код расширения Chrome на жестком диске

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

Теперь, когда вы находитесь на странице своих расширений, вам нужно поставить галочку в верхнем правом углу страницы, где указано «Режим разработчика», и найти идентификатор для расширения, для которого вы хотите использовать исходный код. Для целей этой демонстрации мы будем использовать ID для «AdBlock», который является «ID: gighmmpiobklfepjocnamgkkbiglidom»,

Теперь, когда вы знаете идентификатор расширения, вам нужно открыть проводник Windows, открыв любую папку или одновременно нажав кнопки «Windows» и «E».

После этого в строке местоположения введите следующее:

Теперь вам нужно перейти вниз по папкам следующим образом: Google -> Chrome -> Данные пользователя -> Профиль -> Расширения. В некоторых случаях ваша папка «Профиль» может быть названа чем-то другим, например «Профиль 1», поэтому просто имейте это в виду при просмотре.

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

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

Использование устройства просмотра исходного кода расширения Chrome

В этом методе вам нужно будет загрузить это расширение, которое позволит вам просматривать исходный код или файл CRX для любого расширения в Google Web Store.

После того как расширение было установлено, вы должны увидеть диалоговое окно подтверждения всплывающих окон, как показано ниже.

Теперь, когда он установлен, вы можете зайти в Интернет-магазин Google Chrome и просмотреть исходный код любого приложения. Просто нажмите на желтый значок в строке местоположения, и вам будет предоставлен выбор для загрузки файла в виде zip-файла или просмотра его в Интернете.

Если вы загружаете файл zip, вы можете просто разархивировать его и просмотреть его с помощью обычного текстового редактора. В качестве альтернативы, если вы решите просмотреть исходный код в Интернете, вы увидите что-то большее по этим строкам в новой вкладке Chrome.

Где в Google Chrome посмотреть расширения

Особенность современного программного обеспечения — вариабельность. Человек может пользоваться стандартными функциями программ или устанавливать дополнительные инструменты (расширения). В веб-обозревателе Google Chrome тоже предусмотрена такая возможность.

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

Что такое расширения в Гугл Хром

Расширения для Google Chrome — это небольшие программы, которые встраиваются в браузер, чтобы повысить его функциональность. Дополнения можно найти в интернет-магазине Chrome. Некоторые программы распространяются бесплатно, за другие нужно платить. Скачанное расширение автоматически интегрируется в браузер, готово к использованию сразу после установки.

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

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

Место хранения дополнений в Google Chrome

В некоторых версиях Гугл Хром есть предустановленные расширения. Они готовы к работе с момента инсталляции браузера. Их нельзя удалить, можно только отключить или изменить настройки. Остальные мини-приложения пользователи скачивают и удаляют по собственному желанию.

Список установленных приложений виден:

  • в меню браузера Гугл Хром на странице «Расширения»;
  • в папке Extensions на жестком диске компьютера.

Для полного счастья обычно достаточно знать, где находятся расширения в Гугл Хром. Оттуда их можно активировать, отключать и удалять.

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

Читайте так же:
Макросы excel if then

Расширения в меню веб-обозревателя

Дополнения можно устанавливать, отключать и удалять на странице браузера «Расширения». Также на этой странице отображен список всех установленных мини-программ.

Если не знаете, как посмотреть расширения, откройте браузер и следуйте инструкциям:

  • Нажмите на три точки в верхнем правом углу страницы.
  • Найдите и откройте вкладку основных настроек Гугл Хрома.
  • В меню в левой части страницы выберите вкладку «Расширения».

Расширения в меню ХромаРасширения в меню обозревателя Гугл Хром

Папка на диске

Файлы всех установленных программ хранятся на жестком диске компьютера. Если вам требуется найти расширения в Гугл Хром на устройстве с ОС Windows, выполните эти действия:

  • Откройте проводник (комбинация клавиш «Windows + E»).
  • В адресную строку впишите адрес %localappdata%GoogleChromeUser DataDefaultExtensions и нажмите клавишу «Enter».
  • В открывшейся директории Extensions просмотрите список расширений или перейдите к изменению настроек папок.

Расширения Гугл Хром в папке на дискеПапки с расширениями Гугл Хрома

Из каталога Extensions можно перейти в предыдущий раздел Default. В этой папке содержатся хранилища с пользовательскими настройками. Удалять файлы из хранилищ и менять их названия не рекомендуется, из-за этого возможны сбои в работе браузера.

Как управлять расширениями

Новые дополнения загружают из интернет-магазина Chrome. Попасть туда можно как минимум тремя способами:

  • по прямой ссылке: https://chrome.google.com/webstore//extensions?hl=ru
  • через кнопку «Сервисы» на панели закладок;
  • через меню «Расширения»: находясь там, нажмите на три полоски в левом верхнем углу, а затем ищите внизу кнопку «Открыть Интернет-магазин Chrome».

Кнопка «Сервисы», да и сама панель закладок могут быть не видны. В этом случае нажмите Ctrl+Shift+B, чтобы показать панель закладок. Затем кликните на нее правой кнопкой мыши и выберите «Показывать кнопку «Сервисы»».

Меню «Расширения» открывается так:

  • три точки в правом верхнем углу;
  • «Дополнительные инструменты»;
  • «Расширения».

Установленные расширения в ХромеУправление расширениями Гугл Хром

Отсюда их можно удалять, отключать (ползунок серый) и включать (ползунок синий).

Если хотя бы одно из скачанных расширений активно — в правом верхнем углу Хрома появляется кнопка «Расширения» (деталь пазла).

Нажав на эту кнопку, вы увидите все включенные расширения. Нажмите на само расширение или на три точки напротив него, чтобы получить доступ к настройкам и параметрам этого плагина. Иногда эти два действия (клик на расширения и клик на три точки) дублируют друг друга, а иногда открывают доступ к разным опциям.

Кнопка «Управление расширениями» ведет нас к уже знакомой странице «Расширения», где скачанные плагины можно включать, выключать и удалять.

Как открывать локальные файлы в браузерах [Простой способ]

Чтобы исправить различные проблемы с ПК, мы рекомендуем Restoro PC Repair Tool: это программное обеспечение исправит распространенные компьютерные ошибки, защитит вас от потери файлов, вредоносных программ, сбоев оборудования и оптимизирует ваш компьютер для максимальной производительности. Исправьте проблемы с ПК и удалите вирусы прямо сейчас, выполнив 3 простых шага:

  1. Загрузите Restoro PC Repair Tool, который поставляется с запатентованными технологиями (патент доступен здесь ).
  2. Нажмите Начать сканирование, чтобы найти проблемы Windows, которые могут вызывать проблемы с ПК.
  3. Нажмите «Восстановить все», чтобы исправить проблемы, влияющие на безопасность и производительность вашего компьютера.
  • В этом месяце Restoro скачали 651 404 читателя.

Google Chrome включает файловый навигатор, который позволяет просматривать содержимое папок на жестком диске.

Это не совсем файловый менеджер, но вы можете открывать поддерживаемые файлы изображений, PDF и TXT в Chrome с его файловым навигатором. Есть также два других метода открытия файлов в Chrome.

Существует множество других браузеров, основанных на движке Chrome Chromium. Браузеры Chromium, такие как Microsoft Edge, Opera и Vivaldi, имеют тот же файловый навигатор, что и Chrome.

Таким образом, пользователи также могут открывать локальные файлы в этих браузерах с помощью тех же методов Chrome.

Как я могу открывать локальные файлы в Chrome, Opera, Vivaldi и Edge?

1 Используйте файловый навигатор в браузерах Chromium

  1. Сначала введите file: /// c: / в адресную строку браузера Chromium. Индекс C: файловый навигатор, показанный непосредственно ниже, откроется, когда вы нажмете клавишу Return.
    Как открывать локальные файлы в браузерах [Простой способ]
  2. Щелкните папки, чтобы открыть папку, содержащую файл изображения (PNG или JPEG), PDF или TXT, который необходимо открыть.
  3. Затем щелкните файл, чтобы открыть его в браузере.
    Как открывать локальные файлы в браузерах [Простой способ]
  4. Файл откроется в той же вкладке. Вы можете нажать кнопку «Назад» в браузере, чтобы вернуться к файловому навигатору.
  5. Чтобы открыть файл в новой вкладке, щелкните его правой кнопкой мыши, чтобы выбрать параметр «Открыть ссылку в новой вкладке».
  6. Если вы попытаетесь открыть файл неподдерживаемого формата, откроется окно «Сохранить как». Вам нужно будет выбрать папку для загрузки и нажать «Сохранить».

2 Добавьте расширение Local Explorer в свой браузер Chromium

  1. Чтобы добавить расширение Local Explorer в браузер Chromium, которое расширяет возможности файлового навигатора, нажмите кнопку «Добавить в Chrome»на странице этого дополнения.
  2. Нажмите кнопку «Добавить расширение» для подтверждения.
  3. После этого откроется страница локального проводника, на которой вам нужно будет нажать кнопку «Добавить в проводник Windows».
  4. Откройте папку, в которой находится загруженный модуль интеграции LocalExplorer-Setup.exe.
  5. Щелкните LocalExplorer-Setup.exe, чтобы установить модуль интеграции.
    Введите chrome: // extensions в адресную строку браузера Chromium и нажмите Enter, чтобы открыть вкладку расширений.
    Как открывать локальные файлы в браузерах [Простой способ]
  6. Нажмите кнопку «Подробности» в локальном проводнике, чтобы открыть параметры, показанные непосредственно ниже.
    Как открывать локальные файлы в браузерах [Простой способ]
  7. Включите параметр Разрешить доступ к URL-адресам файлов.
  8. Введите файл: /// c: / в адресную строку и нажмите клавишу возврата.
  9. Щелкните любой файл в файловом навигаторе браузера. Теперь файл будет открываться в программе по умолчанию, а не в браузере.
Читайте так же:
Забыл сохранить документ excel как восстановить

Примечание. Щелчок по папкам в каталогах Index of C: откроет их в проводнике. Чтобы остановить открытие окон проводника, щелкните правой кнопкой мыши значок «Локальный проводник» на панели инструментов URL-адреса и выберите «Параметры».

Снимите флажок «Использовать локальный проводник для открытия папок», нажмите «Сохранить настройки» и перезапустите браузер.

3 Нажмите горячую клавишу Ctrl + O

Как открывать локальные файлы в браузерах [Простой способ]

Нажатие сочетания клавиш Ctrl + O – альтернативный метод открытия файлов в браузерах Chromium.

Нажатие этой горячей клавиши откроет окно Открыть. Выберите из этого окна поддерживаемый формат файла, который нужно открыть в браузере, и нажмите кнопку «Открыть».

4 Поддерживаемые форматы файлов перетаскиванием

Как открывать локальные файлы в браузерах [Простой способ]

Кроме того, вы можете открывать файлы PNG, JPEG, PDF и TXT в браузерах Chromium, перетаскивая их в их окна.

Щелкните левой кнопкой мыши файл в проводнике и удерживайте кнопку мыши. Затем перетащите этот файл в окно браузера и отпустите левую кнопку мыши, чтобы открыть его там.

Вкладка Index of C: в браузерах Chromium представляет собой удобный файловый навигатор для поиска и открытия поддерживаемых форматов файлов в их окнах.

Добавление локального проводника в Chrome, Vivaldi, Opera и MS Edge также позволит вам открывать неподдерживаемые форматы файлов в программах по умолчанию в этих браузерах.

Где искать расширения в хроме

FAQ по Google Chrome
Обсуждение | FAQ

    Прикрепленное изображение

Сообщение отредактировал svm — 02.02.14, 21:09

Сообщение отредактировал KOT-BE3DEXOD — 28.02.16, 16:32

Сообщение отредактировал svm — 03.01.13, 22:13

  1. Переходите на оф. страницу загрузки.
  2. Нажимаете «Загрузить Chrome»
  3. Выбираете/убираете параметры (Установить Google Chrome в качестве браузера по умолчанию, Автоматически отправлять статистику использования и отчеты о сбоях Google Chrome)
  4. Нажимаете «Принять условия и установить», если согласны.
  5. Соглашаетесь со всем, что спросят.

Сообщение отредактировал svm — 14.07.13, 11:37

Сообщение отредактировал svm — 03.01.13, 22:13

Справка по Google Chrome

Сообщение отредактировал svm — 18.01.13, 15:30

Версии Chrome

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

Сообщение отредактировал svm — 10.01.13, 23:30

Горячие клавиши

Сообщение отредактировал svm — 18.01.13, 15:38

Полное удаление Google Chrome

  1. Чтобы удалить Google Chrome, переходим в папку:
    Windows7/8 (x64): %ProgramFiles(x86)%\Google
    Windows7/8 (x32/x86): %ProgramFiles%\Google
    Windows XP: %ProgramFiles%\Google
  2. Удаляем папку Chrome.

Сообщение отредактировал svm — 15.06.13, 13:27

  1. Идем на эту страницу, авторизуемся или только вводим пароль от почты Google, если требуют.
  2. Находим «Синхронизация Google Chrome»
  3. И правее кликаем на «Остановить синхронизацию и удалить данные с серверов Google».
  4. Далее у вас еще раз спросят по поводу остановки синхронизации данных, если вам это нужно, то смело подтверждайте.
  5. Нас попросят перезагрузить страничку через пару минут, после чего можно увидеть результат.

Сообщение отредактировал svm — 13.02.13, 10:57

  1. Включаем синхронизацию данных с аккаунтом Google. Если включена, то переходим ко второму пункту, желательно проверить все ли необходимые данные подвергаются синхронизации.
    • Заходим в настройки (chrome:settings) -> нажимаем «Войти в Chrome», либо «Дополнительные настройки синхронизации», чтобы проверить все ли необходимые данные подвергаются синхронизации.
      Либо используем быструю ссылку chrome:settings/syncSetup
    • Вводим параметры вашей ученой записи.
    • Если аккаунта Google не имеется, рекомендуется его завести, нажав ссылку «Создать аккаунт Google».
    • Рекомендуется выбрать пункт «Синхронизировать все», однако, при желании, можно войти в расширенный режим выбора и настроить параметры синхронизации по своему вкусу.
    • Нажимаем «ОК»
  • Открываем любой другой браузер, заходим на эту страницу и устанавливаем Chrome.
    Можно установить любой другой из этого списка.
  • Заходим в настройки (chrome:settings) -> нажимаем «Войти в Chrome»
    Либо используем быструю ссылку chrome:settings/syncSetup
  • Вводим параметры Вашей ученой записи.
  • Настраиваем синхронизацию по своему вкусу (рекомендуется выбрать «Синхронизировать все»)
  • Нажимаем «ОК»

Сообщение отредактировал svm — 07.01.13, 21:54

Команды для Chrome

  • chrome:flags — экспериментальные возможности, которые скрыты в браузере Google Chrome (использовать на свой страх и риск)
  • chrome:flash — О платформе Flash
  • chrome:downloads — История загрузок (эта функция также доступна из Меню->Загрузки, а также и по комбинации [Ctrl + J])
  • chrome:extensions — Расширения (эта функция также доступна из Меню->Параметры->Расширения)
  • chrome:bookmarks — Управление закладками (эта функция также доступна из Меню->Закладки->Диспетчер закладок, а также по комбинации [Ctrl+Shift+O])
  • chrome:history — История (эта функция также доступна из Меню -> История, а также по комбинации [Ctrl+H])
  • chrome:settings — Параметры браузера (эта функция также доступна из Меню->Настройки)
  • chrome:net-internals — Здесь отображается вся сетевая информация. Используйте эту страницу для получения информации о сетевых событиях, генерируемых браузером. Вы можете также экспортировать эти данные. Одной из важных функций на этой странице является «Test». Если страницу не удалось загрузить, Вы можете открыть «chrome://net-internals”->»Test»-> адрес, который не удалось загрузить и нажмите на кнопку «Start Test», далее пройдет тест и появится отчёт о том, почему не удаётся открыть страницу.
  • chrome:quota-internals — Показывает информацию о дисковом пространстве, используемого браузером.
  • chrome:sync-internals — Информация и статистика синхронизации.
  • chrome:conflicts — Модули, загруженные в Google Chrome
  • chrome:gpu-internals — Какие функции видеокарты у Вас поддерживаются и какие включены.
  • chrome:print — Печать (можно использовать для сохранения страницы в формат *.pdf)
  • chrome:sessions — Показывается информация о сессиях.
  • about:version — выводит версию браузера.
  • about:plugins — информация о плагинах используемых в браузере.
  • about:histograms — какие-то замудренные гистограммы, вероятно для разработчиков.
  • about:dns — статистика по DNS-кам.
  • about:cache — кэш браузера.
  • view-cache:stats — статистика кэша.
  • about:stats — полная статистика браузера, с возможностью фильрации данных.
  • about:memory — Статистика по памяти Chrom’а
  • view-source:url — показывает разметку страницы.
  • about:crash — «Опаньки»
  • chrome:kill — «О нет, мы ее потеряли!»
  • chrome:crashes — Лог сбоев программы.
  • chrome:apps — страница с установленными приложениями. В стабильных версиях приложения пока находятся на новой вкладке.
  • chrome:performance — Графики данных и события для оценки производительности.

Сообщение отредактировал svm — 06.01.14, 13:39

  1. Заходите на сайт с видео и вызываете Инструменты разработчика ([F12] / [Ctrl+Shift+I])
  2. Переходите на вкладку Network
  3. Перезагружаете страницу ([F5] / [CTRL+R])
  4. Запускаете видео
  5. Во вкладке Network ищем наше видео, обычно, эти видео имеют расширение видео форматов, если же расширения не присутствует, как в случае с youtube (эти файлы имеют название videoplayback), то ориентируемся по столбцу Type
  6. Чтобы выбрать видео лучшего качества, необходимо ориентироваться по столбцу Size — чем больше, тем лучше.
    Примечание: чтобы выбрать видео лучшего качества, необходимо, чтобы оно воспроизводилось, т.е. надо в настройке качества видео (например, в youtube) выставить наибольшее.
  7. Найдя строку с видеофайлом, кликните по названию видеофайла.
  8. Перейдите на вкладку Headers, если открыта другая вкладка.
  9. Там будет ссылка Request URL:. Копируем её (примерный вид (обычно длинные): http://r5—sn-4g57l. D8eBW48q)
  10. Вставляем в строку браузера и переходим по ней
    Примечание: если скачивание не началось автоматически (в большинстве случаев), а видео начало воспроизводиться в новом окне, нажимаем на гаечный ключик, затем на Сохранить страницу как. или используем сочетание клавиш [Ctrl+S] (иногда окно сохранить как появляется не сразу, так как видео качается — нужно подождать)
  1. Просматриваем немного видео, которое нужно скачать (не обязательно полностью)
  2. Переходим на страницу chrome:cache
  3. Нажимаем F3 или Ctrl+А — появится маленькое окно поиска по странице
  4. Вводим в это окошко одно название расширения видео форматов Например: flv или mp4 — это подходит для большинства сайтов. Видео YouTube можно искать по videoplayback
  5. Если запустить видео и сразу открыть страницу chrome:cache (или обновить уже открытую), то долго ссылку искать не придется — она будет на самом верху
  6. Переходим по этой ссылке
  7. В самом верху копируем эту же самую ссылку и вставляем в новую вкладку.
    Примечание: если скачивание не началось автоматически (в большинстве случаев), а видео начало воспроизводиться в новом окне, нажимаем на гаечный ключик, затем на Сохранить страницу как. или используем сочетание клавиш [Ctrl+S] (иногда окно сохранить как появляется не сразу, так как видео качается — нужно подождать)

Сообщение отредактировал svm — 03.01.13, 22:11

Как ими пользоваться читаем здесь

Некоторые параметры между собой несовместимы и могут вызывать сбои в работе браузера

Сообщение отредактировал svm — 18.01.13, 14:02

Портативная версия Google Chrome

  1. Качаем Chrome_Porter.zip ( 1.02 МБ )
    И распаковываем
    , устанавливаем и настраиваем Chrome (если это еще не сделано).
  2. Если вы уже пользовались Chrome, то перед созданием portable версии его надо почистить. Это сэкономит место на диске и уменьшит размер профиля (особенно если вы его будете шифровать, об этом ниже).
    Запускаем Chrome, жмем Ctrl+Shift+Del, появляется окно, выбираем все кроме паролей и данных форм, период ставим на "Все" и жмем очистить.
  3. Запускаем Porter.exe (из архива "Chrome_Porter.zip") и отвечаем на вопросы тыканьем мышкой по нужным кнопкам.
  4. Ждем сообщения об удачном создании портабл версии.

Сообщение отредактировал svm — 16.02.13, 14:12

  1. Находим на рабочем столе, панели быстрого запуска или супербаре (или еще где-нибудь) ярлык, которым Вы запускаете Google Chrome и другие хромоподобные браузеры.
  2. Кликаем по нему правой кнопкой мыши и выбираем в меню Свойства
  3. В появившемся окошке переходим на вкладку Ярлык
  4. Находим строку Объект. В ней прописан путь к приложению, она оканчивается на "\chrome.exe" (иногда кавычки есть, иногда нет — это неважно).
  5. Переходим в самый конец строки (после буквы "e" или закрывающей кавычки). ! Делаем один пробел. После пробела записываем нужный нам параметр.
  6. Нажимаем ОК.
  7. Запускаем браузер!

Прикрепленное изображение

Помните: Некоторые параметры между собой несовместимы и могут вызывать сбои в работе браузера
Если параметры не влазят в поле «Объект», то используем этот способ.
Все ключи запуска можно найти здесь.

Префикс должен состоять из одного или двух дефисов, а не длинного тире, иначе ничего не выйдет.
Правильно: —disable-extensions, -disable-extensions
Неправильно: ——disable-extensions, —disable-extensions

Сообщение отредактировал svm — 13.02.13, 13:18

    — веб-браузер с открытым исходным кодом, разработанный компанией Google.
    Все Chrome-браузеры построены на базе этого открытого (open-source) браузера Chromium. Материал из Википедии

Работа с расширениями Google Chrome

Не скрою, Google Chrome мой любимый браузер. Мне нравится его надёжность и скорость, он не падает (очень часто) и хорошо смотрится. Есть у него и другие достоинства. Факт, что расширения для него можно построить только на HTML, CSS и JavaScript. Я всегда поддерживаю продукты, которые открыты для сообщества и Chrome является одним из них. Если вам нужно то, чего ещё нет, вы можете разработать это самостоятельно.

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

Зачем писать своё собственное расширение

Я призываю всех использовать лучшие инструменты для ускорения рабочего процесса. Программное обеспечение должно нам помогать, мы не должны с ним бороться. Разработка расширений/плагинов для вашего редактора или браузера помогает не только вам, но и другим программистам, которые рано или поздно окажутся в той же ситуации. Любое упущение можно восполнить самостоятельно, а с Chrome это будет очень просто. Моделирование среды вокруг ваших потребностей является ключом к высокопроизводительной работе.

Разработка и тестирование ваших расширений

К счастью, есть способ протестировать расширение, не загружая его в интернет-магазин Chrome. В адресной строке вашего браузера введите:

Убедитесь, что вы выбрали Developer mode и нажмите кнопку Load unpacked extension. И выберите папку с жёсткого диска, которая содержит файлы расширений.

extensionspanelextensionspanelextensionspanel

Архитектура

Вот диаграмма архитектуры расширения Chrome:

architecturearchitecturearchitecture

Теперь давайте рассмотрим каждый элемент архитектуры.

Декларация (Manifest)

Точкой входа расширения является файл manifest.json. Он должен содержать действительный объект JSON. Например:

Его свойствами будут name , version и manifest_version . version может быть от одного до четырёх целых чисел, разделённых точками. Она используется системой автообновления Google. Так он узнаёт, когда обновлять ваше расширение. Значение manifest_version должно быть целым числом 2 .

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

Background Pages (фоновые страницы)

У каждого расширения есть невидимая справочная страница, которая запускается браузером. Существует два типа: постоянные фоновые страницы и страницы событий. Первые активны постоянно. Вторые только по необходимости. Google поощряет разработчиков использовать страницы событий, поскольку это экономит память и улучшает общую производительность браузера. Тем не менее, надо знать, что это место, где вы должны поместить основной алгоритм и инициализацию. Обычно background page/script играет роль моста между другими частями расширения.

Вот как вы должны описать это в manifest:

Как вы могли догадаться, если persistent свойство является false , вы используете event pages. В противном случае вы работаете с постоянной фоновой страницей.

Content Script (скрипт контента)

Если требуется доступ к DOM текущей страницы, вам нужно использовать content script. Код запускается в контексте текущей веб-страницы, что означает, что он будет выполнен при каждом обновлении. Для добавления скрипта используйте следующий синтаксис.

Имейте в виду, что значение matches определяет, для каких страниц будет использован ваш скрипт. Подробней об этом matches patterns here.

User Interface (интерфейс пользователя)

Есть несколько путей построения UI вашего расширения. Вот четыре самых известных.

Browser Action

Для создания плагинов большинство разработчиков пользуется browser_action . После его установки значок, обозначающий расширение, будет помещён в правую часть адресной строки. Щёлкнув по значку пользователи могут открыть всплывающее окно, которое на самом деле является содержимым HTML-контента.

browseractionbrowseractionbrowseraction

Данные файла manifest должны содержать следующее:

default_title содержит подсказку, которая отображается, когда пользователь указывает на значок. default_popup — это фактически файл HTML, который загружается внутри всплывающего окна. Существует также значок, который вы можете разместить над своей иконой. Вы можете сделать это внутри background script. Например:

Это код для создания изображения выше.

Page Action

Свойство page_action похоже на browser action, но значок отображается внутри адресной строки:

pageactionpageactionpageaction

Интересно, что ваш значок сначала скрыт, поэтому вы должны решить, когда его показывать. Например, на изображении значок RSS будет отображаться только в том случае, если текущая страница содержит ссылку на RSS-канал. Если вам нужно постоянно видеть значок, используйте browser_action напрямую.

Чтобы добавить page action, пропишите следующий код в manifest:

В отличие от browser action, page action значка не имеет.

DeveloperTools

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

Не нужно помещать HTML-код внутри страницы, кроме ссылки в файле JavaScript, который будет создавать вкладку:

Затем добавьте следующий код внутри файла devtools.js :

Теперь этот код добавит новую вкладку с именем TheNameOfYourExtension , и как только вы нажмете на неё, браузер загрузит index.html внутри DeveloperTools.

Omnibox

omnibox — это ключевое слово, которое отображается внутри адресной строки Chrome. Например, при добавлении в manifest следующего свойства:

А затем добавьте следующий код в свой background script:

Вы должны иметь возможность ввести yeah в адресную строку. Затем вы увидите следующее:

omniboxomniboxomnibox

Нажатие на вкладку приведёт к появлению экрана:

omnibox2omnibox2omnibox2

Конечно, используя API chrome.omnibox , вы можете поймать вход пользователя и отреагировать на него.

Есть множество разных вещей, которые вы можете сделать в своём расширении. Например, получить доступ к закладкам или истории пользователя. Вы можете перемещать, создавать вкладки или даже изменять размер главного окна. Я настоятельно рекомендую изучить documentation, чтобы лучше понять, как выполнить эти задачи.

Вы должны знать, что не все API доступны в каждой части вашего расширения. Например, ваш content script не получит доступ к chrome.devtools.panels или скрипт на вкладке DeveloperTools не прочитает DOM страницы. Поэтому не удивляйтесь, если что-то не работает.

Messaging (обмен сообщениями)

Как я уже упоминал, у вас не будет доступа ко всем API, которые вы хотите использовать. В таком случае вы должны использовать передачу сообщений. Существует два типа сообщений — одноразовые запросы и долгоживущие соединения.

One-Time Requests (одноразовые запросы)

Этот тип связи на один раз. То есть, вы отправляете сообщение и ждёте ответа. Например, вы можете поместить следующий код в свой background script:

Затем используйте код ниже в вашем content script:

Так вы можете получить информацию о DOM текущей страницы и использовать её в своём фоновом скрипте, который обычно не имеет доступа к этим данным.

Long-Lived Connections (долгоживущие соединения)

Это тип сообщений, если вам нужен постоянный канал связи. Внутри content script пропишите следующий код:

А в background script используйте это:

Override Pages (переопределить страницы)

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

Возможными значениями для <page to override> будут bookmarks , history и newtab . Здорово, если у вас есть свежая страница new tab .

Пример расширения

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

Файл manifest

Начинаю с файла manifest:

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

Background Script

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

Следующий фрагмент представляет собой долговременную связь с вкладкой devtools (для этого не обязательно использовать long-lived connection, я сделал это только для образовательных целей). Используя прослушку, я могу получить ввод пользователя и отправить на content script, который имеет доступ к элементам DOM. Ключевым моментом здесь был выбор вкладки, которой я хотел управлять, а затем отправить ей сообщение. Наконец, я поместил бейдж на значок расширения.

Browser Action

Займёмся нашим popup.html файлом:

Затем создадим файл popup.js :

Окно содержит кнопку и как только пользователь нажимает на неё, уходит сообщение в background script.

DeveloperTools

Для DeveloperTools мы делаем почти то же самое, что и во всплывающем окне, единственное отличие в том, что используется долговременное соединение.

Content Script

Скрипт содержимого прослушивает сообщение, выбирает все div на текущей странице и меняет цвет фона. Обратите внимание на объект, к которому я прикреплял listener. В content script это chrome.extension.onMessage .

Настройка страницы New Tab

Последнее, что делает это расширение, настройка страницы new tab . Мы можем сделать это просто, указав свойство newtab в файле newtab/newtab.html :

Имейте в виду, это не будет репликой new tab по умолчанию. Идея этой функции заключается в добавлении совершенно другой функциональности. Вот, что сказано в Google:

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

Debugging (отладка)

При написании расширения для Google Chrome вы, вероятно, столкнётесь с некоторыми проблемами. Хорошо, что вы можете использовать консоль для вывода переменных, чтобы помочь в её отладке. Добавляйте console.log в ваши background или content scripts. Однако это не будет работать в скриптах, которые запускаются в контексте инструментов разработчика, используйте метод alert , который работает везде.

Заключение

На мой взгляд, Chrome — один из лучших браузеров. Разработчики в Google облегчают нам создание расширений, предоставляя возможность делать их в HTML, CSS и JavaScript.

Да, не без сложностей, но, как правило, мы можем создавать ценные плагины. Имейте в виду, что эта статья не охватывает всё, что связано с разработкой расширений Chrome. Существуют и другие полезные функции, такие как context menus, options pages и notifications. За более детальной информацией обращайтесь в documentation.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector