Activity

1. anupsingh244

   added a parent issue on Sep 2, 2025

   • Rebuild PRD #43
2. anupsingh244 commented on Sep 2, 2025

   

   anupsingh244

   on Sep 2, 2025

   ContributorAuthor

   More actions

   Summary

   The Lytics Dev Tools extension has an excellent foundation for cross-browser support with ~85% compatibility already achieved). The existing Firefox build system demonstrates forward-thinking architecture. Firefox's sidebar_action API provides direct equivalent to Chrome's Side Panel, dramatically reducing implementation complexity.

   📊 Current State Analysis

   ✅ Already Cross-Browser Compatible

   • Storage System: Uses standard WebExtension APIs with polyfill
   • Content Scripts: Standard implementation works across browsers
   • UI Components: React + Material-UI (browser agnostic)
   • Build System: Firefox-specific build pipeline exists
   • Polyfill Integration: webextension-polyfill@0.10.0 already included

   🎉 New Discovery: Firefox Sidebar Support

   • Firefox sidebar_action API: Direct equivalent to Chrome's Side Panel
   • Same persistent sidebar UX: No UI compromises needed
   • Minimal code changes: API wrapper approach sufficient

   🔧 Technical Compatibility Matrix

   Feature	Chrome	Firefox	Edge	Safari	Status
   Storage APIs	✅	✅	✅	✅	Ready
   Content Scripts	✅	✅	✅	✅	Ready
   Background Scripts	✅ Service Worker	⚠️ Persistent Script	✅ Service Worker	✅ Service Worker	Ready (handled)
   Sidebar UI	✅ sidePanel	✅ sidebar_action	✅ sidePanel	❌ DevTools fallback	Minor Effort(Major for safari)
   Declarative Net Request	✅ Full Support	⚠️ Limited	✅ Full Support	⚠️ Limited	Needs Fallback
   DevTools Panel	✅	✅	✅	✅	Ready
   Tabs API	✅	✅	✅	✅	Ready
   WebRequest API	✅	✅	✅	✅	Ready

   🚨 Critical API Dependencies

   1. Sidebar APIs (Minor Issue)

   Chrome
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });

   Firefox - Direct equivalent!
browser.sidebarAction.setPanel({ panel: 'sidebar.html' });
browser.sidebarAction.open();

   Impact: Core UI functionality
   Firefox Solution: ✅ Native sidebar_action API (same UX!)
   Effort: Low (API wrapper only)

   2. Service Worker vs Background Scripts

   Chrome (Manifest V3) - Service Worker
"background": { "service_worker": "background.js", "type": "module" }

   Firefox - Persistent Background Script
"background": { "scripts": ["background.js"], "persistent": true }

   Impact: Background processing
   Status: ✅ Already handled by manifest parser
   Effort: None (already implemented)

   3. Declarative Net Request

   Current rules.json implementation
{
"id": 1,
"action": { "type": "allow" },
"condition": { "urlFilter": ".*lytics\\.io/.*" }
}

   Impact: Network traffic monitoring
   Firefox Support: Limited (fallback to webRequest needed)
   Effort: Medium (dual implementation)

   🏗️ Simplified Architecture Assessment

   Current Chrome API Usage Locations

   1. Background Script (src/pages/background/index.ts)
      • chrome.sidePanel.* → Easy wrapper to browser.sidebarAction.*
      • chrome.action.setIcon() → Already compatible
      • chrome.webRequest.onBeforeRequest → Already compatible
      • chrome.tabs.query() → Already compatible
   2. All Other Components: ✅ Already cross-browser compatible

   🛠️ Simplified Implementation Strategy

   P1: Sidebar API Wrapper (1 day)

   New: src/shared/browser/sidebar.ts
interface SidebarAPI {
open(): Promise<void>;
setPanel(options: { panel: string; tabId?: number }): Promise<void>;
setPanelBehavior?(options: { openPanelOnActionClick: boolean }): Promise<void>;
}

   export const sidebarAPI: SidebarAPI = {
open: async () => {
if (typeof chrome !== 'undefined' && chrome.sidePanel) {
return; // Chrome: Opens automatically on action click
} else if (typeof browser !== 'undefined' && browser.sidebarAction) {
return browser.sidebarAction.open(); // Firefox: Explicit open
}
},

   setPanel: async (options) => {
if (typeof chrome !== 'undefined' && chrome.sidePanel) {
return chrome.sidePanel.setOptions({
tabId: options.tabId,
path: options.panel,
enabled: true
});
} else if (typeof browser !== 'undefined' && browser.sidebarAction) {
return browser.sidebarAction.setPanel({ panel: options.panel });
}
}
};

   P2: Enhanced Manifest Management (0.5 days)

   Enhanced utils/manifest-parser/index.ts
static convertToFirefoxCompatibleManifest(manifest: Manifest) {
const manifestCopy = { ...manifest } as { [key: string]: unknown };

   Convert Chrome sidePanel to Firefox sidebar_action
if (manifest.side_panel) {
manifestCopy.sidebar_action = {
default_panel: manifest.side_panel.default_path,
default_title: manifest.name,
default_icon: manifest.action?.default_icon || "icon-34.png"
};
delete manifestCopy.side_panel;
}

   Existing Firefox conversions...
return manifestCopy as Manifest;
}

   P3: Network Monitoring Fallback (2 days)

   Declarative Net Request (Chrome/Edge) + webRequest (Firefox/Safari)
if (browser.declarativeNetRequest) {
browser.declarativeNetRequest.updateDynamicRules(rules);
} else {
browser.webRequest.onBeforeRequest.addListener(handler, filter, options);
}

   P4: Safari DevTools Panel (1 day)[Need to explore more on this]

   Safari-specific fallback to DevTools panel
if (isSafari) {
chrome.devtools.panels.create('Lytics Dev Tools', 'icon.png', 'panel.html');
}

   📋 Technical Requirements

   Dependencies

   • ✅ webextension-polyfill (already included)
   • 🆕 Minimal browser detection utility
   • 🆕 Simple sidebar API wrapper

   Build System Enhancements

   package.json - Enhanced scripts (mostly exist)
{
"build:chrome": "cross-env __CHROME__=true vite build",
"build:firefox": "cross-env __FIREFOX__=true vite build", // ✅ exists
"build:edge": "cross-env __EDGE__=true vite build",
"build:safari": "cross-env __SAFARI__=true vite build",
"build:all": "run-p build:chrome build:firefox build:edge"
}

   📈 Effort Estimation

   Phase	Effort	Priority	Risk
   Sidebar API Wrapper	1 day	High	Low
   Enhanced Manifest Management	0.5 days	Medium	Low
   Network Monitoring Fallback	2 days	Medium	Low
   Safari DevTools Fallback	1 day	Low	Low
   Testing & QA	1 day	High	Low
   Documentation & Deployment	0.5 days	Low	Low

   Total Estimated Effort: 6 days

   🎯 Browser Support Strategy

   Implementation Priority

   1. Chrome/Edge: ✅ Use existing sidePanel API (no changes needed)
   2. Firefox: ✅ Use sidebar_action API with minimal wrapper
   3. Safari: Use DevTools panel fallback (only browser needing major adaptation)

   User Experience Impact

   • Chrome & Firefox: ✅ Identical persistent sidebar experience
   • Edge: ✅ Same as Chrome
   • Safari: ⚠️ DevTools panel (developer-focused, Need to explore more)

   🚀 Success Metrics

   • ✅ Extension loads in Chrome, Firefox, Edge, Safari(Optional for now)
   • ✅ Identical UI experience in Chrome, Firefox, Edge
   • ✅ Same persistent sidebar in Chrome, Firefox, Edge
   • ✅ Core functionality works across all browsers
   • ✅ Network monitoring captures Lytics traffic
   • ✅ Storage persistence works correctly

   🎯 Recommended Approach

   Immediate Actions (Spike Outcomes)

   1. ✅ Test Firefox sidebar_action - Validate API compatibility
   2. Prototype Sidebar Wrapper - Build a minimal abstraction layer
   3. Firefox Build Testing - Verify the existing Firefox build works correctly

   Implementation Priority

   1. High Priority: Sidebar API wrapper (minimal effort, major impact)
   2. Medium Priority: Network monitoring fallback (feature parity)
   3. Low Priority: Safari DevTools panel (edge case)

   🚀 Next Steps

   1. Spike Validation: Test Firefox sidebar_action API compatibility
   2. Quick Prototype: Build sidebar API wrapper proof-of-concept
   3. Implementation Planning: Schedule 6-8 day implementation sprint
3. anupsingh244

   self-assigned this

   on Sep 3, 2025
4. lytics

   deleted a comment from github-actions on Sep 3, 2025
5. anupsingh244

   removed a parent issue on Sep 3, 2025

   • Rebuild PRD #43
6. anupsingh244

   closed this as completedon Sep 3, 2025
7. anupsingh244

   added a parent issue on Sep 8, 2025

   • [E] Chrome extension v2 [BLOCKED] #47