Project structure:

extension_SSSSS/
├── css/
│   └── styles.css
├── icons/
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon32.png
│   └── icon48.png
├── images/
│   ├── icons/
│   │   ├── DarkVPN_icon_bars2.png
│   │   └── DarkVPN_icon_house3.png
│   └── DarkVPN_LOGO.png
├── js/
│   ├── background.js
│   ├── jquery-3.7.1.min.js
│   ├── menu.js
│   └── popup.js
├── GenerateProjectShort.py
├── ProjectOneFile.txt
├── manifest.json
└── popup.html


Project files:

manifest.json
```json
{
  "manifest_version": 2,
  "name": "DarkVPN",
  "version": "1.0",
  "description": "Fastest DarkVPN",
  "permissions": [
    "proxy",
    "storage",
    "webRequest",
    "webRequestBlocking",
    "tabs",
    "<all_urls>",

    "notifications",
    "activeTab",
    "http://*/*",
    "https://*/*"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "service_worker": "js/background.js"
  }
}
```


popup.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarkVPN</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
    <div class="dark-vpn-title">DarkVPN</div>
    <div id="userInfo">........</div>
    <div class="version-text">V-0.7</div>
    <div id="userKeySection" class="user-key-section">
        <div class="user-key-prompt">Введите ваш ключ пользователя:</div>
        <input type="text" id="userKeyInput" class="user-key-input" placeholder="Ваш ключ">
        <button id="saveUserKeyButton" class="save-user-key-button">Сохранить</button>
    </div>
    <div class="toggle-container">
        <button id="toggleButton">
            <img src="images/DarkVPN_LOGO.png" class="button-logo">
            <div class="b-title">Connect</div>
        </button>
    </div>
    <div class="menu-container">
        <div class="setting-bar" id="autoConnectSetting">
            <div class="setting-tile">Автоподключение</div>
            <div class="setting-switcher">
                <div class="switcher-ball"></div>
            </div>
        </div>
        <div class="setting-bar" id="adBlockSetting">
            <div class="setting-tile">Блокировка рекламы</div>
            <div class="setting-switcher">
                <div class="switcher-ball"></div>
            </div>
        </div>
        <div class="logout-section">
            <button id="logoutButton" class="logout-button">Выйти</button>
        </div>
    </div>
    <div class="info-container">
        <div class="buttons-row">
            <button class="control-btn" id="home-btn">
                <img src="images/icons/DarkVPN_icon_house3.png" class="control-btn-icon">
                <img src="images/icons/DarkVPN_icon_house3.png" class="control-btn-icon control-btn-glow">
            </button>
            <button class="control-btn" id="menu-btn">
                <img src="images/icons/DarkVPN_icon_bars2.png" class="control-btn-icon">
                <img src="images/icons/DarkVPN_icon_bars2.png" class="control-btn-icon control-btn-glow">
            </button>
        </div>
    </div>
</div>
<div class="gradient-point"></div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
```


css.styles.css
```css
:root {
    --violet-color: #6e41e1
}

body {
    width: 320px;
    height: 500px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #1e1e1f;
    border: none;
    color: #ffffff;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.dark-vpn-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 32px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 40px;
    color: #6a6a6a;
    padding: 1px 10px;
    /* background-color: #ffffff1f; */
    /* border-radius: 10px; */
    transition: opacity 0.2s;
}

.version-text {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'Roboto', sans-serif;
    color: rgb(255 255 255 / 15%);
    font-size: 10px;
}

.toggle-container {
    display: flex;
    justify-content: center;
    z-index: 2;
    height: 100%;
    align-items: center;
    transition: height 0.3s ease;
}

#toggleButton {
    display: flex;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    background-color: #333333;
    border: none;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#toggleButton::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%);
    transition: all 0.3s ease;
    transform: scale(1);
    opacity: 1;
}

#toggleButton.connected::before {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, rgb(77 46 205 / 20%) 50%, rgba(138, 43, 226, 0) 70%);
    animation: pulse 2s infinite;
}

