Как создать расширение Chrome за 10 минут?

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

Что мы собираемся построить?

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

Не знаю, как вы, но чаще всего мои пальцы быстрее моего мозга. Итак, чтобы предотвратить потенциальные ошибки, мы собираемся создать «молли-защиту» для ChatGPT.

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

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

Чтобы следовать этому руководству, вам понадобится учетная запись ChatGPT

Что такое расширение Google Chrome?

Before we get started, let’s clarify what a Chrome extension is. A Chrome extension is a small piece of software designed to enhance or modify the Chrome browsing experience. Extensions are developed using standard web technologies — HTML, JavaScript, and CSS — and they can range from simple tools, like color pickers, to more intricate ones, like password managers. Many of these extensions are available for download on the Chrome Web Store.

Note: for those keen on a deeper understanding of Chrome extensions, Google’s official documentation is an invaluable resource.

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

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

Шаг 1. Создайте файлы расширения

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

Вот разбивка:

• Папка: chatgpt-molly-guard. Это корневой каталог нашего расширения. Все наши файлы будут находиться в этой папке.
• Файл: manifest.json. Сердце и душа нашего расширения. Этот файл содержит метаданные о расширении, такие как его имя, версия и необходимые разрешения. Самое главное, он определяет, какие сценарии запускать и на каких веб-сайтах.
• Файл: contentScript.js. Как следует из названия, этот файл JavaScript содержит сценарий содержимого. Этот сценарий имеет прямой доступ к содержимому веб-страницы, что позволяет нам сканировать конфиденциальные слова и изменять страницу по мере необходимости.
• Файл: wordsList.js. Файл JavaScript, предназначенный для хранения списка конфиденциальных слов или фраз, указанных пользователем. Мы выделили это, чтобы пользователям было проще настраивать свой список, не углубляясь в основные функции contentScript.js.
• Файл: styles.css. Таблица стилей, которая придаст изюминку нашему расширению. Хотя нашей основной целью является функциональность, нет ничего плохого в том, чтобы наши предупреждения и подсказки выглядели хорошо!

Для начала:

1. Создайте на своем компьютере новую папку с именем chatgpt-molly-guard.
2. Внутри этой папки создайте четыре файла, перечисленные выше.
3. Имея файлы на месте, мы готовы приступить к заполнению деталей.

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

Шаг 2. Создайте файл манифеста

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

Вот наша структура манифеста. Скопируйте этот код в manifest.json:

{
  "manifest_version": 3,
  "name": "ChatGPT Molly-guard",
  "version": "1.0",
  "description": "Prevents submission if specific words are typed into chat window",
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "css": ["styles.css"],
      "js": ["wordsList.js", "contentScript.js"]
    }
  ]
}

Файл манифеста имеет три обязательных поля, а именно: manifest_version, nameи version. Все остальное не является обязательным.

Ключевые элементы манифеста

• manifest_version: целое число, определяющее версию формата файла манифеста. Мы используем Manifest V3, последнюю доступную версию. Имейте в виду, что Google активно отказывается от расширений Manifest V2 в 2023 году.
• name: короткая текстовая строка (максимум 45 символов), идентифицирующая расширение.
• version: от одного до четырех целых чисел, разделенных точками, определяющих версию расширения.
• description: обычная текстовая строка (без HTML, максимум 132 символа), описывающая расширение.
• content_scripts: этот ключ определяет статически загружаемые файлы JavaScript или CSS, которые будут использоваться каждый раз при открытии страницы, соответствующей шаблону URL-адреса (указанному ключом matches). Здесь мы говорим, что наш скрипт должен запускаться по любому URL-адресу, начинающемуся с https://chat.openai.com/.

Из вышеуказанных полей Google будет использовать name, versionи descriptionпри отображении вашего расширения на странице управления расширениями Chrome () и в Интернет-магазине Chrome.

Хотя наш манифест оптимизирован для наших нужд, многие другие поля могут добавить глубины и функциональности вашим расширениям. Такие поля action, как default_locale, icons, и т. д. предлагают параметры настройки, управление пользовательским интерфейсом и поддержку интернационализации.

Подробный обзор содержимого файла manifest.jsonможно найти в официальной документации Google.

Шаг 3. Создайте сценарий контента

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

Это наш контент-скрипт. Скопируйте следующий код в contentScript.jsфайл:

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
};

function containsForbiddenWords(value) {
  return forbiddenWords.some(word => value.toLowerCase().includes(word.toLowerCase()));
}

