-
Notifications
You must be signed in to change notification settings - Fork 55
/
main.js
126 lines (101 loc) · 3.39 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/* global chrome */
import Bridge from 'src/bridge';
import Store from 'src/devtools/Store';
import inject from './inject';
let panelCreated = false;
function createPanelIfReactLoaded() {
if (panelCreated) {
return;
}
chrome.devtools.inspectedWindow.eval(
'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
function(pageHasReact, error) {
if (!pageHasReact || panelCreated) {
return;
}
panelCreated = true;
clearInterval(loadCheckInterval);
let bridge = null;
let store = null;
let elementsPanel = null;
let settingsPanel = null;
function initBridgeAndStore() {
let hasPortBeenDisconnected = false;
const port = chrome.runtime.connect({
name: '' + chrome.devtools.inspectedWindow.tabId,
});
port.onDisconnect.addListener(() => {
hasPortBeenDisconnected = true;
});
bridge = new Bridge({
listen(fn) {
port.onMessage.addListener(message => fn(message));
},
send(event: string, payload: any, transferable?: Array<any>) {
if (!hasPortBeenDisconnected) {
port.postMessage({ event, payload }, transferable);
}
},
});
store = new Store(bridge);
// Initialize the backend only once the Store has been initialized.
// Otherwise the Store may miss important initial tree op codes.
inject(chrome.runtime.getURL('build/backend.js'));
if (elementsPanel !== null) {
elementsPanel.injectBridgeAndStore(bridge, store);
}
if (settingsPanel !== null) {
settingsPanel.injectBridgeAndStore(bridge, store);
}
}
initBridgeAndStore();
chrome.devtools.panels.create(
'⚛ Elements',
'',
'elements.html',
panel => {
panel.onShown.addListener(panel => {
if (elementsPanel === null) {
panel.injectBridgeAndStore(bridge, store);
}
elementsPanel = panel;
// TODO: When the user switches to the panel, check for an Elements tab selection.
});
panel.onHidden.addListener(() => {
// TODO: Stop highlighting and stuff.
});
}
);
chrome.devtools.panels.create(
'⚛ Settings',
'',
'settings.html',
panel => {
panel.onShown.addListener(panel => {
if (settingsPanel === null) {
panel.injectBridgeAndStore(bridge, store);
}
settingsPanel = panel;
});
}
);
chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
// Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
chrome.devtools.network.onNavigated.addListener(function onNavigated() {
bridge.send('shutdown');
initBridgeAndStore();
});
}
);
}
// Load (or reload) the DevTools extension when the user navigates to a new page.
function checkPageForReact() {
createPanelIfReactLoaded();
}
chrome.devtools.network.onNavigated.addListener(checkPageForReact);
// Check to see if React has loaded once per second in case React is added
// after page load
const loadCheckInterval = setInterval(function() {
createPanelIfReactLoaded();
}, 1000);
createPanelIfReactLoaded();