enya: the humming

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

@@ -69,6 +69,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,7 +115,7 @@ 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
+### How it works (in chrome mv3)
 
 ![screenshot](./doc/design.png)
 
@@ -123,15 +125,15 @@ Historically, left side represents the old state and right side the new state.
 
 ```sh
 make install # to install dependencies
-make all # build for prod and make extension.zip
+make all # build for prod and make extension.${browser}.zip
 make tune2chrome # or tune2firefox for relevant manifest
 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:

package.json

@@ -13,6 +13,7 @@
   },
   "keywords": [
     "devtools",
+    "diff",
     "chrome",
     "extension"
   ],
@@ -25,22 +26,24 @@
   "type": "module",
   "devDependencies": {
     "@types/chrome": "0.0.256",
+    "@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.13",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "6.9.0",
     "diff-match-patch": "^1.0.5",
     "esbuild": "0.19.11",
     "esbuild-loader": "4.0.2",
     "jsondiffpatch": "0.6.0",
-    "prettier": "3.1.1",
+    "pinia": "^2.1.7",
+    "prettier": "3.2.2",
     "sass": "1.69.7",
     "sass-loader": "13.3.3",
     "style-loader": "3.3.4",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vue": "3.4.9",
+    "vue": "3.4.13",
     "vue-loader": "17.4.2",
     "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.10.1",