Веб

Chrome‑расширение: авто‑переключение вкладок каждые 5 мин

Руководство по созданию Chrome‑расширения, открывающего несколько сайтов и автоматически переключающего вкладки каждые 5 минут с помощью chrome.alarms.

Авторы: НейроАгент

Как реализовать в Chrome‑расширении, которое открывает несколько вкладок с разными сайтами, поддержку регистрации и автоматически переключает вкладки каждые пять минут? Есть ли примеры кода или подходы для такой функциональности?

Установите расширение, которое открывает нужные сайты, хранит их список в chrome.storage, а затем регулярно переключает активную вкладку через setInterval, ведь это удобно.
Ниже приведён пошаговый план, пример кода и рекомендации, как сделать всё это в Manifest V3, в частности, с учётом новых ограничений.

Содержание

1. Что нужно в манифесте

json
{
  "manifest_version": 3,
  "name": "Auto‑Tab Switcher",
  "version": "1.0",
  "permissions": [
    "tabs",
    "storage",
    "alarms"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}
  • tabs – доступ к вкладкам браузера.
  • storage – хранение списка сайтов, в частности, удобно для сохранения настроек.
  • alarms – удобный способ запуска таймеров в Service Worker (см. пример ниже).

2. Как открыть несколько вкладок

js
// background.js
async function openTabs(urls) {
  for (const url of urls) {
    await chrome.tabs.create({
      url,
      active: false          // открываем в фоне, чтобы пользователь не потерял текущую
    });
  }
}

Такой подход гарантирует, что все вкладки откроются одновременно, но не будут прерывать рабочее пространство пользователя.
Ссылка на аналогичный пример: Stack Overflow – Open multiple links in Chrome at once.

3. Хранение списка URL‑ов

js
// popup.js (или любой UI)
function saveUrls(urls) {
  chrome.storage.local.set({ sites: urls });
}

chrome.storage.local.get('sites', data => {
  const urls = data.sites || [];
  // показать пользователю список …
});
  • chrome.storage.local сохраняет данные между перезапусками расширения, в частности, это удобно при работе с настройками.
  • При первом запуске можно задать список по умолчанию.

4. Автоматический переключатель

js
// background.js
const SWITCH_INTERVAL = 5 * 60 * 1000; // 5 минут

chrome.alarms.create('switch', { periodInMinutes: 5 });

chrome.alarms.onAlarm.addListener(alarm => {
  if (alarm.name === 'switch') switchTab();
});

async function switchTab() {
  const tabs = await chrome.tabs.query({ currentWindow: true, active: false });
  if (!tabs.length) return;

  // Получаем индекс активной вкладки
  const active = await chrome.tabs.query({ active: true, currentWindow: true });
  const currentIndex = active[0].index;

  // Находим следующую вкладку в списке открытых
  const nextIndex = (currentIndex + 1) % tabs.length;
  const nextTab = tabs[nextIndex];

  // Переключаемся и обновляем содержимое
  await chrome.tabs.update(nextTab.id, { active: true });
  await chrome.tabs.reload(nextTab.id);
}
  • chrome.alarms позволяет запускать задачу каждые 5 минут даже если расширение не активно в UI, в частности, это удобно для фоновых задач.
  • chrome.tabs.reload обеспечивает обновление контента, как это делают известные расширения, например Auto‑Tab‑Switcher из Chrome Web Store.

Подробности работы с chrome.alarms можно найти в официальной документации: Chrome Extensions Alarm API.

5. Полный пример кода

json
// manifest.json
{
  "manifest_version": 3,
  "name": "Auto‑Tab Switcher",
  "version": 1.0,
  "permissions": ["tabs", "storage", "alarms"],
  "background": {"service_worker": "background.js"},
  "action": {"default_popup": "popup.html", "default_icon": "icon.png"}
}
html
<!-- popup.html -->
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Auto‑Tab Switcher</title></head>
<body>
  <h1>Список сайтов</h1>
  <textarea id="urls" rows="6" cols="50" placeholder="https://example.com&#10;https://google.com"></textarea><br>
  <button id="save">Сохранить и открыть</button>
  <script src="popup.js"></script>
</body>
</html>
js
// popup.js
document.getElementById('save').addEventListener('click', () => {
  const urls = document.getElementById('urls').value
    .split('\n')
    .map(u => u.trim())
    .filter(Boolean);
  chrome.storage.local.set({ sites: urls }, () => {
    chrome.runtime.sendMessage({ action: 'openTabs', urls });
  });
});

chrome.runtime.onMessage.addListener(msg => {
  if (msg.action === 'openTabs') {
    chrome.tabs.query({ currentWindow: true, active: false }, () => {
      // nothing needed – background handles opening
    });
  }
});
js
// background.js
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'openTabs') {
    openTabs(msg.urls);
  }
});

async function openTabs(urls) {
  for (const url of urls) {
    await chrome.tabs.create({ url, active: false });
  }
}

chrome.alarms.create('switch', { periodInMinutes: 5 });

chrome.alarms.onAlarm.addListener(async () => {
  const tabs = await chrome.tabs.query({ currentWindow: true, active: false });
  if (!tabs.length) return;
  const active = await chrome.tabs.query({ active: true, currentWindow: true });
  const currentIndex = active[0].index;
  const nextIndex = (currentIndex + 1) % tabs.length;
  const nextTab = tabs[nextIndex];
  await chrome.tabs.update(nextTab.id, { active: true });
  await chrome.tabs.reload(nextTab.id);
});

Такой минимальный набор файлов создаёт расширение, открывающее список сайтов и автоматически переключающее вкладки каждые пять минут.
Если нужно добавить «перезагрузку» только при переходе, удалите chrome.tabs.reload.
Похожие готовые решения можно найти, например, в репозитории chrome-extension-auto-refresh-and-switch-tabs.

6. Тестирование и отладка

  1. Загрузка расширения

    • Откройте chrome://extensions/, включите «Режим разработчика» и нажмите «Загрузить распакованное расширение».
    • Выберите папку с файлами.

  2. Проверка работы

    • Введите несколько URL‑ов в popup и нажмите «Сохранить и открыть».
    • Убедитесь, что вкладки открылись в фоне, чтобы не мешать работе.
    • Через пять минут активная вкладка должна переключиться и обновиться.

  3. Отладка

    • В панели расширения нажмите «Inspect views → Service Worker» для просмотра логов Service Worker.
    • Используйте console.log внутри switchTab для отслеживания индексов.

Заключение

  • Ключевые шаги: открыть вкладки с chrome.tabs.create, сохранить список в chrome.storage, использовать chrome.alarms для таймера и переключать вкладки через chrome.tabs.update.
  • Преимущества: работа без UI, сохранение состояния между перезапусками, гибкая настройка частоты.
  • Расширения: подобные решения уже существуют в Chrome Web Store (Auto‑Tab‑Switcher, Tab Scheduler), но написание собственного кода даёт полный контроль над функциональностью.

Если вам понадобится добавить дополнительные возможности (отслеживание переходов, ограничение количества открытых вкладок, пользовательские настройки частоты), расширьте background.js и popup.html соответствующими настройками. Удачной разработки!

Источники

  1. Stack Overflow – Switch Chrome tabs and refresh every 5 seconds
  2. Stack Overflow – Open multiple links in Chrome at once
  3. Chrome Extensions Alarm API
  4. GitHub – chrome-extension-auto-refresh-and-switch-tabs
  5. Chrome Web Store – Auto Tab Switcher
Авторы
НейроАгент
Автор
Проверено модерацией
НейроОтветы
Модерация
Chrome‑расширение: авто‑переключение вкладок каждые 5 мин