Привет, ребята! Итак, когда-то у меня была действительно крутая идея сделать уникальное расширение для Chrome… Но была одна маленькая проблема, я не знал, как сделать даже простое расширение. Поэтому я решил разработать приложение Notes, которое может хранить уникальные заметки для разных веб-страниц.
У меня было одно требование: всякий раз, когда я читаю исследовательскую работу, я хотел вести отдельные заметки для каждой из них. Я не хотел смешивать их вместе. Я знаю, я знаю… есть много существующих расширений, которые делают это, но моя главная проблема в том, что они слишком сложны! Я продолжаю играть со всеми вариантами, которые у них были. Поэтому я хотел, чтобы это было просто, а также по пути узнать о расширениях Chrome :).
Приступим к созданию расширения:
Перейти к коду прямо по адресу: https://github.com/jainilparikh/Notes-Chrome-plugin
Логика:
- Получить URL-адрес вкладок.
- Получить содержимое, которое пользователь вводит в текстовую область плагина.
- Создайте сопоставление 1:1 между URL-адресом и заметками. Затем сохраните его в постоянном хранилище.
Сначала немного основ. В любом расширении Chrome есть три важных файла:
- Manifest.json: этот файл управляет разрешениями, к которым может получить доступ ваше расширение, значком расширения, именем расширения, именами других файлов javascript, а также всплывающим html (в основном то, что вы увидите, когда пользователь нажмет на ваш плагин ).
- popup.js: этот файл управляет всеми действиями, которые пользователь выполняет во всплывающем окне (окно, которое видит пользователь, когда он щелкает значок расширения Chrome). События OnClick, пользовательские вводы могут обрабатываться отсюда. Вы не можете взаимодействовать с веб-страницей, которую просматривает пользователь, из этого файла.
- content.js: сценарий контента — это часть вашего расширения, которая запускается в контексте конкретной веб-страницы (в отличие от фоновых сценариев, которые являются частью расширения). Вы можете взаимодействовать с веб-страницей, которую просматривает пользователь, из этого файла, используя стандартные API DOM. Он не может доступ к любым другим API (из соображений безопасности!).
- background.js: этот скрипт не может получить доступ к всплывающему окну или веб-странице пользователя, но он может получить доступ к любому API.
Для связи между этими файлами мы используем систему обмена сообщениями. Обычно мы отправляем данные из content.js в background.js, вызываем оттуда соответствующий API и возвращаем результат в content.js. Все через систему обмена сообщениями.
Хорошо, давайте начнем:
- Сначала откройте VS Code (или любой редактор по вашему выбору)
- создайте новый файл и назовите его Manifest.json
Поле «имя» будет определять имя, которое видят пользователи. Поле «разрешение» гарантирует, что плагин Chrome запрашивает все необходимые разрешения у пользователя, прежде чем он загрузит его.
3. Создайте файл popup.html. Это вид, который вы видите, когда пользователь щелкает значок плагина в своем браузере.
4. Создайте файл popup.js. Этот файл управляет элементами popup.html. Помните, что вы можете получить доступ к некоторым API Chrome, но не можете получить доступ ни к каким внешним API. Для этого вам нужно будет отправить сообщение в background.js и вернуть оттуда результат.
Этот файл вызывает API chrome.tabs для получения URL-адреса текущей вкладки. Позже он извлекает заметки пользователей из popup.html и сохраняет их в хранилище Persistence. Постоянное хранилище удаляется только тогда, когда пользователь явно очищает его из своего браузера. Так что для ленивых пользователей это в основном остается навсегда :).
Chrome.tabs.query : извлекает URL-адрес элемента, находящегося в фокусе.
document.getElementById(‘’): это обратный вызов, который выполняется, когда пользователь нажимает кнопку сохранения. Он берет заметки из текстовой области и создает сопоставление 1:1 с URL-адресом, который мы нашли выше. Затем он сохраняет их в постоянном хранилище.
Большое спасибо за то, что были до конца!! Пожалуйста, поделитесь своим мнением о статье и плагинах, которые вы сделали.
