v3.0.5 (#22)

- Firefox support
- Move search invocation into panel page
- Toolbar UI changes

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: zendive

.gitignore

@@ -8,9 +8,9 @@ node_modules/
 # os
 .DS_Store
 
-# typescript output
-.ts-built
-
-# application files not for git
+# application autogenerated files not for git
 *.js.map
 *.zip
+*.crx
+manifest.json
+bundle/js

.prettierignore

@@ -1,4 +1,3 @@
 /bundle/js
-.ts-built
 *.min.js
 pnpm-lock.yaml

.vscode/settings.json

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

Makefile

@@ -1,22 +1,25 @@
-ZIP_FILE="extension.zip"
+ZIP_CHROME_FILE="extension.chrome.zip"
+ZIP_FIREFOX_FILE="extension.firefox.zip"
 HASH_ALG="sha384"
 
 .PHONY:
-	install clean all lint dev prod zip
+	install clean all lint dev prod zip_chrome zip_firefox
+	tune2chrome tune2firefox
 
 install:
 	npm i -g pnpm
 	pnpm i
 
 clean:
 	rm -rf ./node_modules
-	rm -rf $(ZIP_FILE)
+	rm -rf $(ZIP_CHROME_FILE) $(ZIP_FIREFOX_FILE)
 	rm -rf ./bundle/js/
 
 all:
 	make lint
 	make prod
-	make zip
+	make zip_chrome
+	make zip_firefox
 
 lint:
 	npx prettier . --write
@@ -27,12 +30,28 @@ dev:
 		npx webpack --progress --watch --mode=development
 
 prod:
+	rm -rf ./bundle/js/
 	NODE_OPTIONS="--loader=ts-node/esm --no-warnings=ExperimentalWarning" \
 		NODE_ENV="production" \
 		npx webpack --mode=production
 
-zip:
-	rm -rf $(ZIP_FILE)
-	zip -r $(ZIP_FILE) ./bundle ./manifest.json > /dev/null
-	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FILE) | openssl base64 -A); \
-		echo "$(ZIP_FILE) $(HASH_ALG):$$FILE_HASH"
+zip_chrome:
+	make tune2chrome
+	rm -rf $(ZIP_CHROME_FILE)
+	zip -r $(ZIP_CHROME_FILE) ./bundle ./manifest.json > /dev/null
+	zip --delete $(ZIP_CHROME_FILE) "bundle/js/firefox/*"
+	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_CHROME_FILE) | openssl base64 -A); \
+		echo "$(ZIP_CHROME_FILE) $(HASH_ALG):$$FILE_HASH"
+
+zip_firefox:
+	make tune2firefox
+	rm -rf $(ZIP_FIREFOX_FILE)
+	zip -r $(ZIP_FIREFOX_FILE) ./bundle ./manifest.json > /dev/null
+	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FIREFOX_FILE) | openssl base64 -A); \
+		echo "$(ZIP_FIREFOX_FILE) $(HASH_ALG):$$FILE_HASH"
+
+tune2chrome:
+	cp manifest.chrome.json manifest.json
+
+tune2firefox:
+	cp manifest.firefox.json manifest.json

README.md

