Next 3.0.2 (#13) - support dark devtools colour scheme

- change layout: fixed toolbar, scrollable body
- fix messaging in anonymous frames and local html files
- update and improve local build tools

Author: zendive

.prettierignore

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

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "json.schemaDownload.enable": true
-}
+}

Makefile

@@ -0,0 +1,46 @@
+ZIP_FILE="extension.zip"
+HASH_ALG=sha384
+BIN=node_modules/.bin
+
+.PHONY:
+	install all dev prod build format lint clean
+
+install:
+	npm i -g pnpm
+	pnpm i
+
+all: build
+
+dev:
+	NODE_OPTIONS="--loader=ts-node/esm" \
+		$(BIN)/webpack --progress --watch --mode=development
+
+prod:
+	NODE_OPTIONS="--loader=ts-node/esm --no-warnings=ExperimentalWarning" \
+		NODE_ENV="production" \
+		$(BIN)/webpack --mode=production
+
+build:
+	make lint
+	make prod
+	make zip
+	make print_zip_hash
+
+zip:
+	rm -rf $(ZIP_FILE)
+	zip -r $(ZIP_FILE) ./bundle ./manifest.json > /dev/null
+
+print_zip_hash: 
+	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FILE) | openssl base64 -A); \
+		echo "$(ZIP_FILE) $(HASH_ALG):$$FILE_HASH"
+
+format:
+	$(BIN)/prettier . --write
+
+lint:
+	$(BIN)/tsc -noEmit
+
+clean:
+	rm -rf ./node_modules
+	rm -rf $(ZIP_FILE)
+	rm -rf ./bundle/js/

README.md

@@ -29,6 +29,7 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
   - Button to clear current result.
   - Indicator of the last update time.
   - Indicator of a fatal error (out of storage memory).
+  - Devtools light/dark colour scheme support.
 
 - Compare objects between multiple [sub]domains, chrome tabs, or single page reloads.
 
@@ -66,9 +67,7 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
 [i10]: https://github.com/zendive/jsdiff/issues/10
 
-- Compared objects, after being serialized, and stored in `chrome.storage.local` wich has 10MB limit.
-
-- Will not work on `file:///` prorocol and https://chrome.google.com/webstore site.
+- Compared objects, after being serialized, stored in `chrome.storage.local` wich has 10MB limit (before chrome v114 was 5MB).
 
 ### API
 
@@ -102,7 +101,7 @@ console.diffLeft(Date.now());
 console.diffRight(Date.now());
 ```
 
-- **console.diff\_(\*)** - deprecated, left for backward compatibility, uses `nativeClone` based of JSON.parse(JSON.stringify(...)) serialization method
+- **console.diff\_(\*)** - uses deprecated `nativeClone` serialization method, based of JSON.parse(JSON.stringify(...)), left for backward compatibility
 
 ### Usage basics
 
@@ -126,12 +125,11 @@ Historically, left side represents the old state and right side the new state.
 ### How to build
 
 - requires npm/nodejs
-- requires pnpm `npm i -g pnpm`
 
 ```sh
-pnpm i
-pnpm dev # local development
-pnpm zip # make extension.zip
+make install # to install dependencies
+make all # build for prod and make extension.zip
+make dev # local development
 ```
 
 ### Protection

bundle/js/jsdiff-console.js

@@ -1,11 +1,20 @@
 {
-  "name": "console.diff(...)",
-  "description": "Compare objects in memory with console.diff(old, new) devtools function",
-  "version": "3.0.1",
   "manifest_version": 3,
+  "name": "console.diff(...)",
+  "version": "3.0.2",
   "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",
+  "homepage_url": "https://github.com/zendive/jsdiff",
+  "author": "[email protected]",
+  "permissions": ["storage"],
+  "host_permissions": ["*://*/*"],
   "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": [
     {
       "world": "MAIN",
@@ -22,12 +31,5 @@
       "all_frames": true,
       "run_at": "document_start"
     }
-  ],
-  "icons": {
-    "28": "bundle/img/panel-icon28.png",
-    "64": "bundle/img/panel-icon64.png",
-    "128": "bundle/img/panel-icon128.png"
-  },
-  "permissions": ["storage"],
-  "host_permissions": ["*://*/*"]
+  ]
 }