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