# B
<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide
---
## GP交易查詢-BOF
-
- VSCode :heart:
- I use tabs. :cat:
---
### 70% of our users are developers. Developers :heart: GitHub.
---
---
### Usage flow
---
```graphviz
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
```
---
### Architecture of extension
---
---
## Content script
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
---
# :fork_and_knife:
---
# :100: :muscle: :tada:
{"metaMigratedAt":"2023-06-15T23:58:33.363Z","metaMigratedFrom":"YAML","title":"Talk slides template","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"b8186799-4647-4423-b8c8-2de44e8e8def\",\"add\":2147,\"del\":869}]"}