function updateUI(target) {
  const containsForbiddenWord = containsForbiddenWords(target.value);
  const sendButton = target.nextElementSibling;
  const parentDiv = target.parentElement;

  if (containsForbiddenWord) {
    sendButton.disabled = true;
    parentDiv.classList.add('forbidden-div');
  } else {
    sendButton.disabled = false;
    parentDiv.classList.remove('forbidden-div');
  }
}

document.body.addEventListener('keyup', debounce((event) => {
  if (event.target.id === 'prompt-textarea') updateUI(event.target);
}, 300));

document.addEventListener('keydown', (e) => {
  if (e.target.id === 'prompt-textarea' && e.key === 'Enter') {
    if (containsForbiddenWords(e.target.value)) {
      e.stopPropagation();
      e.preventDefault();
    }
  }
}, true);

Давайте разберем это, шаг за шагом.

В верхней части файла мы объявляем debounceфункцию. Мы будем использовать это, чтобы гарантировать, что мы не проверяем запрещенные слова каждый раз, когда пользователь нажимает клавишу. Это будет много проверок! Вместо этого мы подождем, пока пользователь перестанет печатать, прежде чем что-либо делать. Я взял этот фрагмент с сайта Джоша Комо, так что вы можете просмотреть его пост, чтобы получить объяснение того, как это работает.

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

Функция updateUIопределяет, присутствуют ли в окне чата запрещенные слова. Если да, он отключает кнопку отправки и добавляет класс CSS ( forbidden-div) в родительский элемент div окна чата. Мы воспользуемся этим на следующем шаге, чтобы предоставить пользователю визуальную подсказку.

Наконец, скрипт регистрирует два прослушивателя событий:

• Первый настроен на срабатывание по keyupсобытию. Он проверяет, является ли измененный элемент нашей целью (окном чата), а затем вызывает функцию updateUI. Благодаря нашей debounceфункции это не будет работать постоянно, а только после небольшой паузы при наборе текста.
• Второй прослушиватель событий прослушивает событие keydownна нашей цели. В частности, он отслеживает нажатие Enterклавиши, которая, если нажать ее, когда в текстовой области находится запрещенное слово, предотвратит действие браузера по умолчанию (в данном случае отправку формы).

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

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

Шаг 4: Добавляем немного стиля

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

Вот правило, которое мы используем. Добавьте его в styles.cssфайл:

.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}

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

Флаг !importantтакже заслуживает внимания. При работе с веб-страницами, которыми вы не владеете (как в данном случае с ChatGPT), существующие стили могут быть очень специфичными. Чтобы гарантировать, что наши стили имеют приоритет и применяются правильно, этот !importantфлаг переопределяет любые потенциальные конфликты из-за особенностей существующих стилей.

Шаг 5. Проверьте расширение

Остался последний шаг: заполнение списка запрещенных слов, за которыми должно следить наше расширение. Мы можем добавить их в forbiddenWords.js:

const forbiddenWords = [
  "my-company.com",
  "SitePoint",
  "Jim",
];

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

1. Откройте Chrome и перейдите кв адресной строке.
2. Включите переключатель режима разработчика, расположенный в правом верхнем углу.
3. Нажмите кнопку «Загрузить распакованное», которая теперь будет видна.
4. Перейдите и выберите каталог вашего расширения ( chatgpt-molly-guardв нашем случае) и нажмите «Выбрать». Наше расширение теперь должно появиться в списке установленных расширений.

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

Если все прошло по плану, вы должны увидеть что-то вроде изображения ниже.

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

Продвигаясь дальше

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

1. Пользовательский интерфейс для редактирования списка слов.

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

2. Обработка событий вставки мыши

Хотя наше расширение обнаруживает нажатия клавиш, пользователи могут обойти это, вставив конфиденциальную информацию с помощью контекстного меню мыши. Чтобы закрыть эту лазейку, мы могли бы добавить прослушиватель событий для этого pasteсобытия (или объединить оба для прослушивания input). Это гарантирует, что независимо от того, вводится или вставляется информация, фильтр остается надежным.

3. Контекстное переопределение

Блокировка определенных терминов может быть слишком общей. Например, я могу заблокировать упоминание «Джим» (мое имя), но у меня нет проблем со ссылкой на «Джим Кэри». Чтобы решить эту проблему, рассмотрите возможность введения функции, которая будет отключать molly-guard до тех пор, пока не произойдет следующее событие отправки.

Заключение

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

Теперь, когда вы увидели, как это делается, я советую вам усовершенствовать, улучшить и адаптировать расширение в соответствии с вашими потребностями.