unify interface and functionality between chrome and firefox hosts

Author: zendive

.gitignore

@@ -11,5 +11,6 @@ node_modules/
 # application autogenerated files not for git
 *.js.map
 *.zip
+*.crx
 manifest.json
 bundle/js

.vscode/settings.json

@@ -6,5 +6,6 @@
       "fileMatch": ["manifest.json"],
       "url": "https://json.schemastore.org/chrome-manifest.json"
     }
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

README.md

@@ -5,14 +5,20 @@
 Chrome extension to compare objects in memory with console.diff(old, new) devtools function.
 
 <details>
-  <summary> <strong>Screenshots</strong> </summary>
+  <summary> <strong>Examples</strong> </summary>
 
 - Comparing two objects
   ![screenshot](./doc/screenshot-01.png)
 
 - Tracking changes in localStorage (unchanged are hidden)
   ![screenshot](./doc/screenshot-02.png)
 
+</details>
+<details>
+  <summary> <strong>How it works (in chrome mv3)</strong> </summary>
+
+![screenshot](./doc/design.png)
+
 </details>
 
 ### Based on
@@ -35,7 +41,7 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
   - JSDiff devtools panel reflects current state of comparison, regardless the tab[s] it was opened from.
 
-- Basic integration with search functionality within devtools:
+- Internal search inside comparison results
 
   - If search query contains at least one upper-case letter - the search will be case-sensitive.
 
@@ -69,6 +75,8 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
 - Compared objects, after being serialized, stored in `chrome.storage.local` wich has 10MB limit (before chrome v114 was 5MB).
 
+- In Firefox the API is under `jsdiff` object for now, cause extension API's not fully compatible.
+
 ### API
 
 - **console.diff(left, right)** - compare left and right arguments
@@ -113,25 +121,21 @@ Historically, left side represents the old state and right side the new state.
 
 - To track changes of the same variable in timed manner you can push it with `diffPush` or `diff` with a single argument, - that will shift objects from right to left, showing differences with previous push state.
 
-### How it works
-
-![screenshot](./doc/design.png)
-
 ### How to build
 
 - requires npm/nodejs
 
 ```sh
 make install # to install dependencies
-make all # build for prod and make extension.zip
-make tune2chrome # or tune2firefox for relevant manifest
+make all # build for prod and make extension.${browser}.zip
+make tune2chrome # or tune2firefox for relevant manifest.json file
 make dev # local development
 ```
 
 ### Protection
 
 - How to protect your site from this extension:
-  - Well, tests show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
+  - Well, tests on chrome show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
   - Avoid assigning to `window` or `globalThis` any application object.
     See also [accidental global variables and memory leaks](https://www.tutorialspoint.com/explain-in-detail-about-memory-leaks-in-javascript).
   - In general, you can incapacitate console functions:

doc/design.plantuml

@@ -53,8 +53,8 @@ Panel ->o]: Display result
 deactivate Panel
 
 === Search in DevTools Panel ==
-[-> User: ctrl+F\ncmd+F
-User -> Panel: jsdiff-devtools-to-panel-search
+User -> Panel: ^+F\n⌘+F
+
 activate Panel
 Panel -> Panel: search in DOM
 Panel ->o]: Display result

doc/design.png

@@ -13,6 +13,7 @@
   },
   "keywords": [
     "devtools",
+    "diff",
     "chrome",
     "extension"
   ],
@@ -24,25 +25,27 @@
   "homepage": "https://github.com/zendive/jsdiff#readme",
   "type": "module",
   "devDependencies": {
-    "@types/chrome": "0.0.256",
+    "@types/chrome": "0.0.259",
+    "@types/diff-match-patch": "^1.0.36",
     "@types/firefox-webext-browser": "120.0.0",
     "@types/webpack-bundle-analyzer": "4.6.3",
-    "@vue/compiler-sfc": "3.4.9",
+    "@vue/compiler-sfc": "3.4.15",
     "clean-webpack-plugin": "4.0.0",
-    "css-loader": "6.9.0",
+    "css-loader": "6.10.0",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "0.19.11",
-    "esbuild-loader": "4.0.2",
-    "jsondiffpatch": "0.6.0",
-    "prettier": "3.1.1",
-    "sass": "1.69.7",
-    "sass-loader": "13.3.3",
+    "esbuild": "0.20.0",
+    "esbuild-loader": "4.0.3",
+    "jsondiffpatch": "^0.6.0",
+    "pinia": "^2.1.7",
+    "prettier": "3.2.4",
+    "sass": "1.70.0",
+    "sass-loader": "14.1.0",
     "style-loader": "3.3.4",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vue": "3.4.9",
+    "vue": "3.4.15",
     "vue-loader": "17.4.2",
-    "webpack": "5.89.0",
+    "webpack": "5.90.0",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4"
   },