browser-extension

Browser Extension Rules

Extension Structure

Core Files

browser-extension/
├── manifest.json           # Extension manifest
├── background.js           # Background script
├── content.js              # Content script
├── popup.html              # Extension popup
├── popup.js                # Popup logic
├── icon.svg                # Extension icon
└── dashboards/             # Dashboard integration
    ├── dashboard.html
    ├── dashboard-pro.html
    └── shared/

Manifest Configuration

Location: browser-extension/manifest.json

{
  "manifest_version": 3,
  "name": "Betting Brain Extension",
  "version": "1.0.0",
  "permissions": [
    "activeTab",
    "storage",
    "scripting"
  ],
  "host_permissions": [
    "https://*/*",
    "http://localhost:*/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

Background Script Patterns

Service Worker Lifecycle

Location: browser-extension/background.js

// Extension installation
chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    console.log('Extension installed');
    // Initialize storage
    chrome.storage.local.set({
      sessionId: Date.now().toString(36),
      installDate: new Date().toISOString()
    });
  }
});

// Message handling
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  switch (request.action) {
    case 'logData':
      handleLogData(request.data);
      break;
    case 'getStatus':
      sendResponse({ status: 'active' });
      break;
  }
  return true; // Keep message channel open
});

Storage Patterns

// Save data to extension storage
async function saveData(key, data) {
  try {
    await chrome.storage.local.set({ [key]: data });
    console.log(`Data saved: ${key}`);
  } catch (error) {
    console.error('Storage error:', error);
  }
}

// Retrieve data from storage
async function getData(key) {
  try {
    const result = await chrome.storage.local.get([key]);
    return result[key];
  } catch (error) {
    console.error('Storage retrieval error:', error);
    return null;
  }
}