Расширение Chrome за 20 минут

Эта статья является подробной текстовой версией видео, которое я недавно опубликовал:

• Расширение Chrome за 20 минут — YouTube

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

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

• node.js (14.x или более поздняя версия)
• typescript
• css
• vite
• monaco-editor
• types/chrome
• crxjs/vite-plugin

Создайте новый проект vite

Сначала создайте новый проект vite с помощью пакета create-vite npm.

npm init vite@2.9.0

npm init x (или npm create x как псевдоним) запускает npm exec create-x, поэтому в данном случае вы будете запускать npm exec create-vite. Более подробную информацию смотрите в npm help init.

Как вы могли заметить, я указал версию 2.9.0. Это потому, что текущая последняя версия vite 3.0.0 еще не работает с crxjs/vite-plugin, поэтому нам нужно выбрать более старую версию.

После выполнения команды вы готовы к сборке исходного кода HTML + CSS + JavaScript по умолчанию.

npm install
npm run dev

Эта команда будет постоянно компилировать исходные файлы и выходные файлы в каталог ./dist/, а затем запустит http://localhost:3000 в качестве HTTP-сервера предварительного просмотра.

Создание пустого расширения Chrome

Чтобы создать пустое расширение Chrome, необходимо написать manifest.json.

{
  "name": "newtab-editor",
  "description": "Editor in new tab",
  "manifest_version": 3,
  "version": "0.0.1"
}

Однако только размещение этого файла не заставит Vite включить manifest.json в цель сборки.

Чтобы добиться этого, необходимо также написать vite.config.ts.
@crxjs/vite-plugin делает всю эту кропотливую работу, поэтому все, что вам нужно сделать, это передать ему manifest.json.

import { crx } from "@crxjs/vite-plugin";
import manifest from "./src/manifest.json";

export default {
  plugins: [crx({ manifest })],
};

Чтобы импортировать crx, не забудьте установить его:

npm install --save-dev @crxjs/vite-plugin

После этих шагов вы можете собрать расширение.
Если вы оставили npm run dev включенным, у вас должно быть собранное расширение Chrome в каталоге ./dist/.

Установите расширение

Чтобы установить расширение из локальных файлов, выполните следующие действия:

1. откройте Google Chrome
2. перейдите на страницу расширений Chrome (chrome://extensions/)
3. включите «Режим разработчика»
4. нажмите «Загрузить распакованное расширение»
5. выберите каталог ./dist/

Переопределить новую вкладку

Чтобы переопределить страницу новой вкладки нашим расширением, добавьте свойство chrome_url_overrides в manifest.json.

"chrome_url_overrides": {
  "newtab": "index.html"
},

После перезагрузки расширения вы должны увидеть index.html в новой вкладке.

Добавьте monaco-редактор

На этот раз я буду использовать редактор под названием monaco-editor. Это редактор на основе Visual Studio Code, который позволяет достичь примерно той же функциональности в браузере.

Он прост в использовании, просто импортируйте и установите его на какой-нибудь HTML-элемент, и он работает.

npm install --save monaco-editor

// src/main.ts
import "./style.css";
import * as monaco from "monaco-editor";

const app = document.querySelector<HTMLDivElement>("#app")!;
monaco.editor.create(app, {
  fontSize: 18,
  language: "markdown",
  lineHeight: 1.6,
  minimap: { enabled: false },
  padding: { bottom: 16, top: 16 },
  theme: "vs-dark",
});

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

Сохранение содержимого с помощью API хранилища

Для сохранения содержимого редактора мы можем использовать API хранилища.

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

Сначала изменяется содержимое редактора, отправьте запрос фоновому процессу для сохранения содержимого.

// src/main.ts
editor.onDidChangeModelContent(() => {
  const content = editor.getValue();
  chrome.runtime.sendMessage({ type: "saveContent", content });
});

Во-вторых, при открытии новой вкладки восстановите сохраненное содержимое.

chrome.runtime.sendMessage({ type: "loadContent" }, ({ content }) => {
  editor.setValue(content);
});

Наконец, подготовьте процесс backgruond, принимающий запросы.

// src/background.ts
chrome.runtime.onMessage.addListener((request, _, sendResponse) => {
  switch (request.type) {
    case "loadContent":
      chrome.storage.sync.get("content", ({ content }) => {
        sendResponse({ content });
      });
      return true;
    case "saveContent":
      chrome.storage.sync.set({ content: request.content });
      break;
  }
  return;
});

Готово!

Подведение итогов

В этом руководстве я рассказал, как с нуля создать расширение Chrome, которое превращает новую вкладку в блокнот.

Готовая версия этого расширения Chrome доступна в Chrome Web Store.

• Editabro — Chrome Web Store

Конечно, исходный код также доступен на GitHub. Если вы заинтересовались, я рекомендую вам прочитать исходный код. Он включает такие приемы, как debounce для уменьшения объема взаимодействия с фоновыми процессами, удаление ненужных функций языка для уменьшения размера кода в связке и использование Worker для повышения производительности.

• https://github.com/r7kamura/editabro

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

• Создание расширения Vite-React Chrome за 90 секунд — DEV Community

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

• Расширение Chrome за 20 минут — YouTube

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

• https://www.youtube.com/c/r7kamura

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

Удачного кодирования!