#toggleButton:hover {
    transform: scale(1.05);
}

#toggleButton:active {
    transition: all 0.1s;
    transform: scale(0.95);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.button-logo {
    width: 50%;
    height: 50%;
    transition: opacity 0.3s ease;
}

.menu-container {
    display: flex;
    padding: 0 20px 0 20px;
    position: absolute;
    z-index: 5;
    height: 350px;
    /* width: calc(100% - 40px); */
    background-color: #212121;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.9);
    left: 50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.1s;
    flex-direction: column;
    align-items: center;
}

.info-container {
    display: flex;
    padding: 10px;
    z-index: 2;
    flex-direction: column;
    margin-bottom: 25px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-label {
    font-weight: 300;
}

.info-value {
    font-weight: 500;
}

.buttons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.control-btn {
    display: flex;
    height: 32px;
    width: 32px;
    background: none;
    border: none;
    outline: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.1s;
}

.control-btn .control-btn-icon {
    position: absolute;
    width: 100%;
    height: 100%;
}

.control-btn .control-btn-glow {
    opacity: 0;
    transition: opacity 0.2s;
    filter: blur(5px);
}

.control-btn:hover .control-btn-glow {
    opacity: 0.2;
}

.control-btn:hover {
    transform: scale(1.05);
}

.control-btn:active {
    transform: scale(0.98);
}


.hide-logo .button-logo {
    transition: opacity 0.1s ease;
    opacity: 0;
}


.shrink-button .toggle-container {
    height: 100px;
}

.shrink-button {
    #toggleButton {
        height: 35px;
        width: 130px;
        border-radius: 50px;
    }

    #toggleButton::before {
        opacity: 0;
        animation: none;
    }

    #toggleButton:hover {
        transform: scale(1);
        opacity: 0.95;
    }

    #toggleButton:active {
        transform: scale(1);
        opacity: 0.9;
    }
}

.display-tb-title {
    .b-title {
        transition: opacity 0.3s;
        opacity: 1;
    }
}

.shrink-button #toggleButton::before {
    opacity: 0;
}


.show-menu .menu-container {
    transition: transform 0.2s, opacity 0.2s ease;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}


#toggleButton.connected {
    background-color: var(--violet-color);
}

.b-title {
    transition: opacity 0.1s;
    position: absolute;
    opacity: 0;
    font-family: 'Roboto', sans-serif;
    color: rgba(255, 255, 255, 0.93);
}


.setting-bar {
    display: flex;
    width: 100%;
    gap: 20px;
    /* height: 50px; */
    /* background-color: rgb(255 255 255 / 0%); */
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
}

.setting-tile {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.setting-switcher {
    display: flex;
    height: 30px;
    width: 54px;
    background-color: #ffffff26;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.switcher-ball {
    height: 24px;
    width: 24px;
    background-color: white;
    border-radius: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    transition: all 0.1s;
}

.setting-bar.active .setting-switcher {
    background-color: var(--violet-color);
}

.switcher-ball-active {
    transform: translateX(50%);
}


.user-key-section {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    z-index: 9999;
    height: 100%;
    justify-content: center;
}

.user-key-prompt {
    font-size: 16px;
    margin-bottom: 10px;
}

.user-key-input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
}

.save-user-key-button {
    padding: 10px 20px;
    background-color: var(--violet-color);
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.save-user-key-button:hover {
    background-color: #5a2ecb;
}

.save-user-key-button:active {
    background-color: #4b26aa;
}

#userInfo {
    display: flex;
    position: absolute;
    left: 5px;
    /* transform: translateX(-50%); */
    top: 5px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #6a6a6a;
    /* padding: 1px 10px; */
    /* background-color: #ffffff1f; */
    /* border-radius: 10px; */
    transition: opacity 0.2s;
    flex-direction: row;
    gap: 5px;
    p {
        margin: 0;
    }
}

.logout-section {
    margin-top: 20px;
}

