1.0.1

feat: toast notifications on import, on export (#19)

fix: edge devtools icon
fix: put requests decode
fix: mime filter in loaded logs
fix: links changed to tabs.create to avoid origin:null

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Net logs",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "manifest_version": 3,
     "minimum_chrome_version": "88",
     "description": "Extendable network logs debugger",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "netlogs",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "Web extension for custom network logs representation",
     "main": "index.js",
     "author": "artboomy",
@@ -40,6 +40,7 @@
         "react-inspector": "https://github.com/Artboomy/react-inspector/releases/download/5.3.5/react-inspector-5.3.5.tgz",
         "react-jss": "10.5.0",
         "react-multi-select-component": "^4.3.4",
+        "react-toastify": "9.1.3",
         "react-use": "17.2.4",
         "zustand": "3.3.3"
     },

src/api/runtime.ts

@@ -5,7 +5,7 @@ class SandboxRuntime {
         return {
             manifest_version: 3,
             name: 'Net logs',
-            version: '1.0.0'
+            version: '1.0.1'
         };
     }
 

src/app/devtools.ts

@@ -1 +1,2 @@
-chrome.devtools.panels.create('📜 Net logs', 'icons/16.png', 'panel.html');
+const title = navigator.userAgent.includes('Edg') ? 'Net logs' : '📜 Net logs';
+chrome.devtools.panels.create(title, 'icons/16', 'panel.html');

src/components/Header.tsx

@@ -5,10 +5,11 @@ import { useListStore } from '../controllers/network';
 import runtime from '../api/runtime';
 import { theme } from '../theme/light';
 import { Har } from 'har-format';
-import { callParentVoid, isExtension } from '../utils';
+import { callParent, isExtension } from '../utils';
 import { IconButton, ICONS } from './IconButton';
 import { useHotkey } from '../hooks/useHotkey';
 import { MimetypeSelect } from './MimetypeSelect';
+import { toast } from 'react-toastify';
 
 const useStyles = createUseStyles({
     root: {
@@ -65,12 +66,19 @@ const doExport = () => {
             comment: 'Format: http://www.softwareishard.com/blog/har-12-spec/'
         }
     };
-    callParentVoid(
-        'download',
-        JSON.stringify({
-            fileName: getFileName(),
-            data: JSON.stringify(fileData)
-        })
+    toast.promise(
+        callParent(
+            'download',
+            JSON.stringify({
+                fileName: getFileName(),
+                data: JSON.stringify(fileData)
+            })
+        ),
+        {
+            pending: 'Exporting...',
+            success: 'Exported',
+            error: 'Error exporting'
+        }
     );
 };
 

src/components/Link.tsx

@@ -1,12 +1,19 @@
 import React, { FC } from 'react';
+import { callParentVoid } from '../utils';
 
 type LinkProps = {
     text: string;
     href: string;
 };
 export const Link: FC<LinkProps> = ({ text, href }) => {
+    const handleClick = (event: React.MouseEvent) => {
+        event.preventDefault();
+        callParentVoid('chrome.tabs.create', href);
+        return false;
+    };
+
     return (
-        <a href={href} target='_blank' rel='noopener noreferrer'>
+        <a href={href} onClick={handleClick}>
             {text}
         </a>
     );

src/components/PanelMain.tsx

@@ -13,6 +13,8 @@ import useDebounce from 'react-use/lib/useDebounce';
 import { Footer } from './Footer';
 import { FilterContext } from '../context/FilterContext';
 import { useHotkey } from '../hooks/useHotkey';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
 
 const useStyles = createUseStyles({
     '@global': {
@@ -108,6 +110,7 @@ export const PanelMain: React.FC = () => {
                                 />
                             </FilterContext.Provider>
                         </SearchContext.Provider>
+                        <ToastContainer />
                     </div>
                 </ModalContainer>
             </SettingsContainer>

src/components/Section.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import { createUseStyles } from 'react-jss';
 import { theme } from '../theme/light';
+import cn from 'classnames';
 
 type TItem = {
     name: string;
@@ -22,9 +23,17 @@ const useStyles = createUseStyles({
     key: {
         fontWeight: 'bold',
         color: theme.section.key
+    },
+    valueNumber: {
+        color: 'rgb(28, 0, 207)'
+    },
+    valueString: {
+        color: 'rgb(196, 26, 22)'
     }
 });
 
+const isQuoted = (s: unknown) =>
+    typeof s === 'string' && s.startsWith('"') && s.endsWith('"');
 export const Section: FC<TSection> = ({ title, items }) => {
     const styles = useStyles();
     return (
@@ -34,7 +43,16 @@ export const Section: FC<TSection> = ({ title, items }) => {
             </summary>
             {items.map(({ name, value }, index) => (
                 <div key={`${name}${index}`} className={styles.item}>
-                    <span className={styles.key}>{name}</span>: {value}
+                    <span className={styles.key}>{name}</span>:{' '}
+                    <span
+                        className={cn({
+                            [styles.valueString]: isQuoted(value),
+                            [styles.valueNumber]:
+                                typeof value === 'number' ||
+                                !isNaN(Number(value))
+                        })}>
+                        {value}
+                    </span>
                 </div>
             ))}
         </details>