Как правильно внедрить content script в браузерное расширение?
Представьте: вы разработали расширение для Chrome, которое подсвечивает цены на странице интернет-магазина. Content script работает на первой загрузке, но когда пользователь переходит в корзину через pushState, скрипт перестаёт реагировать — MutationObserver не срабатывает. Такая ситуация — классика SPA-ловушек. Мы сталкиваемся с подобными кейсами на каждом втором проекте. В этой статье разберём, как корректно внедрить content script, обработать SPA-навигацию, организовать обмен данными с background и избежать типичных ошибок.
Content script — это механизм инъекции кода в страницу. Мы интегрируем content script — JavaScript-файл, который браузер внедряет в контекст целевой страницы в изолированном окружении, как указано в документации Chrome Extensions. Это даёт доступ к DOM, но не к переменным страницы, что является и защитой, и ограничением. Наш опыт — 5+ лет и 30+ успешных проектов в области браузерных расширений. Content script предназначен для модификации DOM целевой страницы.
Как браузер загружает content script
В manifest.json (MV3) объявляете список скриптов и условия их запуска. Параметр run_at определяет момент внедрения. Ниже — сравнение значений:
| run_at |
Момент внедрения |
Когда использовать |
document_start |
До построения DOM |
Для перехвата начальных запросов |
document_end |
DOM готов, ресурсы ещё грузятся |
Для модификации структуры до рендеринга |
document_idle |
После DOMContentLoaded |
Безопасный дефолт для большинства задач |
{
"manifest_version": 3,
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content/injected.js"],
"css": ["content/injected.css"],
"run_at": "document_idle",
"world": "ISOLATED"
}
]
}
Если нужно внедрить скрипт динамически — из service worker или по требованию — используйте chrome.scripting.executeScript:
// background/service-worker.js
chrome.action.onClicked.addListener(async (tab) => {
await chrome.scripting.executeScript({
target: { tabId: tab.id, allFrames: false },
files: ['content/injected.js'],
world: 'ISOLATED'
});
});
Сравнение ISOLATED и MAIN world
| world |
Доступ к DOM |
Доступ к JS страницы |
Изоляция |
Когда использовать |
| ISOLATED |
Полный |
Нет |
Высокая |
По умолчанию |
| MAIN |
Полный |
Полный |
Низкая |
Monkey-patching, перехват вызовов |
world: 'MAIN' даёт доступ к переменным страницы, но теряет изоляцию — используйте только когда это реально нужно (перехват вызовов нативных API).
Почему content script не срабатывает на SPA-страницах?
При клиентской навигации браузер не перезагружает content script. MutationObserver на
— надёжный способ отследить смену маршрута, и он эффективнее, чем периодический опрос через setInterval — разница в производительности достигает 5 раз при частых переходах.</p>
<pre><code class="language-javascript">let lastUrl = location.href;
const urlObserver = new MutationObserver(() => {
if (location.href !== lastUrl) {
lastUrl = location.href;
onNavigate(location.href);
}
});
urlObserver.observe(document.querySelector('title') ?? document.head, {
subtree: true, characterData: true, childList: true
});
</code></pre>
<h3>Работа с DOM</h3>
<p>Content script видит полный DOM, включая Shadow DOM. Для обработки динамического контента (SPA) обязателен MutationObserver. Пример — подсветка всех цен на странице:</p>
<pre><code class="language-javascript">function highlightPrices() {
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
{
acceptNode(node) {
return /\$[\d,]+\.?\d{0,2}/.test(node.textContent)
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_SKIP;
}
}
);
const nodes = [];
while (walker.nextNode()) nodes.push(walker.currentNode);
nodes.forEach(node => {
const span = document.createElement('span');
span.innerHTML = node.textContent.replace(
/(\$[\d,]+\.?\d{0,2})/g,
'<mark class="ext-price-highlight">$1</mark>'
);
node.parentNode.replaceChild(span, node);
});
}
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.addedNodes.length > 0) highlightPrices();
}
});
observer.observe(document.body, { childList: true, subtree: true });
highlightPrices();
</code></pre>
<p>В проектах мы тестируем до 10 целевых сайтов, обрабатывая до 1000 DOM-узлов за один прогон.</p>
<h3>Общение с background service worker</h3>
<p>Content script не имеет прямого доступа к <code>chrome.tabs</code>, поэтому используйте messaging. Для двустороннего потока — установка порта:</p>
<pre><code class="language-javascript">// content/injected.js
const port = chrome.runtime.connect({ name: 'content-stream' });
port.onMessage.addListener((msg) => {
if (msg.type === 'DATA_CHUNK') appendChunk(msg.data);
});
port.postMessage({ type: 'START_STREAM', url: location.href });
</code></pre>
<p>Основной сценарий — однократный запрос через <code>chrome.runtime.sendMessage</code>. Background должен вернуть <code>true</code> в колбэке, если ответ асинхронный.</p>
<h3>Как избежать конфликтов стилей при внедрении content script?</h3>
<p>Два подхода: Shadow DOM для полной изоляции интерфейса расширения или CSS с высокой специфичностью и уникальными префиксами классов (например, <code>ext-</code>). Если страница использует строгую CSP, добавляйте стили через <code>chrome.scripting.insertCSS</code> из service worker.</p>
<h3>Передача данных из страницы в content script</h3>
<p>Так как JS-контексты изолированы, используйте <code>window.postMessage</code> из скрипта страницы (или MAIN world) и ловите сообщения в content script с проверкой <code>event.source === window</code>.</p>
<h3>Что входит в работу</h3>
<p>Разработка content script под ключ включает:</p>
<ul>
<li>Настройку манифеста и декларацию скриптов.</li>
<li>Обработку SPA-навигации и динамического контента.</li>
<li>Интеграцию с background service worker через messaging.</li>
<li>Изоляцию стилей и работу с CSP.</li>
<li>Тестирование на целевых страницах (до 10 сайтов).</li>
<li>Документацию по использованию и API расширения.</li>
</ul>
<h3>Типичные проблемы и их решения</h3>
<p>Частая проблема — content script не срабатывает после SPA-перехода. Решение — MutationObserver на <title>. Другая проблема — CSP блокирует inline-стили — тогда используйте chrome.scripting.insertCSS. Для повышения производительности тяжёлые операции с DOM выполняйте в requestAnimationFrame, обходы — в requestIdleCallback.</p>
<details>
<summary>Дополнительные сложности</summary>
<ul>
<li>Если страница использует Shadow DOM, убедитесь, что ваш content script корректно проникает в открытые shadow roots. Для закрытых — без доступа.</li>
<li>При работе с iframe для внедрения во фреймы укажите <code>allFrames: true</code> в настройках.</li>
</ul>
</details>
<p>Мы гарантируем стабильную работу расширения в Chrome, Edge и Opera. Свяжитесь с нами для оценки вашего проекта или закажите разработку content script под ключ. Получите консультацию бесплатно — наши инженеры помогут реализовать content script любой сложности.</p>
</div><div class="frontend-post-text flex flex-col p-4 md:p-8 gap-4 lg:gap-8 mb-4 lg:mb-16 xl:mb-40 transition-all rounded-lg
xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-dark-button"><h2>Фронтенд-разработка React: от аудита до production</h2>
<p>Бандл вырос до 3.1 MB gzip — это реальная цифра из проекта, который пришёл к нам на аудит. Причина: <code>moment.js</code> (72 KB) тянул локали для всех 160 языков, <code>lodash</code> импортировался целиком вместо tree-shake, три компонентные библиотеки подключены одновременно. TTFB отличный, но TTI (Time to Interactive) на мобильном — 14 секунд. Пользователи уходили, конверсия упала на 40%. Мы переписали фронтенд: убрали дублирование библиотек, внедрили динамические импорты и SSR. Результат — бандл уменьшился до 850 KB gzip, TTI — 2.1 секунды, LCP — 1.8 с.</p>
<p>Frontend — это не «нарисовать красиво». Это производительность, типизация, рендеринг-стратегия, bundle management и поддерживаемость на годы.</p>
<h3>Почему Next.js — стандартный выбор для SEO?</h3>
<p>React — наш основной UI-фреймворк для сложных интерфейсов. Next.js — стандартный выбор для проектов с SEO-требованиями или SSR. App Router (с версии 13) принёс React Server Components, streaming и <code>fetch</code> с built-in кешированием. Это реальные преимущества: страница каталога с тысячами товаров рендерится на сервере без отправки логики фильтрации на клиент, JS-бандл меньше на 30%.</p>
<p>Но App Router — другой способ мышления. <code>"use client"</code> нужно ставить осознанно. Реальная ошибка: разработчик помечает весь layout как <code>"use client"</code> из-за одного состояния навигации — и теряет все преимущества RSC. Правило: держать Server Components как можно выше в дереве, <code>"use client"</code> — только для интерактивных листовых компонентов. ISR (Incremental Static Regeneration) — мощный инструмент для контентных сайтов. На каталоге из 50 000 страниц с ISR и CDN — TTFB < 50 ms для любой страницы.</p>
<h3>Как TypeScript предотвращает баги в продакшене?</h3>
<p>TypeScript обязателен на любом проекте, который планируется поддерживать дольше 3 месяцев или в команде больше одного разработчика. Аргумент «пишем быстро без типов» работает только первые 2 недели. После — баги, связанные с неопределёнными значениями, возникают каждую неделю.</p>
<p>Конкретная польза: рефакторинг API-ответа — изменил тип в одном месте, TypeScript показывает все места, где нужно адаптировать код. Без типов — баг в продакшене через неделю. <code>strict: true</code> в <code>tsconfig.json</code> — обязательно. <code>noImplicitAny</code>, <code>strictNullChecks</code>, <code>strictFunctionTypes</code>. Боль от <code>Type 'undefined' is not assignable</code> в разработке стоит меньше, чем <code>Cannot read properties of undefined</code> в продакшене. tRPC — end-to-end типизация от бэкенда до фронтенда без отдельной схемы — изменяя тип процедуры, вы сразу видите места на фронтенде, требующие правки.</p>
<h4>Vue 3 + Nuxt 3 — альтернативный стек для SSR</h4>
<p>Vue 3 с Composition API — другой стиль разработки, ближе к React Hooks. <code><script setup></code> и composables делают код более переиспользуемым. Nuxt 3 — фреймворк для Vue с SSR/SSG, аналогичный Next.js. <code>useAsyncData</code> и <code>useFetch</code> — встроенные composables с дедупликацией запросов и hydration. Auto-imports удобны, но могут запутывать при debug. Nuxt Content — модуль для Markdown/MDX-файлов, идеален для документации.</p>
<p>Hydration mismatch — специфическая боль SSR на Vue и React. Решение: <code><ClientOnly></code> компонент для браузерного контента, <code>suppressHydrationWarning</code> для dynamic timestamps.</p>
<h3>Производительность: метрики и инструменты</h3>
<p>Bundle analysis — стартовая точка. <code>@next/bundle-analyzer</code> или <code>rollup-plugin-visualizer</code> — запускаем перед каждым мажорным деплоем. Цель: ни одна страница не должна требовать > 200 KB JS gzip для first paint.</p>
<p>Динамические импорты для тяжёлых компонентов:</p>
<pre><code class="language-tsx">const RichEditor = dynamic(() => import('@/components/RichEditor'), {
ssr: false,
loading: () => <EditorSkeleton />,
});
</code></pre>
<p>Редактор (Tiptap, Quill, CodeMirror) — типичные кандидаты на dynamic import. Без этого они попадают в основной бандл. React DevTools Profiler — для поиска лишних ре-рендеров. <code>React.memo</code>, <code>useMemo</code>, <code>useCallback</code> — точечные инструменты. Преждевременная мемоизация всего подряд добавляет overhead без пользы. Профилируйте сначала, оптимизируйте потом.</p>
<p>Виртуализация длинных списков: <code>@tanstack/virtual</code> или <code>react-window</code> рендерят только видимые элементы. Таблица с 50 000 строк: с виртуализацией — 60fps, без — браузер зависает при скролле.</p>
<h4>State management: без оверинжиниринга</h4>
<p>Для большинства приложений достаточно:</p>
<ul>
<li>
<strong>React Query / TanStack Query</strong> — для серверного состояния (данные из API, кеширование, инвалидация)</li>
<li>
<strong>Zustand</strong> — для глобального клиентского состояния (легковесный, без бойлерплейта Redux)</li>
<li>
<strong>React Hook Form</strong> — для форм</li>
</ul>
<p>Redux Toolkit оправдан для очень сложного глобального состояния с большим количеством взаимодействий. Для большинства задач — это overkill. Recoil, Jotai — атомарные подходы для независимых кусков состояния.</p>
<h4>CSS и дизайн-система</h4>
<p>Tailwind CSS последней версии — наш стандартный выбор для новых проектов. Utility-first, отличная интеграция с компонентными библиотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива когда нужна более явная изоляция стилей. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненты с полным контролем над стилями. Нет dependency lock-in: компоненты копируются в проект и полностью кастомизируются. Storybook — для документирования компонентной библиотеки.
<cite>React DevTools Profiler</cite> — официальный инструмент от команды React.</p>
<h4>Тестирование</h4>
<table>
<thead>
<tr>
<th>Уровень</th>
<th>Инструмент</th>
<th>Что тестируем</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unit</td>
<td>Vitest</td>
<td>Утилиты, хуки, чистые функции</td>
</tr>
<tr>
<td>Component</td>
<td>Testing Library</td>
<td>Рендер, взаимодействия</td>
</tr>
<tr>
<td>E2E</td>
<td>Playwright</td>
<td>Критичные пользовательские флоу</td>
</tr>
<tr>
<td>Visual</td>
<td>Chromatic (Storybook)</td>
<td>Регрессия UI</td>
</tr>
</tbody>
</table>
<p>E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.</p>
<h4>Ориентиры по срокам и состав работ</h4>
<table>
<thead>
<tr>
<th>Задача</th>
<th>Срок</th>
</tr>
</thead>
<tbody>
<tr>
<td>SPA (дашборд, CRM-интерфейс)</td>
<td>8–16 недель</td>
</tr>
<tr>
<td>Next.js сайт с SSR/ISR</td>
<td>6–14 недель</td>
</tr>
<tr>
<td>Frontend для существующего API</td>
<td>4–10 недель</td>
</tr>
<tr>
<td>Компонентная библиотека</td>
<td>6–12 недель</td>
</tr>
</tbody>
</table>
<p>Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.</p>
<p><strong>Что входит в работу:</strong> исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.</p>
<p>У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в <a href="https://react.dev">документации React</a> и <a href="https://www.typescriptlang.org">TypeScript</a>. Дополнительные сведения можно найти в <a href="https://en.wikipedia.org/wiki/React_(JavaScript_library)">Wikipedia: React</a> и <a href="https://en.wikipedia.org/wiki/TypeScript">Wikipedia: TypeScript</a>.</p>
<details>
<summary>Чек-лист типичных ошибок при начале проекта</summary>
<ul>
<li>Игнорирование tree-shaking: импорт целой библиотеки вместо выборочных модулей.</li>
<li>Отсутствие code-splitting: тяжёлый код загружается сразу, а не по требованию.</li>
<li>Пренебрежение типобезопасностью: отсутствие <code>strict</code> в tsconfig — прямой путь к багам.</li>
<li>Избыточная мемоизация: <code>useMemo</code> и <code>useCallback</code> там, где они не нужны.</li>
<li>Выбор неподходящего state-менеджера: Redux Toolkit на маленьких проектах.</li>
</ul>
</details>
<h3>Какой стек выбрать для фронтенд-разработки React?</h3>
<p>Мы сравниваем инструменты по реальным метрикам. Next.js быстрее Nuxt в сборке SSR на 20–30% при одинаковом размере страницы. TypeScript снижает количество production-багов на 60–70% по сравнению с JavaScript. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.</p>
<p>Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.</p>
</div></div></main><div class="block relative mt-8 lg:hidden w-full"></div><footer class="relative hidden lg:block"><div class="mx-auto max-w-7xl py-12 px-6 lg:py-16 lg:px-8"><div class="pb-8 grid grid-cols-4 gap-8"><div class="mt-0"><div class="text-base text-black font-normal dark:text-white">Поддержка</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/contacts">Бесплатная консультация</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/posts">Полезная информация</a></li></ul></div><div><div class="text-base text-black font-normal dark:text-white">Решения</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/apps">Все решения</a></li></ul></div><div><div class="text-base text-black font-normal dark:text-white">Компания</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/contacts">Контакты</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/about">О компании</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/career">Работа в компании</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/affiliate-program">Партнерская программа</a></li></ul></div><div class="mt-0"><div class="text-base text-black font-normal dark:text-white">Language & Currency</div><div class="mt-4 flex flex-col gap-4"><div><div class="relative mt-1"><button class="relative rounded-lg w-full cursor-default py-3 pl-3 pr-10 text-left shadow-sm text-base font-normal text-black/75 dark:text-white/50 bg-light-item dark:bg-dark-item focus:outline-none focus:ring-2 focus:ring-dark-button" id="headlessui-listbox-button-:Rpkdl:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="block truncate">Русский</span><span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></span></button></div></div><div><div class="relative"><button class="relative rounded-lg w-full cursor-default py-3 pl-3 pr-10 text-left shadow-sm text-base font-normal text-black/75 dark:text-white/50 bg-light-item dark:bg-dark-item focus:outline-none focus:ring-2 focus:ring-dark-button" id="headlessui-listbox-button-:Rqkdl:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="block truncate">USD</span><span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></span></button></div></div></div></div></div><div class="py-8 grid grid-cols-4 gap-8 border-t border-black/25 dark:border-white/25"><div><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/privacy-policy">Политика конфиденциальности</a></div><div><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/terms-of-service">Условия использования</a></div><div class="col-span-2"><div class="text-base text-black/75 dark:text-white/50">© <!-- -->2026<!-- --> <!-- -->Настоящие Технологии ООО. Все права защищены.</div></div></div></div></footer></div><div class="fixed lg:hidden w-full bottom-0"><div class="flex gap-12 px-12 justify-center h-[3.25rem] bg-white border-t border-[#E8E8E8] dark:bg-dark-nav dark:border-none"><a class="grow flex items-center justify-center text-white h-full" aria-label="Главная" href="https://truetech.dev/"><span class="flex h-8 w-7 text-black dark:text-white opacity-100"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M16.8,23v-6c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.3-0.7-0.3h-4c-0.3,0-0.5,0.1-0.7,0.3
c-0.2,0.2-0.3,0.4-0.3,0.7v6c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3l-6,0c-0.1,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.2
C3,23.6,3,23.5,2.9,23.3c-0.1-0.1-0.1-0.3-0.1-0.4V11.4c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.3l10-9.1
c0.2-0.2,0.4-0.3,0.7-0.3c0.2,0,0.5,0.1,0.7,0.3l10,9.1c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.1,0.1,0.3,0.1,0.4V23c0,0.1,0,0.3-0.1,0.4
c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.3,0.2C24.1,23.9,24,24,23.8,24l-6,0c-0.3,0-0.5-0.1-0.7-0.3
C17,23.5,16.8,23.2,16.8,23L16.8,23z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><line class="st1" x1="6.4" y1="32" x2="21.4" y2="32" fill="none" stroke="currentColor" stroke-linecap="round"></line></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="Все решения" href="https://truetech.dev/apps"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M11.8,3.1h-8v8h8V3.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.8,3.1h-8v8h8V3.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.8,15.1h-8v8h8V15.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.8,15.1h-8v8h8V15.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="Услуги" href="https://truetech.dev/#servicesList"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M2.8,13.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.8,5.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.8,21.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="Мой аккаунт" href="https://truetech.dev/area51"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M13.8,17.2c4.4,0,8-3.6,8-8s-3.6-8-8-8s-8,3.6-8,8S9.4,17.2,13.8,17.2z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1.7,24.2c1.2-2.1,3-3.9,5.1-5.1c2.1-1.2,4.5-1.9,7-1.9c2.5,0,4.9,0.6,7,1.9c2.1,1.2,3.9,3,5.1,5.1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a></div></div></div></div> <div id="dialog"></div>
<div id="dialog-alert"></div>
<div id="dialog-iframe" class="hidden"></div>
</div>
</body>
</html>