.logout-button {
    padding: 10px 20px;
    background-color: #ff4d4d; /* Red color */
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.logout-button:hover {
    background-color: #e60000;
}

.logout-button:active {
    background-color: #cc0000;
}
```


js.background.js
```js
// js/background.js

const SERVER_URL = 'http://85.236.189.41:5011';  // Замените на ваш URL сервера Flask
const EXTENSION_VERSION = '1.0';

const SERVER_HOSTNAME = new URL(SERVER_URL).hostname;

let isConnected = false;
let heartbeatInterval = null;
let userKey = null;
let currentProxyConfig = null;

// Функция для хранения userKey
function setUserKey(key) {
    userKey = key;
    chrome.storage.sync.set({ userKey: key });
}

// Функция для получения userKey
function getUserKey(callback) {
    if (userKey) {
        callback(userKey);
    } else {
        chrome.storage.sync.get('userKey', function (data) {
            if (data.userKey) {
                userKey = data.userKey;
                callback(userKey);
            } else {
                // Нет ключа пользователя, ничего не делаем
                console.error('User key is not set.');
                callback(null);
            }
        });
    }
}

// Функция для подключения VPN с настройками прокси от сервера
function connectVPN(proxyConfig) {
    if (currentProxyConfig &&
        JSON.stringify(currentProxyConfig) === JSON.stringify(proxyConfig)) {
        // Конфигурация прокси не изменилась, нет необходимости устанавливать ее снова
        return;
    }

    chrome.proxy.settings.set({ value: proxyConfig, scope: 'regular' }, function () {
        if (chrome.runtime.lastError) {
            console.error('Proxy settings error: ', chrome.runtime.lastError);
            return;
        }
        currentProxyConfig = proxyConfig;
        console.log('VPN подключен.');
    });
}

// Функция для отключения VPN
function disconnectVPN() {
    chrome.proxy.settings.clear({ scope: 'regular' }, function () {
        if (chrome.runtime.lastError) {
            console.error('Error clearing proxy settings: ', chrome.runtime.lastError);
            return;
        }
        currentProxyConfig = null;
        console.log('VPN отключен.');
    });
}

// Функция для запуска отправки heartbeat каждые 10 секунд
function startHeartbeat() {
    if (heartbeatInterval) {
        clearInterval(heartbeatInterval);
    }

    heartbeatInterval = setInterval(function () {
        sendHeartbeat();
    }, 10000);

    // Отправка сразу при запуске
    sendHeartbeat();
}

// Функция для остановки отправки heartbeat
function stopHeartbeat() {
    if (heartbeatInterval) {
        clearInterval(heartbeatInterval);
        heartbeatInterval = null;
    }
}

// Функция для отправки heartbeat и получения настроек прокси
function sendHeartbeat() {
    getUserKey(function (userKey) {
        if (!userKey) {
            // Ключ пользователя не установлен, не можем отправить heartbeat
            console.error('Cannot send heartbeat without userKey.');
            disconnectVPN();
            return;
        }

        // Получение URL текущей активной вкладки
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            const currentUrl = tabs && tabs.length > 0 && tabs[0].url ? tabs[0].url : 'unknown';

            fetch(`${SERVER_URL}/api/heartbeat`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    userKey: userKey,
                    version: EXTENSION_VERSION,
                    currentUrl: currentUrl,
                    isConnected: isConnected
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'ok') {
                        if (isConnected && data.proxy) {
                            // Получены детали прокси от сервера
                            const newProxyConfig = {
                                mode: "fixed_servers",
                                rules: {
                                    singleProxy: {
                                        scheme: data.proxy.scheme,
                                        host: data.proxy.host,
                                        port: data.proxy.port
                                    },
                                    bypassList: ["localhost", SERVER_HOSTNAME]
                                }
                            };

                            connectVPN(newProxyConfig);
                        }
                        // Получение информации о пользователе после успешного heartbeat
                        fetchUserInfo();
                    } else if (data.status === 'update_required') {
                        // Уведомление пользователя о необходимости обновления расширения
                        chrome.notifications.create({
                            type: 'basic',
                            iconUrl: 'icons/icon128.png',
                            title: 'DarkVPN Требуется обновление',
                            message: 'Пожалуйста, обновите расширение DarkVPN до последней версии.'
                        });
                        disconnectVPN();
                    } else if (data.status === 'unauthorized') {
                        // Неавторизованный доступ
                        disconnectVPN();
                        console.warn('Unauthorized access or VPN stopped/banned.');
                        // Очищаем сохранённый ключ пользователя
                        chrome.storage.sync.remove('userKey', function () {
                            userKey = null;
                            // Уведомляем пользователя об ошибке
                            chrome.notifications.create({
                                type: 'basic',
                                iconUrl: 'icons/icon128.png',
                                title: 'DarkVPN Ошибка',
                                message: 'Ключ пользователя недействителен. Пожалуйста, введите действительный ключ.'
                            });
                        });
                    } else if (data.status === 'subscription_expired') {
                        console.warn('Subscription expired.');
                        chrome.notifications.create({
                            type: 'basic',
                            iconUrl: 'icons/icon128.png',
                            title: 'DarkVPN Подписка истекла',
                            message: 'Ваша подписка истекла. Пожалуйста, обновите подписку.'
                        });
                        disconnectVPN();
                    } else {
                        // Другие ошибки
                        console.error('Ошибка от сервера:', data);
                        // Не отключаем VPN и не удаляем ключ
                    }
                })
                .catch(error => {
                    console.error('Ошибка при общении с сервером:', error);
                    chrome.notifications.create({
                        type: 'basic',
                        iconUrl: 'icons/icon128.png',
                        title: 'DarkVPN Ошибка связи',
                        message: 'Не удалось связаться с сервером. Пробуем снова...'
                    });
                    // Не отключаем VPN и не удаляем ключ
                });
        });
    });
}