@@ -1,18 +1,27 @@
-### ![](./src/img/panel-icon28.png) console.diff()
+### ![](./bundle/img/panel-icon28.png) console.diff()
 
 [![console.diff()](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/tbyBjqi7Zu733AAKA5n4.png)](https://chrome.google.com/webstore/detail/jsdiff-devtool/iefeamoljhdcpigpnpggeiiabpnpgonb)
 
 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</strong> </summary>
+
+- Chrome mv3
+  ![screenshot](./doc/design.chrome.png)
+- Firefox
+  ![screenshot](./doc/design.firefox.png)
+
 </details>
 
 ### Based on
@@ -35,7 +44,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 +78,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,24 +124,24 @@ 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
+Requires
+
+- Linux
+- node 20.10 (LTS)
 
 ```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.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:

bundle/js/jsdiff-console.js

@@ -31,12 +31,12 @@ end box
 User -> Console: console.diff(...)
 
 activate Console
-Console -> Proxy: jsdiff-console-to-proxy-inprogress
+Console -> Proxy: jsdiff-console-\nto-proxy-inprogress
 activate Proxy
   Proxy -> Panel: jsdiff-proxy-to-panel-inprogress
 deactivate Proxy
 Console o->o Console: clone arguments
-Console -> Proxy: jsdiff-console-to-proxy-compare
+Console -> Proxy: jsdiff-console-\nto-proxy-compare
 deactivate Console
 
 activate Proxy
@@ -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

bundle/js/jsdiff-devtools.js

@@ -0,0 +1,71 @@
+@startuml Design
+skinparam style strictuml
+
+box "Devtools"
+actor "User" as User
+end box
+
+box "Firefox Runtime Context"
+participant Console [
+  =Console
+  ----
+  content script
+]
+participant Proxy [
+  =Proxy
+  ----
+  content script
+]
+participant Background [
+  =Background
+]
+database Storage
+participant Panel [
+  =Panel
+  ----
+  DevTools View
+]
+end box
+
+[-> User: Open Devtools
+
+Background <- Panel: jsdiff-devtools-page-connect
+activate Background
+Background <-- Panel: keep alive
+
+=== Invoke API ==
+User -> Console: jsdiff.diff(...)
+activate Console
+  Console -> Proxy: jsdiff-console-\nto-proxy-inprogress
+  activate Proxy
+    Proxy -> Background: jsdiff-proxy-to-panel-inprogress
+  deactivate Proxy
+  Console o->o Console: clone arguments
+  Console -> Proxy: jsdiff-console-\nto-proxy-compare
+deactivate Console
+
+activate Proxy
+  Proxy o<->o Proxy: arrange payload
+  Proxy -> Storage: write payload
+  Proxy --> Background: jsdiff-proxy-to-panel-error
+  Proxy -> Background: jsdiff-proxy-to-panel-compare
+deactivate Proxy
+Background -> Panel: relay all messages
+
+deactivate Background
+
+activate Panel
+  Storage -> Panel: read payload
+  Panel -> Panel: Compare objects
+  Panel ->o]: Display result
+deactivate Panel
+
+=== Search in DevTools Panel ==
+User -> Panel: ^+F\n⌘+F
+
+activate Panel
+  Panel -> Panel: search in DOM
+  Panel ->o]: Display result
+deactivate Panel
+
+@enduml

bundle/js/jsdiff-panel.js

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "console.diff(...)",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAlCx2Bl0li+3idvfrH9cQL/MzphafGFqMUA2P+0vbyhwxsxWl0llOaGQbkirX5qCoAVHoUCPqu3hCjpVCv35igPbfqDs5bdLZZmXt2F0HjEQnWI/eZKd9IKcKYMplEeL2BodmpU02VrP1UnUzQHZeeMWk9ybgWOqCimkwliILVubRj5dxNB9AidLwO4Z5iGq/OvW9AJMYdxKxrLP2lF6/GGNcCBg+iCJZwlQOhFB9LbUjytT4ws3bIEX4b5zmWLqGKR1NiZfGug2eCWXt9oEKg2WkbXmBBzFKqxnM/bBUrVR29N9qNgx0f42qnyhsW3Bo4kPzE3d0asXCV5nofLTLEwIDAQAB",
   "description": "Compare objects in memory with console.diff(old, new) devtools function",
   "minimum_chrome_version": "100.0",

bundle/js/jsdiff-proxy.js

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "jsdiff.diff(...)",
+  "version": "3.0.5",
+  "description": "Compare objects in memory with jsdiff.diff(old, new) devtools function",
+  "minimum_chrome_version": "100.0",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "calexblock@gmail.com",
+      "strict_min_version": "120.0"
+    }
+  },
+  "homepage_url": "https://github.com/zendive/jsdiff",
+  "author": "calexblock@gmail.com",
+  "permissions": ["storage", "devtools", "activeTab"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "scripts": ["bundle/js/firefox/jsdiff-background.js"]
+  },
+  "devtools_page": "bundle/jsdiff-devtools.html",
+  "icons": {
+    "28": "bundle/img/panel-icon28.png",
+    "64": "bundle/img/panel-icon64.png",
+    "128": "bundle/img/panel-icon128.png"
+  },
+  "content_scripts": [
+    {
+      "js": ["bundle/js/jsdiff-console.js", "bundle/js/jsdiff-proxy.js"],
+      "matches": ["*://*/*"],
+      "all_frames": true,
+      "run_at": "document_start"
+    }
+  ]
+}

doc/design.plantuml renamed to doc/design.chrome.plantuml

@@ -1,6 +1,6 @@
 {
   "name": "jsdiff",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Chrome extension to compare objects in memory with console.diff(old, new) devtools function",
   "private": true,
   "scripts": {
@@ -13,41 +13,43 @@
   },
   "keywords": [
     "devtools",
+    "diff",
     "chrome",
     "extension"
   ],
   "author": "Block Alexander",
-  "license": "proprietary",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/zendive/jsdiff/issues"
   },
   "homepage": "https://github.com/zendive/jsdiff#readme",
   "type": "module",
   "devDependencies": {
-    "@types/chrome": "0.0.251",
+    "@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.3.8",
+    "@vue/compiler-sfc": "3.4.15",
     "clean-webpack-plugin": "4.0.0",
-    "css-loader": "6.8.1",
-    "esbuild": "0.19.5",
-    "esbuild-loader": "4.0.2",
-    "jsondiffpatch": "0.5.0",
-    "prettier": "3.0.3",
-    "sass": "1.69.5",
-    "sass-loader": "13.3.2",
-    "style-loader": "3.3.3",
-    "ts-node": "10.9.1",
-    "typescript": "5.2.2",
-    "vue": "3.3.8",
-    "vue-loader": "17.3.1",
-    "webpack": "5.89.0",
-    "webpack-bundle-analyzer": "4.9.1",
+    "css-loader": "6.10.0",
+    "diff-match-patch": "^1.0.5",
+    "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.15",
+    "vue-loader": "17.4.2",
+    "webpack": "5.90.0",
+    "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4"
   },
   "pnpm": {
-    "overrides": {
-      "postcss@<8.4.31": ">=8.4.31",
-      "semver@>=7.0.0 <7.5.2": ">=7.5.2"
-    }
+    "overrides": {}
   }
 }