Создание расширений Chrome с помощью TypeScript

Изменить цвет фона страницы

В этой статье

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

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

Расширения — это небольшие программы, которые настраивают работу в Интернете. Они позволяют пользователям настраивать функциональность и поведение Chrome разными способами.

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

Некоторые примеры расширений Chrome:

Менеджеры паролей
Блокировщики рекламы
Создатели списка дел

и многое другое можно найти в Интернет-магазине Chrome.

Из чего состоят расширения?

Расширения основаны на таких веб-технологиях, как HTML, JavaScript и CSS. Они работают в отдельной изолированной среде выполнения и взаимодействуют с браузером Chrome. Расширения позволяют «расширить» браузер, используя API для изменения поведения браузера и доступа к веб-контенту.

Почему TypeScript?

Во-первых, TypeScript — это надмножество JavaScript, что означает, что он расширяет JavaScript. Следовательно, он решает некоторые проблемы, с которыми не может справиться JavaScript.

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

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

TypeScript достигает своих целей тремя способами:

Поддержка современных функций JavaScript
Расширенная система типов
Поддержка инструментов разработчика

С помощью TypeScript ваше приложение может внезапно стать типобезопасным, простым в разработке и отладке, объектно-ориентированным и хорошо структурированным.

Хватит болтать, давайте перейдем к коду

Предпосылки

Чтобы выполнить это руководство, вам необходимо установить Node и npm.

Примечание

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

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

Структура папок

1. Создайте проект

Создайте пустой каталог и инициализируйте проект через npm.

~$ mkdir medium-extension
~$ cd medium-extension
~$ npm init -y

Установите необходимые зависимости.

~$ npm install --save-dev webpack webpack-cli
~$ npm install --save-dev copy-webpack-plugin
~$ npm install --save-dev typescript ts-loader
~$ npm install --save-dev @types/chrome

Создайте папку tsconfig.json. Файл tsconfig.json указывает корневые файлы и параметры компилятора, необходимые для компиляции проекта. Не стесняйтесь углубляться в настройку проектов TypeScript здесь.

tsconfig.json

{
   "compilerOptions": {
      "strict": true,
      "module": "commonjs",
      "target": "es6",
      "esModuleInterop": true,
      "sourceMap": true,
      "rootDir": "src",
      "outDir": "dist/js",
      "noEmitOnError": true,
      "typeRoots": [ "node_modules/@types" ]
   }
}

Создайте каталоги с именами src и webpack и public внутри папки проекта.

Создайте файл webpack.config.js в папке webpack и файл background.ts в папке src.

webpack.config.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
   mode: "production",
   entry: {
      background: path.resolve(__dirname, "..", "src", "background.ts"),
   },
   output: {
      path: path.join(__dirname, "../dist"),
      filename: "[name].js",
   },
   resolve: {
      extensions: [".ts", ".js"],
   },
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
         },
      ],
   },
   plugins: [
      new CopyPlugin({
         patterns: [{from: ".", to: ".", context: "public"}]
      }),
   ],
};

Это заставит веб-пакет загрузить все .ts файлов через ts-loader и вывести папку dist, содержащую связанные .js файлы в нашем проекте.

Добавьте скрипт build в файл package.json.

пакет.json

{
  "name": "medium-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1"
  }
}

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

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

Создайте файл с именем manifest.json . Назначение и использование каждого поля в файле манифеста можно найти в официальном документе.

manifest.json

{
   "name": "Medium Extension",
   "description": "This extension is made for demonstration purposes",
   "version": "1.0",
   "manifest_version": 3,
   "permissions": [
      "activeTab",
      "scripting"
   ],
   "background": {
      "service_worker": "background.js"
   }
}

В этом файле манифеста:

name, description и version совпадают, как следует из названия.

manifest_version:определяет версию файла манифеста. Какая последняя и рекомендуемая версия на данный момент.

permissions:это обязательные разрешения, необходимые для основных функций вашего расширения.

service_worker:Расширения обычно регистрируют своих фоновых сервисных рабочих при первой инициализации. Эта конфигурация позволяет background.js работать в качестве сервисного работника. Service Worker — это скрипт, который ваш браузер запускает в фоновом режиме. Функциональность ваших расширений будет обрабатываться через зарегистрированного сервисного работника.

3. Реализовать сервис-воркера

Мы описали background.js в файле манифеста. Мы создадим файл с именем background.ts и безопасно напишем наш тип кода, передав связывание и преобразование ts -> js в файл webpack.

background.ts

let active = false;

function makeOrange(color: string): void {
    document.body.style.backgroundColor = color;
}

chrome.action.onClicked.addListener((tab) => {
    active = !active;
    const color = active ? 'orange' : 'white';
    chrome.scripting.executeScript({
        target: {tabId: tab.id ? tab.id : -1},
        func: makeOrange,
        args: [color]
    }).then();
});

В этом блоке кода с помощью chromeAPI мы прослушиваем событие click на кнопке действия расширения и меняем цвет фона текущей активной вкладки.