Skip to content

Commit 374ab7f

Browse files
committed
update readme with design diagram
1 parent bb54911 commit 374ab7f

File tree

6 files changed

+66
-8
lines changed

6 files changed

+66
-8
lines changed

README.md

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
88
<summary> <strong>Screenshots</strong> </summary>
99

1010
- Comparing two objects
11-
![screenshot](./src/img/screenshot-01.png)
11+
![screenshot](./doc/screenshot-01.png)
1212

1313
- Tracking changes in localStorage (unchanged are hidden)
14-
![screenshot](./src/img/screenshot-02.png)
14+
![screenshot](./doc/screenshot-02.png)
1515

1616
</details>
1717

@@ -115,12 +115,7 @@ Historically, left side represents the old state and right side the new state.
115115

116116
### How it works
117117

118-
- `manifest.json` injects content scripts to each visited site (except for chrome web store site and google-protected alike):
119-
- `jsdiff-console.ts` as [MAIN](https://developer.chrome.com/docs/extensions/reference/scripting/#type-ExecutionWorld) world (has access to the target site memory)
120-
- sends messages to `jsdiff-proxy.ts`.
121-
- `jsdiff-proxy.ts` as `ISOLATED` world (has access to the chrome runtime)
122-
- stores data from `jsdiff-console.ts` in `chrome.storage.local` and sends runtime messages to `panel.vue`.
123-
- `jsdiff-devtools.ts` registers `panel.vue` as a JSDiff devtools panel that reads current state of `chorme.storage.local` and listens to incomming `chrome.runtime` mesages from `jsdiff-proxy.ts`.
118+
![screenshot](./doc/design.png)
124119

125120
### How to build
126121

doc/design.plantuml

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@startuml Design
2+
skinparam style strictuml
3+
4+
box "User's Window Context"
5+
actor "User's\nDevTools" as User
6+
participant Console [
7+
=Console
8+
----
9+
content script
10+
MAIN world
11+
]
12+
end box
13+
box "Chrome Runtime Context"
14+
participant Proxy [
15+
=Proxy
16+
----
17+
content script
18+
ISOLATED world
19+
]
20+
database Storage
21+
participant Panel [
22+
=JSDiff Panel
23+
----
24+
DevTools View
25+
]
26+
end box
27+
28+
[-> User: Open Devtools
29+
=== Invoke API ==
30+
31+
User -> Console: console.diff(...)
32+
33+
activate Console
34+
Console -> Proxy: jsdiff-console-to-proxy-inprogress
35+
activate Proxy
36+
Proxy -> Panel: jsdiff-proxy-to-panel-inprogress
37+
deactivate Proxy
38+
Console o->o Console: clone arguments
39+
Console -> Proxy: jsdiff-console-to-proxy-compare
40+
deactivate Console
41+
42+
activate Proxy
43+
Proxy o<->o Proxy: arrange payload
44+
Proxy -> Storage: write payload
45+
Proxy --> Panel: jsdiff-proxy-to-panel-error
46+
Proxy -> Panel: jsdiff-proxy-to-panel-compare
47+
deactivate Proxy
48+
49+
activate Panel
50+
Storage -> Panel: read payload
51+
Panel -> Panel: Compare objects
52+
Panel ->o]: Display result
53+
deactivate Panel
54+
55+
=== Search in DevTools Panel ==
56+
[-> User: ctrl+F\ncmd+F
57+
User -> Panel: jsdiff-devtools-to-panel-search
58+
activate Panel
59+
Panel -> Panel: search in DOM
60+
Panel ->o]: Display result
61+
deactivate Panel
62+
63+
@enduml

doc/design.png

71.9 KB
Loading
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)