Модификация расширения Chrome.

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

Расширения Chrome — это небольшие приложения, расширяющие возможности браузера. Они написаны на HTML, CSS и JavaScript, что позволяет разрабатывать их самостоятельно.  А также дорабатывать существующие, добавляя новые функции, когда вам хочется изменить некоторые параметры расширения, чтобы оно идеально соответствовало вашим потребностям. Сегодня мы поделимся с вами нашим опытом изменения расширений Chrome.

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

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

Переход к локальному хранению данных

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

В оригинальном расширении реализовано сохранение данных в локальном хранилище Chrome Storage. Данные хранятся локально и удаляются при удалении расширения. Лимит хранения составляет 10 МБ (5 МБ в Chrome версии 113 и ранее), но его можно увеличить, запросив разрешение «unlimitedStorage». Мы рекомендуем использовать storage.local для хранения больших объемов данных.

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

Для реализации локального сохранения данных нам было необходимо:

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

Функция экспорта и импорта настроек реализована через json-файлы. Пользователь может экспортировать текущие настройки в файл, сохранить его на компьютере, а затем импортировать на другом устройстве. Данные сохраняются в виде json-объектов с различными свойствами. Например, название папки для загрузки файла, вид сортировки, список папок с сохраненными ссылками. Если файл настроек не содержит новых, необязательных, параметров, таких как folderName, resolution или timeout, будут применены значения по умолчанию.

При загрузке файла расширение также проверяет наличие обязательных свойств, таких как sessions. Sessions — это список папок с сохраненными ссылками и их характеристиками типа url, иконка, название. Если свойство отсутствует, расширение уведомляет пользователя об ошибке. Например, если вы загрузите неподходящий файл, система выдаст сообщение: «В этом файле нет настроек, попробуйте снова.»

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

Автоматическое обновление

Мы расширили возможности приложения, добавив функцию автоматического обновления, которая позволяет пользователям автоматически сохранять настройки на сервере по таймауту. Теперь настройки автоматически сохраняются на сервере через каждые 10 минут или другой заданный тайм-аут. Пользователь также может вручную сохранять настройки на сервер, нажав кнопку «Save Settings».

Функция скриншотов

Мы также добавили функцию скриншотов, которая позволяет делать снимки экрана для каждой вкладки. Это особенно полезно, если сайт, к которому ведет ссылка, больше не доступен.

А также скриншоты помогают визуально идентифицировать содержимое ссылки.

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

Исправление ошибок

Как мы писали ранее, при тестировании существующего приложения мы столкнулись с несколькими багами при изменениях: если добавить или удалить вкладку в сессии (в папке), при их последующем открытии не отражался корректных список вкладок. Например, если вы удаляли одну из четырех вкладок и сохраняли изменения, при открытии сессии снова открывались все четыре оригинальные вкладки, без учета удаления. Это касалось как удаления и добавления вкладок, так и переименования. Мы исправили этот баг, и теперь все изменения сохраняются корректно.

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

ь к выбору шрифтов при разработке сайта или приложения.