Skip to content

Commit 42e1151

Browse files
committed
Add content script notes
1 parent 5e81525 commit 42e1151

File tree

1 file changed

+13
-5
lines changed

1 file changed

+13
-5
lines changed

extension/docs/Architecture.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,36 @@
22

33
This document exists to keep track of how the different parts of the Redux DevTools interact, since it's easy to forget how it all works together. This is intended for internal purposes and is just a collection of notes to myself.
44

5-
## Scripts
5+
## Entry Points
66

7-
### Window View
7+
### Window
88

99
This is the default view that is shown in the Redux DevTools popup, the Chrome DevTools tab (if direct access to the background page is available), and new popup windows that are created. It has direct access to the background page via `chrome.runtime.getBackgroundPage`.
1010

11-
### DevPanel View
11+
### DevPanel
1212

1313
This is the view that is shown in the Chrome DevTools tab if direct access to the background page is not available.
1414

1515
Initially this was the view that was always used for the Chrome DevTools tab, but when support to directly access the background page from the DevTools tab was added, [the Window View became the preferred view](https://github.com/zalmoxisus/redux-devtools-extension/pull/580).
1616

17-
### Remote View
17+
### Remote
1818

1919
This does not interact with the other parts of the extension at all, it just renders the `App` component from `@redux-devtools/app`.
2020

2121
It can be triggered by hitting the "Remote" button in any of the other views, which calls `chrome.windows.create` and creates a new window.
2222

23-
### Devtools Script
23+
### DevTools
2424

2525
This is the script that adds the Redux panel in the Chrome DevTools using `chrome.devtools.panels.create`.
2626

2727
It creates a Window View if it has direct access to the background page, otherwise it creates a DevPanel View.
2828

2929
Note that this used to always show the DevPanel View, but [started using the Window View by default](https://github.com/zalmoxisus/redux-devtools-extension/pull/580) once direct access to the background page was added to Chrome DevTools tabs.
30+
31+
### Content Script
32+
33+
Passes messages between the injected page script and the background page.
34+
35+
It listens for messages from the injected page script using `window.addEventListener('message', ...)`. It knows the message is from the injected page script if `message.source` is `'@devtools-page'`. See the Chrome DevTools docs where this approach [is documented](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools#evaluated-scripts-to-devtools).
36+
37+
It creates a connection to the background page using `chrome.runtime.connect` with the name `'tab'` when it receives the first message from the injected page script.

0 commit comments

Comments
 (0)