Skip to content

Commit 8c5bbb2

Browse files
zendivezendive
authored
v3.0.0 (#11)
+ migrate to chrome extension manifest v3 + update build stack + support internal search + minor improvements
1 parent 65e5822 commit 8c5bbb2

25 files changed

+2580
-522
lines changed

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,7 @@ typings/
6161
.DS_Store
6262

6363
*.zip
64-
package-lock.json
64+
*.js.map
65+
66+
# typescript output
67+
.ts-built

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/src/js/bundle
2+
.ts-built
3+
*.min.js

‎.prettierrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}

‎README.md

Lines changed: 77 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,96 @@
11
### ![](./src/img/panel-icon28.png) console.diff()
2+
23
[![console.diff()](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/tbyBjqi7Zu733AAKA5n4.png)](https://chrome.google.com/webstore/detail/jsdiff-devtool/iefeamoljhdcpigpnpggeiiabpnpgonb)
34

45
Chrome devtools extension intended to display result of deep in-memory object
56
comparisons with the help of dedicated console commands.
67

8+
<details>
9+
<summary> <strong>Screenshots</strong> </summary>
10+
11+
- Comparing two objects
12+
![screenshot](./src/img/screenshot-01.png)
13+
14+
- Tracking changes in localStorage (unchanged are hidden)
15+
![screenshot](./src/img/screenshot-02.png)
16+
17+
</details>
18+
19+
### Based on
20+
21+
- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
22+
- [vuejs](https://github.com/vuejs) by Evan You
23+
724
### Features
8-
* compare objects from multiple tabs and/or between page reloads
9-
* function code included in comparison result in form of a string, may help to see if it was altered
10-
* document, dom-elements and other non-serializable objects are filtered-out from the results
11-
* self recurring references displayed only once, the rest of occurrences are filtered-out
25+
26+
- compare objects from multiple tabs and/or between page reloads
27+
- function code included in comparison result in form of a string, may help to see if it was altered
28+
- document, dom-elements and other non-serializable objects are filtered-out from the results
29+
- self recurring references displayed only once, the rest of occurrences are filtered-out
30+
- basic integration with search functionality within devtools
31+
- if search query contains upper-case letter - the search will be case-sensitive
32+
33+
### Limitations and workarounds
34+
35+
- some instances of objects may cause exception during preparations for comparison
36+
- try to narrow compared contexts
37+
- if it's some Browser API that causes an exception and not a framework, consider opening an issue,
38+
so it will be possible to solve it on a permanent basis
39+
- while paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed ([#10][i10])
40+
41+
[i10]: https://github.com/zendive/jsdiff/issues/10
1242

1343
### API
44+
45+
- **console.diff(left, right)** - compare left and right arguments
46+
1447
```javascript
15-
console.diff(left, right); // compare left and right
16-
console.diff(next); // shorthand of diffPush while single argumented
17-
console.diffLeft(left); // update object on the left side only
18-
console.diffRight(right); // update object on the right side only
19-
console.diffPush(next); // shifts sides, right becomes left, next becomes right
48+
console.diff({ a: 1, b: 1, c: 3 }, { a: 1, b: 2, d: 3 });
49+
```
50+
51+
- **console.diffPush(next)** - shifts sides, right becomes left, next becomes right
52+
53+
```javascript
54+
console.diffPush(Date.now());
55+
```
56+
57+
- **console.diff(next)** - shorthand for `diffPush`
58+
59+
```javascript
60+
console.diff(Date.now());
61+
```
62+
63+
- **console.diffLeft(left)** - update the old value only
64+
65+
```javascript
66+
console.diffLeft(Date.now());
67+
```
68+
69+
- **console.diffRight(right)** - update the new value only
70+
71+
```javascript
72+
console.diffRight(Date.now());
2073
```
2174

2275
### Usage basics
76+
2377
Historically, left side represents the old state and right side the new state.
24-
* Things that are present on the left side but missing on the right side are colour-coded as red (old).
25-
* Things that are missing on the left side but present on the right side are colour-coded as green (new).
78+
79+
- Things that are present on the left side but missing on the right side are colour-coded as red (old).
80+
- Things that are missing on the left side but present on the right side are colour-coded as green (new).
2681

2782
To track changes of the same variable in timed manner you can push it with `diffPush` or `diff`
28-
with a single argument,
29-
that will shift objects from right to left, showing differences with previous push state.
83+
with a single argument, that will shift objects from right to left, showing differences with previous push state.
3084

3185
### How it works
32-
* `jsdiff-devtools` registers devtools panel
33-
* injects console commands that send data to `jsdiff-proxy`
34-
* injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
35-
* when `console.diff` command invoked
36-
* argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
37-
* `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
38-
* when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
39-
and displays it
40-
41-
### Screenshot
42-
![screenshot](./src/img/screenshot-01.png)
4386

44-
### Based on
45-
- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
46-
- [vuejs](https://github.com/vuejs) by Evan You
87+
- `jsdiff-devtools.js` registers devtools panel
88+
- injects `console.diff` commands into inspected window's console interface
89+
- each function clones arguments and sends them via `postMessage` to `jsdiff-proxy.js` in `jsdiff-console-to-proxy` message
90+
- 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
91+
- listens on `jsdiff-proxy-to-devtools` and prepares payload for `vue/panel.js` and sends it with `jsdiff-devtools-to-panel-compare` message
92+
- when user invokes devtools search command - informs `vue/panel.js` with `jsdiff-devtools-to-panel-search` message
93+
- when `vue/panel.js` is visible in devtools
94+
- reflects result of last compare request
95+
- listens on `jsdiff-devtools-to-panel-compare` requests
96+
- listens on `jsdiff-devtools-to-panel-search` and tries to find query in DOM

‎manifest.json

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
11
{
22
"name": "console.diff(...)",
3-
"description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
4-
"version": "2.0",
5-
"manifest_version": 2,
6-
"minimum_chrome_version": "64.0",
3+
"description": "Compare in-memory objects and see the result inside devtools panel with a set of console.diff functions.",
4+
"version": "3.0.0",
5+
"manifest_version": 3,
6+
"minimum_chrome_version": "66.0",
77
"devtools_page": "src/jsdiff-devtools.html",
88
"icons": {
99
"28": "src/img/panel-icon28.png",
1010
"64": "src/img/panel-icon64.png",
1111
"128": "src/img/panel-icon128.png"
1212
},
13-
"background": {
14-
"persistent": false,
15-
"scripts": [
16-
"src/js/jsdiff-background.js"
17-
]
18-
},
19-
"content_security_policy": "script-src 'self'; object-src 'self'",
20-
"permissions": [
21-
"http://*/*",
22-
"https://*/*",
23-
"file:///*",
24-
"clipboardWrite"
25-
]
13+
"permissions": ["storage", "scripting", "activeTab", "clipboardWrite"],
14+
"host_permissions": ["*://*/*"]
2615
}

‎package.json

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
{
22
"name": "jsdiff",
3-
"version": "2.0.0",
3+
"version": "3.0.0",
44
"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.",
55
"private": true,
66
"directories": {
77
"doc": "doc"
88
},
99
"scripts": {
1010
"test": "echo \"no test\" && exit 1",
11-
"dev": "webpack --progress --watch",
12-
"prod": "webpack --progress -p"
11+
"dev": "webpack --progress --watch --mode=development",
12+
"prod": "NODE_ENV=production webpack --mode=production",
13+
"format": "prettier . --write"
1314
},
1415
"repository": {
1516
"type": "git",
@@ -26,21 +27,23 @@
2627
"url": "https://github.com/zendive/jsdiff/issues"
2728
},
2829
"homepage": "https://github.com/zendive/jsdiff#readme",
30+
"type": "module",
2931
"devDependencies": {
30-
"clean-webpack-plugin": "~1.0.1",
31-
"css-loader": "~2.1.0",
32-
"file-loader": "^3.0.1",
33-
"node-sass": "~4.14.1",
34-
"sass-loader": "~7.1.0",
35-
"style-loader": "~0.23.1",
36-
"vue-loader": "~15.6.2",
37-
"vue-template-compiler": "~2.6.6",
38-
"webpack": "~4.29.0",
39-
"webpack-cli": "~3.2.1"
40-
},
41-
"dependencies": {
32+
"@types/chrome": "^0.0.237",
33+
"@vue/compiler-sfc": "^3.3.4",
34+
"clean-webpack-plugin": "~4.0.0",
35+
"css-loader": "~6.8.1",
4236
"jsondiffpatch": "~0.4.1",
43-
"moment": "~2.29.0",
44-
"vue": "~2.6.12"
37+
"prettier": "^2.8.8",
38+
"sass": "^1.63.3",
39+
"sass-loader": "~13.3.2",
40+
"style-loader": "~3.3.3",
41+
"ts-loader": "^9.4.3",
42+
"typescript": "^5.1.3",
43+
"vue": "~3.3.4",
44+
"vue-loader": "~17.2.2",
45+
"webpack": "~5.86.0",
46+
"webpack-bundle-analyzer": "^4.9.0",
47+
"webpack-cli": "~5.1.4"
4548
}
4649
}

0 commit comments

Comments
 (0)