1.7.0

# Features
* JP locale
* New drop overlay
* Help tips are now point at buttons
* Updated Readme

# Deprecations
Custom profiles are no longer supported. 
Settings block is hidden in current version if matcher is default.
Documentation removed.

Author: Artboomy

CUSTOM_PROFILES.md

@@ -2,18 +2,20 @@
 
 ## 🏗️ Building
 
-1. Clone `git clone [email protected]:Artboomy/netlogs.git`
+1. Install node v16.20.2. Newer versions crash the building process.
+2. Clone `git clone [email protected]:Artboomy/netlogs.git`
 
-2. Install dependencies `cd netlogs && yarn`
+3. Install dependencies `cd netlogs && yarn`
 
-3. Build `yarn run build`
+4. Build `yarn run build`
 
-4. Enable developer mode in browser at chrome://extensions/ and click **"Load unpacked"** from `dist` folder.
+5. Enable developer mode in browser at chrome://extensions/ and click **"Load unpacked"** from `dist` folder.
 
-5. You are ready to go! If you don't see the tab in devtools - just reopen it.
+6. You are ready to go! If you don't see the tab in devtools - just reopen it.
 
-6. You can run `yarn run build:watch` for active development.
+7. You can run `yarn run build:watch` for active development.
    _Hot reload won't work, you'll need to manually reopen devtools on every change._
+8. Sometimes pressing the "Reload extension" is needed. Usually when modifying background script.
 
 ## 📦 Packaging
 

LOCAL_DEVELOPMENT.md

