Использование Sveltekit для создания расширения Chrome V3

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

Использование Svelte для расширения Chrome было отличным выбором! В этом посте я поделюсь некоторыми советами о том, как начать создавать расширения Chrome с помощью SvelteKit. Хотя на первый взгляд шаги могут показаться простыми, я столкнулся с несколькими проблемами, которые мне пришлось устранить:

  1. Создание проекта Svelte с помощью SvelteKit
  2. Настройка репозитория для вывода расширения Chrome
  3. Тестирование расширения в Chrome

В целом, Svelte был отличным выбором для создания этого расширения Chrome.

Рекомендуется клонировать проект из репозитория GitHub, который можно протестировать прямо в Chrome.

Создание проекта Svelte с помощью SvelteKit

Самый простой способ создания приложения Svelte — использовать SvelteKit, выполнив команду npm create

npm create svelte@latest my-chrome-extension

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

Далее приступаем к установке всех необходимых зависимостей, необходимых для проекта, используя npm run dev для запуска сервера разработки, и мы можем просматривать страницу с localhost: 5173.

Настройка репозитория для вывода расширения Chrome

Нам нужно настроить проект для создания выходных файлов расширения Chrome.

Во-первых, нам нужно создать manifest.json в каталоге /static. Здесь мы будем использовать манифест V3:

{
  "name": "My Chrome Extension",
  "description": "A browser extension made with Svelte Kit",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Svelte Extension",
    "default_icon": "favicon.png",
    "default_popup": "index.html"
  }
}

Затем измените наш адаптер на @sveltejs/adapter-static для создания статических файлов:

npm i -D @sveltejs/adapter-static

Переделайте адаптер в svelte.config.js

Мы изменили appDir на “app”, так как _app по умолчанию, начинающееся с подчеркивания, не будет работать в расширении Chrome. Кроме того, мы добавили файл layout.js в src/routes folder, чтобы включить предварительный рендеринг.

// src/routes/+layout.js
export const prerender = true;

Нам нужно удалить встроенный сценарий из выходных HTML-файлов, так как расширение Chrome версии 3 не позволяет использовать встроенный сценарий. Для этого мы можем разработать скрипт Node.js removeInlineScript.cjs:

// removeInlineScript.cjs
const glob = require("tiny-glob");
const path = require('path');
const fs = require('fs');

function hash(value) {
  let hash = 5381;
  let i = value.length;
  if (typeof value === "string") {
    while (i) hash = (hash * 33) ^ value.charCodeAt(--i);
  } else {
    while (i) hash = (hash * 33) ^ value[--i];
  }
  return (hash >>> 0).toString(36);
}

async function removeInlineScript(directory) {
  console.log("Removing Inline Scripts");
  const scriptRegx = /<script>([\s\S]+)<\/script>/;
  const files = await glob("**/*.{html}", {
    cwd: directory,
    dot: true,
    aboslute: true,
    filesOnly: true,
  });
  files
    .map((f) => path.join(directory, f))
    .forEach((file) => {
      console.log(`edit file: ${file}`);
      const f = fs.readFileSync(file, { encoding: 'utf-8' });
      
      const script = f.match(scriptRegx)
      if (script && script[1]) {
        const inlineContent = script[1]
          .replace('__sveltekit', 'const __sveltekit')
          .replace('document.currentScript.parentElement', 'document.body.firstElementChild');
        const fn = `/script-${hash(inlineContent)}.js`;
        const newHtml = f.replace(scriptRegx, `<script type="module" src="${fn}"></script>`);
        fs.writeFileSync(file, newHtml);
        fs.writeFileSync(`${directory}${fn}`, inlineContent);
        console.log(`Inline script extracted and saved at: ${directory}${fn}`);
      }
    });
}

removeInlineScript(path.resolve(__dirname, 'build'));

После завершения сборки выполните этот скрипт. Мы можем изменить команду сборки в файле package.json.

{
  ...
  "scripts": {
    ...
    "build": "vite build && node removeInlineScript.cjs",
  }
  ...
}

Все готово, приступаем к тестированию в Chrome.

Тестирование расширения в Chrome

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

Затем загрузите браузер Chrome из нашей выходной папки (обычно это build). После завершения этого шага расширение будет отображаться на странице.

Потрясающий! Мы только что создали расширение для Chrome, как профессионалы, используя Svelte Kit и Manifest v3!

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



Извлечение данных в Chrome Extension V3
Этот подход можно использовать для получения любого хост-сервераjavascript.plainenglish.io



Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .