Skip to content

Commit 76492e6

Browse files
agch-devagch-dev
authored
Fix extension error for chromium browsers that are not chrome (#18)
* fix .then not defined in the devtools panel by dividing into devtools and panel * Update version to 0.1.3 and enhance panel description - Bumped version in package.json from 0.1.2 to 0.1.3. - Updated the description in package.json to clarify the tool's functionality in analyzing and debugging Segment events on web pages. - Added rollup options in Vite configuration for both Chrome and Firefox builds to include the panel entry point. - Introduced new components for the panel, including ActionButtons, EmptyState, EventRow, and various detail sections to improve the user interface and experience. - Implemented hooks for domain tracking and event synchronization to enhance functionality and performance.
1 parent 47884c9 commit 76492e6

54 files changed

Lines changed: 144 additions & 116 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "analytics-x-ray",
3-
"version": "0.1.2",
4-
"description": "Analytics X-Ray is a tool that helps you analyze your analytics data.",
3+
"version": "0.1.3",
4+
"description": "Analytics X-Ray is a tool that helps you analyze and debug Segment events being fired on web pages.",
55
"license": "MIT",
66
"repository": {
77
"type": "git",

‎src/pages/devtools/index.html‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,9 @@
22
<html>
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Analytics X-Ray Panel</title>
6-
<style>
7-
html,
8-
body,
9-
#__root {
10-
height: 100%;
11-
margin: 0;
12-
padding: 0;
13-
}
14-
</style>
5+
<title>Analytics X-Ray DevTools</title>
156
</head>
16-
<body class="bg-background text-foreground">
17-
<div id="__root"></div>
7+
<body>
188
<script type="module" src="./index.tsx"></script>
199
</body>
2010
</html>

‎src/pages/devtools/index.tsx‎

Lines changed: 9 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,18 @@
1-
import { useEffect } from 'react';
2-
import { createRoot } from 'react-dom/client';
31
import Browser from 'webextension-polyfill';
42

5-
import { ErrorBoundary, PanelErrorState } from '@src/components';
6-
import { useTheme } from '@src/hooks';
73
import { createContextLogger } from '@src/lib';
8-
import Panel from '@src/pages/devtools/Panel';
9-
import { useConfigStore, useDomainStore } from '@src/stores';
10-
import '@assets/styles/tailwind.css';
114

125
const log = createContextLogger('devtools');
136

14-
function PanelWrapper() {
15-
useTheme();
16-
17-
// Listen for storage changes to sync config and domain updates from other extension contexts
18-
useEffect(() => {
19-
const handleStorageChange = (
20-
changes: Browser.Storage.StorageAreaOnChangedChangesType,
21-
areaName: string
22-
) => {
23-
// Only listen to local storage changes
24-
if (areaName !== 'local') return;
25-
26-
// Check if the config storage key changed
27-
const configKey = 'analytics-xray-config';
28-
if (changes[configKey]) {
29-
log.debug('Config storage changed, rehydrating store...');
30-
31-
// Read the new config from storage and update the store
32-
Browser.storage.local.get(configKey).then((result) => {
33-
const storedValue = result[configKey];
34-
if (storedValue && typeof storedValue === 'string') {
35-
try {
36-
const parsed = JSON.parse(storedValue);
37-
const { state: newState } = parsed;
38-
if (newState) {
39-
// Update the store with the new state
40-
useConfigStore.setState(newState);
41-
log.debug('Config store rehydrated from storage');
42-
}
43-
} catch (error) {
44-
log.error('Failed to parse config from storage:', error);
45-
}
46-
}
47-
});
48-
}
49-
50-
// Check if the domain storage key changed
51-
const domainKey = 'analytics-xray-domain';
52-
if (changes[domainKey]) {
53-
log.debug('Domain storage changed, rehydrating store...');
54-
55-
// Read the new domain config from storage and update the store
56-
Browser.storage.local.get(domainKey).then((result) => {
57-
const storedValue = result[domainKey];
58-
if (storedValue && typeof storedValue === 'string') {
59-
try {
60-
const parsed = JSON.parse(storedValue);
61-
const { state: newState } = parsed;
62-
if (newState) {
63-
// Update the store with the new state
64-
useDomainStore.setState(newState);
65-
log.debug('Domain store rehydrated from storage');
66-
}
67-
} catch (error) {
68-
log.error('Failed to parse domain storage:', error);
69-
}
70-
}
71-
});
72-
}
73-
};
74-
75-
Browser.storage.onChanged.addListener(handleStorageChange);
76-
77-
return () => {
78-
Browser.storage.onChanged.removeListener(handleStorageChange);
79-
};
80-
}, []);
81-
82-
return (
83-
<ErrorBoundary fallback={<PanelErrorState />}>
84-
<Panel />
85-
</ErrorBoundary>
86-
);
87-
}
88-
897
log.info('🔧 DevTools script loading...');
908
log.info(`Inspected tab ID: ${Browser.devtools.inspectedWindow.tabId}`);
919

92-
// Create the devtools panel
93-
Browser.devtools.panels
94-
.create(
95-
'Analytics X-Ray',
96-
'icons/icon32.png',
97-
'src/pages/devtools/index.html'
98-
)
99-
.then(() => {
100-
log.info('✅ DevTools panel created successfully');
101-
// Initialize React app when panel is created
102-
const rootContainer = document.querySelector('#__root');
103-
if (!rootContainer) throw new Error("Can't find Panel root element");
104-
const root = createRoot(rootContainer);
105-
root.render(<PanelWrapper />);
106-
log.info('✅ React app rendered');
107-
})
108-
.catch((error) => {
109-
log.error('❌ Failed to create DevTools panel:', error);
110-
console.error(error);
111-
});
10+
// Create the devtools panel pointing to the panel HTML page
11+
// This approach avoids circular dependencies and browser compatibility issues
12+
Browser.devtools.panels.create(
13+
'Analytics X-Ray',
14+
'icons/icon32.png',
15+
'src/pages/panel/index.html'
16+
);
17+
18+
log.info('✅ DevTools panel creation initiated');

src/pages/devtools/Panel.tsx renamed to src/pages/panel/Panel.tsx

File renamed without changes.

src/pages/devtools/components/ActionButtons.tsx renamed to src/pages/panel/components/ActionButtons.tsx

File renamed without changes.

src/pages/devtools/components/EmptyState.tsx renamed to src/pages/panel/components/EmptyState.tsx

File renamed without changes.

src/pages/devtools/components/EventList/EventList.tsx renamed to src/pages/panel/components/EventList/EventList.tsx

File renamed without changes.

src/pages/devtools/components/EventList/index.ts renamed to src/pages/panel/components/EventList/index.ts

File renamed without changes.

src/pages/devtools/components/EventList/types.ts renamed to src/pages/panel/components/EventList/types.ts

File renamed without changes.

src/pages/devtools/components/EventList/useStickyHeader.ts renamed to src/pages/panel/components/EventList/useStickyHeader.ts

File renamed without changes.

0 commit comments

Comments
 (0)