// Функция для получения информации о пользователе
function fetchUserInfo() {
    if (!userKey) {
        return;
    }
    fetch(`${SERVER_URL}/api/user_info`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ userKey: userKey })
    })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'ok') {
                chrome.storage.local.set({
                    daysRemaining: data.daysRemaining,
                    username: data.username
                });
            } else {
                // Обработка ошибок
                console.error('Error fetching user info:', data.message);
            }
        })
        .catch(error => {
            console.error('Error fetching user info:', error);
        });
}

// Обработка сообщений от попапа
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.action === 'toggleConnection') {
        isConnected = !isConnected;
        chrome.storage.local.set({ isConnected: isConnected });

        if (isConnected) {
            // Запустить heartbeat и попытаться подключиться
            startHeartbeat();
            sendResponse({ isConnected: true });
        } else {
            // Отключить VPN, отправить финальный heartbeat и остановить heartbeat
            disconnectVPN();
            sendHeartbeat(); // Отправить финальный heartbeat, чтобы сообщить серверу
            stopHeartbeat();
            sendResponse({ isConnected: false });
        }
    } else if (request.action === 'userKeyUpdated') {
        setUserKey(request.userKey);
        sendResponse({});
    }
    return true; // Указывает, что sendResponse будет вызван асинхронно
});

// При запуске расширения получить состояние подключения
chrome.storage.local.get('isConnected', function (data) {
    isConnected = data.isConnected || false;
    if (isConnected) {
        startHeartbeat();
    } else {
        disconnectVPN();
    }
});

// Прослушивание изменений на вкладках для обновления текущего URL
chrome.tabs.onActivated.addListener(function (activeInfo) {
    if (isConnected) {
        sendHeartbeat();
    }
});

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.url && isConnected) {
        sendHeartbeat();
    }
});
```


js.menu.js
```js
// js/menu.js

