You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/README.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Our mission at Reactime is to maintain and iterate constantly, but never at the
8
8
9
9
## File Structure
10
10
11
-
In the *src* folder, there are three directories we care about: *app*, *backend*, and *extension*.
11
+
In the *src* folder, there are three directories we care about: *app*, *backend*, and *extension*.
12
12
```
13
13
src/
14
14
├── app/ # Frontend code
@@ -19,18 +19,18 @@ src/
19
19
│ ├── containers/ # More React components
20
20
│ ├── reducers/ # Redux mechanism for updating state
21
21
│ ├── styles/ #
22
-
│ ├── index.tsx # Starting point for root App component
22
+
│ ├── index.tsx # Starting point for root App component
23
23
│ ├── module.d.ts #
24
24
│ └── store.tsx #
25
25
│
26
26
├── backend/ # "Backend" code (injected into target app)
27
27
│ │ # Focus especially on linkFiber, timeJump, tree, and helpers
28
28
│ ├── __tests__/ #
29
29
│ ├── types/ # Typescript interfaces
30
-
│ ├── helpers.js #
31
-
│ ├── index.ts # Starting point for backend functionality
32
-
│ ├── index.d.ts #
33
-
│ ├── linkFiber.ts #
30
+
│ ├── helpers.js #
31
+
│ ├── index.ts # Starting point for backend functionality
32
+
│ ├── index.d.ts #
33
+
│ ├── linkFiber.ts #
34
34
│ ├── masterState.js # Component action record interface
35
35
│ ├── module.d.ts #
36
36
│ ├── package.json #
@@ -46,7 +46,7 @@ src/
46
46
└──
47
47
```
48
48
49
-
1. The *app* folder is responsible for the Single Page Application that you see when you open the chrome dev tools under the Reactime tab.
49
+
1. The *app* folder is responsible for the Single Page Application that you see when you open the chrome dev tools under the Reactime tab.
50
50
51
51
52
52
@@ -55,7 +55,7 @@ src/
55
55
56
56
57
57
58
-
3. The *extension* folder is where the `contentScript.js` and `background.js` are located.
58
+
3. The *extension* folder is where the `contentScript.js` and `background.js` are located.
59
59
- Like regular web apps, Chrome Extensions are event-based. The background script is where one typically monitors for browser triggers (e.g. events like closing a tab, for example). The content script is what allows us to read or write to our target web application, usually as a result of [messages passed](https://developer.chrome.com/extensions/messaging) from the background script.
60
60
- These two files help us handle requests both from the web browser and from the Reactime extension itself
61
61
@@ -66,7 +66,7 @@ All the diagrams of data flows are avaliable on [MIRO](https://miro.com/app/boar
66
66
67
67
The general flow of data is described in the following steps:
68
68
69
-
69
+
70
70
71
71
1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on *backend*). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
72
72
<!-- CHECK LINE 496 IN LINKFIBER.TS -->
@@ -82,21 +82,21 @@ The general flow of data is described in the following steps:
82
82
Navigation between different console.log panels can be confusing when running Reactime. We created a short instruction where you can find the results for your console.log
83
83
84
84
### <b> /src/extension </b>
85
-
Console.logs from the Extension folder you can find here:
85
+
Console.logs from the Extension folder you can find here:
86
86
- Chrome Extension (Developer mode)
87
-
- Background page
87
+
- Background page
88
88
89
-
89
+
90
90
91
91
### <b> /src/app </b>
92
-
Console.logs from the App folder you can find here:
92
+
Console.logs from the App folder you can find here:
93
93
- Chrome Browser
94
94
- Inspect
95
95
96
96
97
97
98
98
### <b> /src/backend </b>
99
-
Console.logs from the App folder you can find here:
99
+
Console.logs from the App folder you can find here:
100
100
- Open the Reactime extension in Chrome
101
101
- Click "Inspect" on Reactime
102
102
@@ -105,15 +105,15 @@ Console.logs from the App folder you can find here:
105
105
## Chrome Developer Resources
106
106
Still unsure about what content scripts and background scripts do for Reactime, or for a chrome extensions in general?
107
107
- The implementation details [can be found](./extension/background.js)[in the source files](./extension/contentScript.ts) themselves.
108
-
- We also encourage you to dive into [the official Chrome Developer Docs](https://developer.chrome.com/home).
109
-
108
+
- We also encourage you to dive into [the official Chrome Developer Docs](https://developer.chrome.com/home).
109
+
110
110
Some relevant sections are reproduced below:
111
111
112
-
> Content scripts are files that run in the context of web pages.
112
+
> Content scripts are files that run in the context of web pages.
113
113
>
114
114
> By using the standard Document Object Model (DOM), they are able to **read** details of the web pages the browser visits, **make changes** to them and **pass information back** to their parent extension. ([Source](https://developer.chrome.com/extensions/content_scripts))
115
115
116
-
- One helpful way to remember a content script's role in the Chrome ecosystem is to think: a *content* script is used to read and modify a target web page's rendered *content*.
116
+
- One helpful way to remember a content script's role in the Chrome ecosystem is to think: a *content* script is used to read and modify a target web page's rendered *content*.
117
117
118
118
>A background page is loaded when it is needed, and unloaded when it goes idle.
119
119
>
@@ -122,12 +122,12 @@ Still unsure about what content scripts and background scripts do for Reactime,
122
122
>The background page was listening for an event, and the event is dispatched.
123
123
>A content script or other extension sends a message.
124
124
>Another view in the extension, such as a popup, calls `runtime.getBackgroundPage`.
125
-
>
125
+
>
126
126
>Once it has been loaded, a background page will stay running as long as it is performing an action, such as calling a Chrome API or issuing a network request.
127
127
>
128
128
> Additionally, the background page will not unload until all visible views and all message ports are closed. Note that opening a view does not cause the event page to load, but only prevents it from closing once loaded. ([Source](https://developer.chrome.com/extensions/background_pages))
129
129
130
130
- You can think of background scripts serving a purpose analogous to that of a **server** in the client/server paradigm. Much like a server, our `background.js` listens constantly for messages (i.e. requests) from two main places:
131
131
1. The content script
132
-
2. The chrome extension "front-end" **(*NOT* the interface of the browser, this is an important distinction.)**
133
-
- In other words, a background script works as a sort of middleman, directly maintaining connection with its parent extension, and acting as a proxy enabling communication between it and the content script.
132
+
2. The chrome extension "front-end" **(*NOT* the interface of the browser, this is an important distinction.)**
133
+
- In other words, a background script works as a sort of middleman, directly maintaining connection with its parent extension, and acting as a proxy enabling communication between it and the content script.
0 commit comments