Реалізація інтеграції браузерного розширення з REST API сервера

Реалізація інтеграції браузерного розширення з REST API сервера

Браузерне розширення взаємодіє з вашим сервером через REST API: синхронізує дані, зберігає параметри та отримує оновлення конфігурації. Специфіка розширень — сувора політика CSP, робота в ізольованому контексті та обмеження Manifest V3.

Архітектура комунікації

Extension (content script)
    ↓ chrome.runtime.sendMessage
Extension (background service worker)
    ↓ fetch() → REST API
Server Backend
    ↓ JSON Response
Background service worker
    ↓ chrome.runtime.sendResponse
Content script

Background Service Worker (Manifest V3)

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'save_item') {
    saveItemToServer(message.data)
      .then(result => sendResponse({ success: true, data: result }))
      .catch(err  => sendResponse({ success: false, error: err.message }));
    return true;  // async response
  }
});

async function saveItemToServer(itemData) {
  const token = await getStoredToken();

  const resp = await fetch('https://api.example.com/v1/items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token,
      'X-Extension-Version': chrome.runtime.getManifest().version,
    },
    body: JSON.stringify(itemData),
  });

  if (!resp.ok) {
    if (resp.status === 401) await refreshToken();
    throw new Error(`API error: ${resp.status}`);
  }

  return resp.json();
}

CORS на сервері

// Дозволяємо запити від розширення
// Origin розширення має формат: chrome-extension://EXTENSION_ID

class CorsMiddleware
{
    public function handle(Request $request, Closure $next): Response
    {
        $origin = $request->header('Origin');

        $allowedOrigins = [
            'https://app.example.com',
            'chrome-extension://' . config('services.extension.chrome_id'),
            'moz-extension://' . config('services.extension.firefox_id'),
        ];

        if (in_array($origin, $allowedOrigins)) {
            return $next($request)->header('Access-Control-Allow-Origin', $origin);
        }

        return $next($request);
    }
}

Синхронізація параметрів через chrome.storage.sync

// Синхронізуємо параметри з сервером та chrome.storage.sync
async function syncSettings() {
  // Завантажуємо з сервера
  const serverSettings = await apiRequest('GET', '/v1/user/settings');

  // Зберігаємо локально
  await chrome.storage.sync.set({ settings: serverSettings });

  return serverSettings;
}

// Коли параметри змінюються — зберігаємо на сервері
chrome.storage.sync.onChanged.addListener(async (changes) => {
  if (changes.settings) {
    await apiRequest('PUT', '/v1/user/settings', changes.settings.newValue);
  }
});

Обробка режиму без інтернету

const PENDING_ACTIONS_KEY = 'pending_actions';

async function executeOrQueue(action) {
  try {
    await fetch(action.url, action.options);
  } catch (error) {
    // Немає з'єднання — ставимо в чергу
    const pending = (await chrome.storage.local.get(PENDING_ACTIONS_KEY))[PENDING_ACTIONS_KEY] || [];
    pending.push({ ...action, queued_at: Date.now() });
    await chrome.storage.local.set({ [PENDING_ACTIONS_KEY]: pending });
  }
}

// Виконуємо накопичені дії при відновленні з'єднання
chrome.runtime.onStartup.addListener(flushPendingActions);

Графік

REST API-інтеграція розширення з синхронізацією та підтримкою офлайн: 4–6 робочих днів.