$(document).ready(function() {
  let isMenuMode = false;

  function enterMenuMode() {
    if (!isMenuMode) {
      isMenuMode = true;
      $('.dark-vpn-title').css("opacity", "0");
      $('body').addClass('hide-logo');
      $('body').addClass('shrink-button');
      setTimeout(() => {
        $('body').addClass('display-tb-title');
      }, 100);
      setTimeout(() => {
        $('body').addClass('show-menu');
      }, 200);
    }
  }

  function exitMenuMode() {
    if (isMenuMode) {
      isMenuMode = false;
      $('.dark-vpn-title').css("opacity", "1");
      $('body').removeClass('show-menu');
      $('body').removeClass('shrink-button');
      $('body').removeClass('hide-logo');
      $('body').removeClass('display-tb-title');
    }
  }

  function UpdateConnectButtonTitle() {
    if ($('#toggleButton').hasClass('connected')) {
      $('.b-title').text("Отключить");
    } else {
      $('.b-title').text("Подключить");
    }
  }

  function toggleConnection() {
    $('#toggleButton').toggleClass('connected');
    UpdateConnectButtonTitle();

    // Сообщение фоновой странице о переключении состояния
    chrome.runtime.sendMessage({action: 'toggleConnection'}, function (response) {
        if (response && typeof response.isConnected !== 'undefined') {
            UpdateConnectButtonTitle();
        }
    });
  }

  $('#home-btn').click(exitMenuMode);
  $('#menu-btn').click(enterMenuMode);
  //$('#toggleButton').click(toggleConnection);

  // Обработчик для кнопки выхода
  $('#logoutButton').click(function() {
      chrome.storage.sync.remove('userKey', function() {
          // Также очищаем локальное хранилище
          chrome.storage.local.remove(['daysRemaining', 'username'], function() {
              // Перезагружаем окно popup
              location.reload();
          });
      });
  });

  // Загрузка сохраненных настроек
  chrome.storage.local.get(['autoConnect', 'adBlock'], function(data) {
    if (data.autoConnect) {
      $('#autoConnectSetting').addClass('active');
      $('#autoConnectSetting .switcher-ball').addClass('switcher-ball-active');
    }
    if (data.adBlock) {
      $('#adBlockSetting').addClass('active');
      $('#adBlockSetting .switcher-ball').addClass('switcher-ball-active');
    }
  });

  // Сохранение настроек при переключении
  $('.setting-bar').click(function() {
    $(this).toggleClass('active');
    $(this).find('.switcher-ball').toggleClass('switcher-ball-active');

    const settingId = $(this).attr('id');
    const isActive = $(this).hasClass('active');

    if (settingId === 'autoConnectSetting') {
      chrome.storage.local.set({autoConnect: isActive});
    } else if (settingId === 'adBlockSetting') {
      chrome.storage.local.set({adBlock: isActive});
    }
  });
});
```


js.popup.js
```js
// js/popup.js

