Як правильно впровадити 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>
<h2>Робота з DOM</h2>
<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>
<h2>Спілкування з background service worker</h2>
<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>
<h2>Як уникнути конфліктів стилів при впровадженні content script?</h2>
<p>Два підходи: Shadow DOM для повної ізоляції інтерфейсу розширення або CSS з високою специфічністю та унікальними префіксами класів (наприклад, <code>ext-</code>). Якщо сторінка використовує строгу CSP, додавайте стилі через <code>chrome.scripting.insertCSS</code> з service worker.</p>
<h2>Передача даних зі сторінки в content script</h2>
<p>Оскільки JS-контексти ізольовані, використовуйте <code>window.postMessage</code> зі скрипта сторінки (або MAIN world) і ловіть повідомлення в content script з перевіркою <code>event.source === window</code>.</p>
<h2>Що входить у роботу</h2>
<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>
<h2>Типові проблеми та їх вирішення</h2>
<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> — для глобального клієнтського стану (легковаговий, без boilerplate 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. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий 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/ru/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/ru/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/ru/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/ru/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/ru/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/ru/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/ru/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/ru/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/ru/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/ru"><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/ru/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/ru#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/ru/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>
