v3.0.0

.gitignore

@@ -61,4 +61,7 @@ typings/
 .DS_Store
 
 *.zip
-package-lock.json
+*.js.map
+
+# typescript output
+.ts-built

.prettierignore

@@ -0,0 +1,3 @@
+/src/js/bundle
+.ts-built
+*.min.js

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -1,46 +1,96 @@
 ### ![](./src/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 devtools extension intended to display result of deep in-memory object
 comparisons with the help of dedicated console commands.
 
+<details>
+  <summary> <strong>Screenshots</strong> </summary>
+
+- Comparing two objects
+  ![screenshot](./src/img/screenshot-01.png)
+
+- Tracking changes in localStorage (unchanged are hidden)
+  ![screenshot](./src/img/screenshot-02.png)
+
+</details>
+
+### Based on
+
+- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
+- [vuejs](https://github.com/vuejs) by Evan You
+
 ### Features
-* compare objects from multiple tabs and/or between page reloads
-* function code included in comparison result in form of a string, may help to see if it was altered
-* document, dom-elements and other non-serializable objects are filtered-out from the results
-* self recurring references displayed only once, the rest of occurrences are filtered-out  
+
+- compare objects from multiple tabs and/or between page reloads
+- function code included in comparison result in form of a string, may help to see if it was altered
+- document, dom-elements and other non-serializable objects are filtered-out from the results
+- self recurring references displayed only once, the rest of occurrences are filtered-out
+- basic integration with search functionality within devtools
+  - if search query contains upper-case letter - the search will be case-sensitive
+
+### Limitations and workarounds
+
+- some instances of objects may cause exception during preparations for comparison
+  - try to narrow compared contexts
+  - if it's some Browser API that causes an exception and not a framework, consider opening an issue,
+    so it will be possible to solve it on a permanent basis
+- while paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed ([#10][i10])
+
+[i10]: https://github.com/zendive/jsdiff/issues/10
 
 ### API
+
+- **console.diff(left, right)** - compare left and right arguments
+
 ```javascript
-console.diff(left, right);  // compare left and right
-console.diff(next);         // shorthand of diffPush while single argumented
-console.diffLeft(left);     // update object on the left side only
-console.diffRight(right);   // update object on the right side only
-console.diffPush(next);     // shifts sides, right becomes left, next becomes right
+console.diff({ a: 1, b: 1, c: 3 }, { a: 1, b: 2, d: 3 });
+```
+
+- **console.diffPush(next)** - shifts sides, right becomes left, next becomes right
+
+```javascript
+console.diffPush(Date.now());
+```
+
+- **console.diff(next)** - shorthand for `diffPush`
+
+```javascript
+console.diff(Date.now());
+```
+
+- **console.diffLeft(left)** - update the old value only
+
+```javascript
+console.diffLeft(Date.now());
+```
+
+- **console.diffRight(right)** - update the new value only
+
+```javascript
+console.diffRight(Date.now());
 ```
 
 ### Usage basics
+
 Historically, left side represents the old state and right side the new state.
-* Things that are present on the left side but missing on the right side are colour-coded as red (old).
-* Things that are missing on the left side but present on the right side are colour-coded as green (new).
+
+- Things that are present on the left side but missing on the right side are colour-coded as red (old).
+- Things that are missing on the left side but present on the right side are colour-coded as green (new).
 
 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.
+with a single argument, that will shift objects from right to left, showing differences with previous push state.
 
 ### How it works
-* `jsdiff-devtools` registers devtools panel
-  * injects console commands that send data to `jsdiff-proxy` 
-  * injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
-* when `console.diff` command invoked
-  * argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
-  * `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
-* when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
-and displays it
-
-### Screenshot
-![screenshot](./src/img/screenshot-01.png)
 
-### Based on
-- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
-- [vuejs](https://github.com/vuejs) by Evan You
+- `jsdiff-devtools.js` registers devtools panel
+  - injects `console.diff` commands into inspected window's console interface
+    - each function clones arguments and sends them via `postMessage` to `jsdiff-proxy.js` in `jsdiff-console-to-proxy` message
+  - injects `jsdiff-proxy.js` that listens on window `jsdiff-console-to-proxy` message and sends it further to chrome runtime in `jsdiff-proxy-to-devtools` message
+  - listens on `jsdiff-proxy-to-devtools` and prepares payload for `vue/panel.js` and sends it with `jsdiff-devtools-to-panel-compare` message
+  - when user invokes devtools search command - informs `vue/panel.js` with `jsdiff-devtools-to-panel-search` message
+- when `vue/panel.js` is visible in devtools
+  - reflects result of last compare request
+  - listens on `jsdiff-devtools-to-panel-compare` requests
+  - listens on `jsdiff-devtools-to-panel-search` and tries to find query in DOM

manifest.json

@@ -1,26 +1,15 @@
 {
   "name": "console.diff(...)",
-  "description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
-  "version": "2.0",
-  "manifest_version": 2,
-  "minimum_chrome_version": "64.0",
+  "description": "Compare in-memory objects and see the result inside devtools panel with a set of console.diff functions.",
+  "version": "3.0.0",
+  "manifest_version": 3,
+  "minimum_chrome_version": "66.0",
   "devtools_page": "src/jsdiff-devtools.html",
   "icons": {
     "28": "src/img/panel-icon28.png",
     "64": "src/img/panel-icon64.png",
     "128": "src/img/panel-icon128.png"
   },
-  "background": {
-    "persistent": false,
-    "scripts": [
-      "src/js/jsdiff-background.js"
-    ]
-  },
-  "content_security_policy": "script-src 'self'; object-src 'self'",
-  "permissions": [
-    "http://*/*",
-    "https://*/*",
-    "file:///*",
-    "clipboardWrite"
-  ]
+  "permissions": ["storage", "scripting", "activeTab", "clipboardWrite"],
+  "host_permissions": ["*://*/*"]
 }

package.json

@@ -1,15 +1,16 @@
 {
   "name": "jsdiff",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "![jsdiff](./src/img/panel-icon64.png) --- Chrome devtools extension intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.",
   "private": true,
   "directories": {
     "doc": "doc"
   },
   "scripts": {
     "test": "echo \"no test\" && exit 1",
-    "dev": "webpack --progress --watch",
-    "prod": "webpack --progress -p"
+    "dev": "webpack --progress --watch --mode=development",
+    "prod": "NODE_ENV=production webpack --mode=production",
+    "format": "prettier . --write"
   },
   "repository": {
     "type": "git",
@@ -26,21 +27,23 @@
     "url": "https://github.com/zendive/jsdiff/issues"
   },
   "homepage": "https://github.com/zendive/jsdiff#readme",
+  "type": "module",
   "devDependencies": {
-    "clean-webpack-plugin": "~1.0.1",
-    "css-loader": "~2.1.0",
-    "file-loader": "^3.0.1",
-    "node-sass": "~4.14.1",
-    "sass-loader": "~7.1.0",
-    "style-loader": "~0.23.1",
-    "vue-loader": "~15.6.2",
-    "vue-template-compiler": "~2.6.6",
-    "webpack": "~4.29.0",
-    "webpack-cli": "~3.2.1"
-  },
-  "dependencies": {
+    "@types/chrome": "^0.0.237",
+    "@vue/compiler-sfc": "^3.3.4",
+    "clean-webpack-plugin": "~4.0.0",
+    "css-loader": "~6.8.1",
     "jsondiffpatch": "~0.4.1",
-    "moment": "~2.29.0",
-    "vue": "~2.6.12"
+    "prettier": "^2.8.8",
+    "sass": "^1.63.3",
+    "sass-loader": "~13.3.2",
+    "style-loader": "~3.3.3",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.1.3",
+    "vue": "~3.3.4",
+    "vue-loader": "~17.2.2",
+    "webpack": "~5.86.0",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "~5.1.4"
   }
 }