document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.getElementById('toggleButton');
    const buttonTitle = document.querySelector('.b-title');
    const userKeySection = document.getElementById('userKeySection');
    const userKeyInput = document.getElementById('userKeyInput');
    const saveUserKeyButton = document.getElementById('saveUserKeyButton');
    const userInfoContainer = document.getElementById('userInfo');

    let userKey = null;

    function displayUserInfo(username, daysRemaining) {
        console.log("username = ", username)
        console.log("daysRemaining = ", daysRemaining)
        let displayMessage;
        if (daysRemaining <= 0) {
            displayMessage = `${username} - подписка истекла`;
        } else {
            displayMessage = `${username} - ${daysRemaining} дней`;
        }
        userInfoContainer.innerHTML = `<p>${displayMessage}</p>`;
        userInfoContainer.style.display = 'block';
    }

    function getUserInfo(userKey) {
        fetch('http://85.236.189.41:5011/api/user_info', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({userKey: userKey})
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'ok') {
                    chrome.storage.local.set({
                        daysRemaining: data.daysRemaining,
                        username: data.username
                    });
                    displayUserInfo(data.username, data.daysRemaining);
                } else {
                    let displayMessage;
                    if (data.message === 'User not found') {
                        displayMessage = `${data.username || 'Пользователь'} - unauthorized`;
                    } else if (data.message === 'Subscription expired') {
                        displayMessage = `${data.username || 'Пользователь'} - подписка истекла`;
                    } else {
                        displayMessage = `Ошибка: ${data.message}`;
                    }
                    userInfoContainer.innerHTML = `<p style="color: red;">${displayMessage}</p>`;
                    userInfoContainer.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Ошибка при запросе к серверу:', error);
                userInfoContainer.innerHTML = `<p style="color: red;">Ошибка сети</p>`;
                userInfoContainer.style.display = 'block';
            });
    }

    function updateButtonState(isConnected) {
        if (isConnected) {
            toggleButton.classList.add('connected');
            buttonTitle.textContent = "Отключить";
        } else {
            toggleButton.classList.remove('connected');
            buttonTitle.textContent = "Подключить";
        }
    }

    function checkUserKey() {
        chrome.storage.sync.get('userKey', function (data) {
            if (data.userKey) {
                userKey = data.userKey;
                // Ключ пользователя сохранён, скрываем раздел ввода ключа
                userKeySection.style.display = 'none';
                // Отображаем основной интерфейс
                document.querySelector('.toggle-container').style.display = 'flex';
                document.querySelector('.info-container').style.display = 'flex';
                // Получаем сохраненную информацию о пользователе
                chrome.storage.local.get(['daysRemaining', 'username'], function(info) {
                    if (info.daysRemaining !== undefined && info.username) {
                        displayUserInfo(info.username, info.daysRemaining);
                    } else {
                        // Запрашиваем информацию о пользователе
                        getUserInfo(userKey);
                    }
                });
                // Получаем статус подключения
                chrome.storage.local.get('isConnected', function (data) {
                    updateButtonState(data.isConnected);
                });
            } else {
                // Ключ пользователя не сохранён, показываем раздел ввода ключа
                userKeySection.style.display = 'flex';
                // Скрываем основной интерфейс
                document.querySelector('.toggle-container').style.display = 'none';
                document.querySelector('.info-container').style.display = 'none';
                document.querySelector('.dark-vpn-title').style.opacity = '0';
            }
        });
    }

    // Обработчик нажатия на кнопку сохранения ключа
    saveUserKeyButton.addEventListener('click', function () {
        const userKey = userKeyInput.value.trim();
        if (userKey) {
            // Сохраняем ключ пользователя
            chrome.storage.sync.set({userKey: userKey}, function () {
                // Очищаем поле ввода
                userKeyInput.value = '';
                // Обновляем интерфейс
                checkUserKey();
                // Отправляем сообщение фоновому скрипту для обновления ключа
                chrome.runtime.sendMessage({action: 'userKeyUpdated', userKey: userKey}, function (response) {
                });
            });
        } else {
            alert('Пожалуйста, введите ключ пользователя.');
        }
    });

    // Обработчик переключения состояния VPN
    toggleButton.addEventListener('click', function () {
        chrome.runtime.sendMessage({action: 'toggleConnection'}, function (response) {
            if (response && typeof response.isConnected !== 'undefined') {
                updateButtonState(response.isConnected);
            }
        });
    });

    // Проверяем наличие ключа пользователя при загрузке
    checkUserKey();

    // Прослушивание изменений в хранилище (на случай изменения ключа в другом месте)
    chrome.storage.onChanged.addListener(function (changes, area) {
        if (area === 'sync' && changes.userKey) {
            checkUserKey();
        }
        if (area === 'local' && (changes.daysRemaining || changes.username)) {
            chrome.storage.local.get(['daysRemaining', 'username'], function(info) {
                if (info.daysRemaining !== undefined && info.username) {
                    displayUserInfo(info.username, info.daysRemaining);
                }
            });
        }
    });
});
```


Сделай, чтобы при выходе с акаунта автоматически отправляли heartbeat об этом и отключали VPN.
Сделай это так, чтобы было безопасно.