Dev/1.2.0 (#21)

* feat: move version into footer * fix: different analytics categories for matcher types * feat: context menu search selection
Artboomy · Mar 9, 2024 · 01ad5f7 · 01ad5f7
1 parent 0adef73
commit 01ad5f7
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -13,13 +13,12 @@ This is extendable network request viewer extension for Chromium-based browsers.
 
 The extension will appear in devtools as a `📜 Net logs` tab.
 
-* 🔍 **Search:** Filter by url and search by params/result.
-* 🎨 Presets: GraphQL & JSON-RPC protocols unpacking.
-* ⛰️ **Integration:** View Next.js & NuxtJS hydration state.
-* 🛠️ **Customization:** Transform name, parameters, and response with javascript.
-* ✨ **Universality:** View live logs or load
-  from [`*.har` file](https://developer.chrome.com/docs/devtools/network/reference/#save-as-har).
-* 🤝 **Team-oriented:** Export logs and share them with others.
+* 🔍 **Advanced Search**: Filter requests by URL and search within parameters/results.
+* ⛰️ **Framework Integration**: View Next.js & NuxtJS hydration state.
+* 🎨 **Protocol Presets**: Streamlined unpacking for GraphQL and JSON-RPC.
+* 🛠️ **Customization**: Modify request names, parameters, and responses with JavaScript.
+* ✨ **Log Viewing**: Analyze live or import logs from HAR/*.netlogs.zip files.
+* 🤝 **Collaboration**: Export and share logs for team debugging.
 
 ![main.gif](./img/main.gif)
 
@@ -94,40 +93,40 @@ Event signature is either `IItemContentOnlyCfg`:
 
 ```typescript
 type IItemContentOnlyCfg = {
-  // by default new Date().getTime() will be used
-  timestamp?: number;
-  // small bit of text next to date
-  tag?: string;
-  // viewable on date click
-  meta?: {
-    key: {
-      items: [{ name: string, value: string }]
+    // by default new Date().getTime() will be used
+    timestamp?: number;
+    // small bit of text next to date
+    tag?: string;
+    // viewable on date click
+    meta?: {
+        key: {
+            items: [{ name: string, value: string }]
+        }
     }
-  }
 
-  content: object | string;
+    content: object | string;
 }
 ```
 
 or `IItemTransactionCfg`
 
 ```typescript
 type IItemTransactionCfg = {
-  // by default new Date().getTime() will be used
-  timestamp?: number;
-  // small bit of text next to date
-  tag?: string;
-  name?: string;
-  // viewable on date click
-  meta?: {
-    key: {
-      items: [{ name: string, value: string }]
+    // by default new Date().getTime() will be used
+    timestamp?: number;
+    // small bit of text next to date
+    tag?: string;
+    name?: string;
+    // viewable on date click
+    meta?: {
+        key: {
+            items: [{ name: string, value: string }]
+        }
     }
-  }
 
-  params: object;
+    params: object;
 
-  result: object;
+    result: object;
 }
 ```
 
@@ -166,7 +165,8 @@ All settings are stored locally.
 ## 🤝 Permissions
 
 * `storage` - used to store your custom settings. Does not sync.
-* `content_scripts` - used to extract nextjs/nuxtjs data from page.
+* `content_scripts` - used to extract Nextjs/Nuxtjs data from page.
+* `contextMenus` - used to extract selected text for search
 
 The list may extend in the future.
 

diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Net logs",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "manifest_version": 3,
     "minimum_chrome_version": "88",
     "description": "Extendable network logs debugger",
@@ -12,8 +12,13 @@
         "128": "icons/128.png"
     },
     "permissions": [
-        "storage"
+        "storage",
+        "contextMenus"
     ],
+    "background": {
+      "service_worker": "js/background.js",
+      "type": "module"
+    },
     "sandbox": {
         "pages": [
             "sandbox.html",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "netlogs",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Web extension for custom network logs representation",
     "main": "index.js",
     "author": "artboomy",

diff --git a/src/api/analytics.ts b/src/api/analytics.ts
@@ -1,5 +1,3 @@
-import Error = chrome.cast.Error;
-
 const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
 const GA_DEBUG_ENDPOINT = 'https://www.google-analytics.com/debug/mp/collect';
 import secrets from '../secrets.json';
@@ -125,7 +123,10 @@ class Analytics {
     }
 
     // Fire an error event.
-    async fireErrorEvent(error: Error, additionalParams: Params = {}) {
+    async fireErrorEvent(
+        error: chrome.cast.Error | Error,
+        additionalParams: Params = {}
+    ) {
         // Note: 'error' is a reserved event name and cannot be used
         // see https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?client_type=gtag#reserved_names
         return this.fireEvent('extension_error', {

diff --git a/src/api/runtime.ts b/src/api/runtime.ts
@@ -5,7 +5,7 @@ class SandboxRuntime {
         return {
             manifest_version: 3,
             name: 'Net logs',
-            version: '1.1.0'
+            version: '1.2.0'
         };
     }
 

diff --git a/src/app/panel.ts b/src/app/panel.ts
@@ -1,5 +1,6 @@
 import { wrapSandbox } from '../sandboxUtils';
 import { createEventPayload, isExtension, postSandbox } from '../utils';
+import analytics from '../api/analytics';
 import Port = chrome.runtime.Port;
 
 const tabId = isExtension() && window.chrome.devtools.inspectedWindow.tabId;
@@ -24,6 +25,14 @@ const messageHandler = (
     if (tabId === port.sender?.tab?.id) {
         if (type === 'fromContent') {
             postSandbox(createEventPayload('newItem', e.data));
+            try {
+                const d = JSON.parse(e.data);
+                if (!['NEXT', 'NUXT'].includes(d.tag)) {
+                    analytics.fireEvent('customEvent');
+                }
+            } catch (_e) {
+                // pass
+            }
         }
     }
 };

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { ErrorInfo } from 'react';
+import React, { Component, ErrorInfo } from 'react';
+import { callParentVoid } from '../utils';
 
 type TState = { hasError: boolean; error: Error | null };
 export default class ErrorBoundary extends Component<
@@ -22,6 +22,13 @@ export default class ErrorBoundary extends Component<
             'A following error occurred. This may indicate problems with custom functions or bug in the extension'
         );
         console.error(error, errorInfo);
+        callParentVoid(
+            'analytics.error',
+            JSON.stringify({
+                message: error.message,
+                stack: errorInfo.componentStack
+            })
+        );
     }
 
     render(): React.ReactNode {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -6,6 +6,7 @@ import { TagList } from './TagList';
 import { useSettings } from '../hooks/useSettings';
 import { useListStore } from '../controllers/network';
 import { Link } from './Link';
+import runtime from '../api/runtime';
 
 const useStyles = createUseStyles({
     root: {
@@ -21,6 +22,10 @@ const useStyles = createUseStyles({
     countWrapper: {
         marginLeft: '8px',
         marginRight: 'auto'
+    },
+    version: {
+        fontStyle: 'italic',
+        paddingRight: '4px'
     }
 });
 export const Footer: FC<{
@@ -30,6 +35,7 @@ export const Footer: FC<{
     totalCount?: number;
 }> = ({ value, onValueChange, visibleCount = 0, totalCount = 0 }) => {
     const styles = useStyles();
+    const { version } = runtime.getManifest();
     const isPreserve = useListStore((state) => state.isPreserve);
     const [settings, setSettings] = useSettings();
     const { tagsToolbarVisible } = settings;
@@ -63,6 +69,7 @@ export const Footer: FC<{
                     {visibleCount} / {totalCount} requests
                     {isPreserve && ', log preserved'}
                 </span>
+                <div className={styles.version}>v.{version}</div>
                 <Link
                     text='Github'
                     href='https://github.com/Artboomy/netlogs'

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -23,9 +23,6 @@ const useStyles = createUseStyles({
         alignItems: 'center',
         gap: '8px'
     },
-    version: {
-        fontStyle: 'italic'
-    },
     optionsButton: {
         // marginLeft: 'auto'
     },
@@ -92,7 +89,6 @@ export const Header: FC<IProps> = ({
     onCaseSensitiveChange
 }) => {
     const styles = useStyles();
-    const { version } = runtime.getManifest();
     const clear = useListStore((state) => state.clear);
     const isPreserve = useListStore((state) => state.isPreserve);
     const [secondRowVisible, setSecondRowVisible] = useState(false);
@@ -173,7 +169,6 @@ export const Header: FC<IProps> = ({
                     onClick={doExport}
                     title='Export'
                 />
-                <div className={styles.version}>v.{version}</div>
             </div>
             {secondRowVisible && (
                 <div className={styles.row}>

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -81,5 +81,6 @@ export const ICONS: Record<string, IconButtonProps['icon']> = {
     filter: '-56px 120px',
     panelDown: '-116px 0px',
     panelRight: '136px 168px',
-    panelUp: '136px -72px'
+    panelUp: '136px -72px',
+    inspect: '136px -72px'
 } as const;
diff --git a/src/components/PanelMain.tsx b/src/components/PanelMain.tsx
@@ -15,7 +15,7 @@ import { FilterContext } from '../context/FilterContext';
 import { useHotkey } from '../hooks/useHotkey';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
-import { callParentVoid } from '../utils';
+import { callParentVoid, subscribeParent } from '../utils';
 
 const useStyles = createUseStyles({
     '@global': {
@@ -79,6 +79,13 @@ export const PanelMain: React.FC = () => {
     useEffect(() => {
         callParentVoid('analytics.init');
     }, []);
+
+    useEffect(() => {
+        subscribeParent('searchOnPage', (str) => {
+            setSearchValue(str);
+            callParentVoid('analytics.searchOnPage');
+        });
+    }, []);
     return (
         <DndProvider backend={HTML5Backend}>
             <SettingsContainer>

diff --git a/src/content/background.ts b/src/content/background.ts
@@ -0,0 +1,29 @@
+chrome.runtime.onInstalled.addListener(async () => {
+    chrome.contextMenus.create({
+        id: 'netlogs',
+        title: 'Search in Netlogs',
+        type: 'normal',
+        contexts: ['selection']
+    });
+});
+chrome.contextMenus.onClicked.addListener((item, tab) => {
+    const id = tab && tab.id;
+    if (id && ports[id]) {
+        ports[id].postMessage({
+            type: 'searchOnPage',
+            value: item.selectionText
+        });
+    }
+});
+
+const ports = {};
+
+chrome.runtime.onConnect.addListener(function (port) {
+    if (port.name.startsWith('netlogs-')) {
+        const id = port.name.split('-')[1];
+        ports[id] = port;
+        port.onDisconnect.addListener(() => {
+            delete ports[id];
+        });
+    }
+});
diff --git a/src/sandboxUtils.ts b/src/sandboxUtils.ts
@@ -148,6 +148,12 @@ export async function wrapSandbox(): Promise<void> {
                             entriesCount: Number(data)
                         });
                         break;
+                    case 'analytics.error':
+                        analyticsError(data);
+                        break;
+                    case 'analytics.searchOnPage':
+                        analytics.fireEvent('searchOnPage');
+                        break;
                     default:
                         console.warn(`Unrecognized type ${type}`);
                 }
@@ -156,6 +162,23 @@ export async function wrapSandbox(): Promise<void> {
     });
 }
 
+const portToBackground = window.chrome.runtime.connect({
+    name: `netlogs-${window.chrome.devtools.inspectedWindow.tabId}`
+});
+
+portToBackground.onMessage.addListener((message) => {
+    if (message.type === 'searchOnPage') {
+        postSandbox(createEventPayload('searchOnPage', message.value));
+    }
+});
+
+function analyticsError(data: string) {
+    const { message, stack } = JSON.parse(data);
+    const error = new Error(message);
+    error.stack = stack;
+    analytics.fireErrorEvent(error);
+}
+
 async function analyticsInit() {
     // determine if settings matcher is equal to default settings matcher
     const settings = await chrome.storage.local
@@ -166,9 +189,13 @@ async function analyticsInit() {
     const strSettings = settings.matcher.toString();
     const strDefaultSettings = defaultSettings.matcher.toString();
     // fire event with payload flag
-    analytics.fireEvent('matcherType', {
-        type: strSettings === strDefaultSettings ? 'default' : strSettings
-    });
+    if (strSettings === strDefaultSettings) {
+        analytics.fireEvent('matcherTypeDefault', {});
+    } else {
+        analytics.fireEvent('matcherTypeCustom', {
+            source: `"${strSettings}"`
+        });
+    }
 }
 
 function openTab(data: string) {

diff --git a/src/types.ts b/src/types.ts
@@ -23,7 +23,7 @@ type NetworkEventName =
 
 type DevtoolsEventName = 'devtools.inspectedWindow.reload';
 
-type CustomEventName = 'newItem' | 'download';
+type CustomEventName = 'newItem' | 'download' | 'searchOnPage';
 
 type TabEventName = 'chrome.tabs.create';
 
@@ -32,7 +32,9 @@ type AnalyticsEventName =
     | 'analytics.mimeFilterChange'
     | 'analytics.propTreeViewed'
     | 'analytics.hotkey'
-    | 'analytics.fileOpen';
+    | 'analytics.fileOpen'
+    | 'analytics.error'
+    | 'analytics.searchOnPage';
 
 export type EventName =
     | 'onIframeReady'