@@ -7,7 +7,7 @@
 
 [Install for Chrome/Edge](https://chrome.google.com/webstore/detail/net-logs/cjdmhjppaehhblekcplokfdhikmalnaf)
 
-This is extendable network request viewer extension for Chromium-based browsers.
+This is a more high-level version of a Network tab for easier debugging.
 
 ## 💡 Features
 
@@ -16,7 +16,7 @@ The extension will appear in devtools as a `📜 Net logs` tab.
 * 🔍 **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.
+* 📡 **WebSocket Listening**: Capture and analyze WebSocket traffic in real-time.
 * ✨ **Log Viewing**: Analyze live or import logs from HAR/*.netlogs.zip files.
 * 🤝 **Collaboration**: Export and share logs for team debugging.
 
@@ -45,10 +45,6 @@ Features: method extraction, result unwrapping, coloring for error responses.
 
 ![json-rpc.png](./img/json-rpc.png)
 
-### Custom profiles
-
-If you need custom request/response processing, please refer to the [documentation](CUSTOM_PROFILES.md).
-
 ## ⛰️ [Next.js](https://nextjs.org/) and [NuxtJS](https://nuxtjs.org/) debugging
 
 ![next.png](./img/next.png)
@@ -139,34 +135,30 @@ page**.
 
 ## 🐜Troubleshooting
 
-If something goes wrong and functions crash the view, do the following:
-
-1. [Export a *.har log](https://developer.chrome.com/docs/devtools/network/reference/#save-as-har) from network tab
-2. Open options page
-3. Drop exported log in the interactive demo
-4. Open console
-
-You should see the errors in the console.
+If something goes wrong:
 
-Alternatively, you can open a devtools on the devtools. To do so, undock the devtools and press `Ctrl+Shift+J`, or press
-right-click and choose `Inpsect`.
+1. Reopen the devtools
+2. Try to fully close and open browser
 
-This will open new debugger window, where you can find console log with errors.
+If the issue persist -
+please [open new bug report](https://github.com/Artboomy/netlogs/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=%5BBUG%5D).
+Make sure to include *.har file if possible.
 
 ## 🔐 Security & privacy
 
-All your custom javascript runs in
+Extension panel runs in
 a [sandbox environment](https://developer.chrome.com/docs/extensions/mv2/manifest/sandbox/).
 
-Extension does not transmit any data to the servers.
+Extension collects anonymous analytics with Google Analytics 4. You can opt out in the Options.
 
 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
+* `debugger` - used for WebSocket listening.
 
 The list may extend in the future.
 

README.md

@@ -0,0 +1,5 @@
+{
+  "searchIn": {
+    "message": "Netlogsで検索"
+  }
+}

dist/_locales/ja/messages.json

@@ -1,6 +1,6 @@
 {
     "name": "Net logs",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "default_locale": "en",
     "manifest_version": 3,
     "minimum_chrome_version": "88",

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "netlogs",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "description": "Web extension for custom network logs representation",
     "main": "index.js",
     "author": "artboomy",

package.json

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

src/api/runtime.ts

@@ -1,4 +1,4 @@
-import { wrapSandbox } from '../sandboxUtils';
+import { wrapSandbox } from 'sandboxUtils';
 import { createEventPayload, isExtension, postSandbox } from '../utils';
 import analytics from '../api/analytics';
 import Port = chrome.runtime.Port;

src/app/panel.ts

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ListDemo } from '../components/list/Demo';
-import { callParent } from '../utils';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { ListDemo } from 'components/list/Demo';
+import { callParent } from 'utils';
+import { SettingsContainer } from 'components/SettingsContainer';
+import { ThemeProvider } from 'react-jss';
+import { theme } from 'theme/light';
 
 const SandboxListDemo = () => {
     return (
         <SettingsContainer>
-            <ListDemo />
+            <ThemeProvider theme={theme}>
+                <ListDemo />
+            </ThemeProvider>
         </SettingsContainer>
     );
 };

src/app/sandboxSettings.tsx

@@ -94,5 +94,6 @@ export const ICONS: Record<string, IconButtonProps['icon']> = {
     panelUp: '136px -72px',
     debugOff: '-172px 264px',
     debugOn: '-88px 24px',
-    inspect: '136px -72px'
+    inspect: '136px -72px',
+    drop: '52px -72px'
 } as const;

src/components/IconButton.tsx

@@ -100,6 +100,9 @@ const useStyles = createUseStyles<Theme>((theme) => ({
     profilesBlock: {
         height: '100%'
     },
+    hidden: {
+        display: 'none'
+    },
     titleRow: {
         display: 'flex',
         alignItems: 'baseline',
@@ -163,6 +166,7 @@ export const Options: FC = () => {
     const [matcher, setMatcher] = useState<ISettingsSerialized['matcher']>(
         settings.matcher.toString()
     );
+    const isDefaultMatcher = Object.keys(settings.profiles).length === 3;
 
     useEffect(() => {
         const newFunctions = Object.assign(
@@ -282,6 +286,7 @@ export const Options: FC = () => {
                     <option value='es-ES'>Español</option>
                     <option value='hi'>हिंदी</option>
                     <option value='zh-CN'>中文</option>
+                    <option value='ja-JP'>日本語</option>
                 </select>
             </section>
 
@@ -422,7 +427,10 @@ export const Options: FC = () => {
                 <h2>{i18n.t('hiddenTags')}</h2>
                 <HiddenTagList />
             </section>
-            <section className={cn(styles.block, styles.profilesBlock)}>
+            <section
+                className={cn(styles.block, styles.profilesBlock, {
+                    [styles.hidden]: isDefaultMatcher
+                })}>
                 <h2>{i18n.t('profiles')}</h2>
                 <section className={styles.root}>
                     <div className={styles.left}>

src/components/Options.tsx

@@ -12,9 +12,9 @@ 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 { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
-import { callParentVoid, subscribeParent } from 'utils';
+import { callParent, callParentVoid, subscribeParent } from 'utils';
 import { Theme } from 'theme/types';
 import { useSettings } from 'hooks/useSettings';
 
@@ -96,7 +96,16 @@ export const PanelMain: React.FC = () => {
     }, [language]);
 */
     useEffect(() => {
-        callParentVoid('analytics.init');
+        callParent('analytics.init').then((isDefault) => {
+            if (isDefault !== 'true') {
+                toast.warning(
+                    'Custom profiles support is DEPRECATED and will be REMOVED in the next version',
+                    {
+                        autoClose: false
+                    }
+                );
+            }
+        });
     }, []);
 
     useEffect(() => {

src/components/PanelMain.tsx

@@ -1,32 +1,54 @@
 import React, { FC } from 'react';
-import { useListStore } from '../../controllers/network';
+import { useListStore } from 'controllers/network';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
-import { isFileSupported, parseFile } from '../../controllers/file';
+import { isFileSupported, parseFile } from 'controllers/file';
 import { Har } from 'har-format';
 import NetworkItem from '../../models/NetworkItem';
 import cn from 'classnames';
 import { createUseStyles } from 'react-jss';
 import ContentOnlyItem from '../../models/ContentOnlyItem';
-import { ItemType } from '../../models/types';
+import { ItemType } from 'models/types';
 import TransactionItem from '../../models/TransactionItem';
 import { toast } from 'react-toastify';
-import { callParentVoid } from '../../utils';
+import { callParentVoid } from 'utils';
 import WebSocketItem from '../../models/WebSocketItem';
-import { i18n } from '../../translations/i18n';
+import { i18n } from 'translations/i18n';
+import largeIcons from 'icons/largeIcons.svg';
+import { ICONS } from 'components/IconButton';
+import { Theme } from 'theme/types';
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles<Theme>((theme) => ({
     dropZone: {
         height: '100%',
         width: '100%',
         boxSizing: 'border-box',
-        overflow: 'auto',
-        border: '4px solid transparent'
+        overflow: 'auto'
     },
-    dropZoneActive: {
-        border: '4px dashed #ccc'
+    overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '2em',
+        backdropFilter: 'blur(2px)'
+    },
+    icon: {
+        backgroundColor: theme.icon.normal,
+        width: '21px',
+        height: '24px',
+        scale: 3,
+        transform: 'translateY(-4px)',
+        '-webkit-mask-position': ICONS.drop as `${number}px ${number}px`,
+        '-webkit-mask-image': `url(${largeIcons})`
     }
-});
+}));
 
 export const DropContainer: FC = ({ children }) => {
     const styles = useStyles();
@@ -105,10 +127,15 @@ export const DropContainer: FC = ({ children }) => {
         <div
             ref={dropRef}
             className={cn({
-                [styles.dropZone]: true,
-                [styles.dropZoneActive]: canDrop && isOver
+                [styles.dropZone]: true
             })}>
             {children}
+            {canDrop && isOver && (
+                <div className={styles.overlay}>
+                    <div className={styles.icon} />
+                    {i18n.t('drop')}
+                </div>
+            )}
         </div>
     );
 };