Skip to content

Commit 588f2ab

Browse files
k-villanok-villano
authored
Merge pull request #5 from oslabs-beta/katya/vm
update react dev tools to include rbuild folder
2 parents 372ae6e + 2b32116 commit 588f2ab

15 files changed

+196176
-8
lines changed

‎ReactDevToolsWebExtDep/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<script src="./build/main.js"></script>
5+
<script src="./rbuild/main.js"></script>
66
</head>
77
<body>
88
</body>

‎ReactDevToolsWebExtDep/manifest.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@
2626
"web_accessible_resources": [
2727
"main.html",
2828
"panel.html",
29-
"build/react_devtools_backend.js",
30-
"build/proxy.js",
31-
"build/renderer.js",
32-
"build/installHook.js"
29+
"rbuild/react_devtools_backend.js",
30+
"rbuild/proxy.js",
31+
"rbuild/renderer.js",
32+
"rbuild/installHook.js"
3333
],
3434
"background": {
3535
"scripts": [
36-
"build/background.js"
36+
"rbuild/background.js"
3737
]
3838
},
3939
"permissions": [
@@ -47,7 +47,7 @@
4747
"<all_urls>"
4848
],
4949
"js": [
50-
"build/prepareInjection.js"
50+
"rbuild/prepareInjection.js"
5151
],
5252
"run_at": "document_start"
5353
}

‎ReactDevToolsWebExtDep/panel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@
2727
<body>
2828
<!-- main react mount point -->
2929
<div id="container">Unable to find React on the page.</div>
30-
<script src="./build/panel.js"></script>
30+
<script src="./rbuild/panel.js"></script>
3131
</body>
3232
</html>

‎ReactDevToolsWebExtDep/rbuild/background.js‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
/******/
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
/******/
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId]) {
10+
/******/ return installedModules[moduleId].exports;
11+
/******/ }
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
17+
/******/ };
18+
/******/
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
/******/
22+
/******/ // Flag the module as loaded
23+
/******/ module.l = true;
24+
/******/
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
/******/
29+
/******/
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
/******/
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
/******/
36+
/******/ // define getter function for harmony exports
37+
/******/ __webpack_require__.d = function(exports, name, getter) {
38+
/******/ if(!__webpack_require__.o(exports, name)) {
39+
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
40+
/******/ }
41+
/******/ };
42+
/******/
43+
/******/ // define __esModule on exports
44+
/******/ __webpack_require__.r = function(exports) {
45+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47+
/******/ }
48+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
49+
/******/ };
50+
/******/
51+
/******/ // create a fake namespace object
52+
/******/ // mode & 1: value is a module id, require it
53+
/******/ // mode & 2: merge all properties of value into the ns
54+
/******/ // mode & 4: return value when already ns object
55+
/******/ // mode & 8|1: behave like require
56+
/******/ __webpack_require__.t = function(value, mode) {
57+
/******/ if(mode & 1) value = __webpack_require__(value);
58+
/******/ if(mode & 8) return value;
59+
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
60+
/******/ var ns = Object.create(null);
61+
/******/ __webpack_require__.r(ns);
62+
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
63+
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64+
/******/ return ns;
65+
/******/ };
66+
/******/
67+
/******/ // getDefaultExport function for compatibility with non-harmony modules
68+
/******/ __webpack_require__.n = function(module) {
69+
/******/ var getter = module && module.__esModule ?
70+
/******/ function getDefault() { return module['default']; } :
71+
/******/ function getModuleExports() { return module; };
72+
/******/ __webpack_require__.d(getter, 'a', getter);
73+
/******/ return getter;
74+
/******/ };
75+
/******/
76+
/******/ // Object.prototype.hasOwnProperty.call
77+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
78+
/******/
79+
/******/ // __webpack_public_path__
80+
/******/ __webpack_require__.p = "/rbuild/";
81+
/******/
82+
/******/
83+
/******/ // Load entry module and return exports
84+
/******/ return __webpack_require__(__webpack_require__.s = 116);
85+
/******/ })
86+
/************************************************************************/
87+
/******/ ({
88+
89+
/***/ 116:
90+
/***/ (function(module, exports, __webpack_require__) {
91+
92+
"use strict";
93+
/* global chrome */
94+
95+
96+
const IS_FIREFOX = true;
97+
const ports = {};
98+
99+
if (!IS_FIREFOX) {
100+
// Manifest V3 method of injecting content scripts (not yet supported in Firefox)
101+
// Note: the "world" option in registerContentScripts is only available in Chrome v102+
102+
// It's critical since it allows us to directly run scripts on the "main" world on the page
103+
// "document_start" allows it to run before the page's scripts
104+
// so the hook can be detected by react reconciler
105+
chrome.scripting.registerContentScripts([{
106+
id: 'hook',
107+
matches: ['<all_urls>'],
108+
js: ['rbuild/installHook.js'],
109+
runAt: 'document_start',
110+
world: chrome.scripting.ExecutionWorld.MAIN
111+
}, {
112+
id: 'renderer',
113+
matches: ['<all_urls>'],
114+
js: ['rbuild/renderer.js'],
115+
runAt: 'document_start',
116+
world: chrome.scripting.ExecutionWorld.MAIN
117+
}]);
118+
}
119+
120+
chrome.runtime.onConnect.addListener(function (port) {
121+
let tab = null;
122+
let name = null;
123+
124+
if (isNumeric(port.name)) {
125+
tab = port.name;
126+
name = 'devtools';
127+
installProxy(+port.name);
128+
} else {
129+
tab = port.sender.tab.id;
130+
name = 'content-script';
131+
}
132+
133+
if (!ports[tab]) {
134+
ports[tab] = {
135+
devtools: null,
136+
'content-script': null
137+
};
138+
}
139+
140+
ports[tab][name] = port;
141+
142+
if (ports[tab].devtools && ports[tab]['content-script']) {
143+
doublePipe(ports[tab].devtools, ports[tab]['content-script']);
144+
}
145+
});
146+
147+
function isNumeric(str) {
148+
return +str + '' === str;
149+
}
150+
151+
function installProxy(tabId) {
152+
if (IS_FIREFOX) {
153+
chrome.tabs.executeScript(tabId, {
154+
file: '/rbuild/proxy.js'
155+
}, function () {});
156+
} else {
157+
chrome.scripting.executeScript({
158+
target: {
159+
tabId: tabId
160+
},
161+
files: ['/rbuild/proxy.js']
162+
});
163+
}
164+
}
165+
166+
function doublePipe(one, two) {
167+
one.onMessage.addListener(lOne);
168+
169+
function lOne(message) {
170+
two.postMessage(message);
171+
}
172+
173+
two.onMessage.addListener(lTwo);
174+
175+
function lTwo(message) {
176+
one.postMessage(message);
177+
}
178+
179+
function shutdown() {
180+
one.onMessage.removeListener(lOne);
181+
two.onMessage.removeListener(lTwo);
182+
one.disconnect();
183+
two.disconnect();
184+
}
185+
186+
one.onDisconnect.addListener(shutdown);
187+
two.onDisconnect.addListener(shutdown);
188+
}
189+
190+
function setIconAndPopup(reactBuildType, tabId) {
191+
const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
192+
action.setIcon({
193+
tabId: tabId,
194+
path: {
195+
'16': chrome.runtime.getURL(`icons/16-${reactBuildType}.png`),
196+
'32': chrome.runtime.getURL(`icons/32-${reactBuildType}.png`),
197+
'48': chrome.runtime.getURL(`icons/48-${reactBuildType}.png`),
198+
'128': chrome.runtime.getURL(`icons/128-${reactBuildType}.png`)
199+
}
200+
});
201+
action.setPopup({
202+
tabId: tabId,
203+
popup: chrome.runtime.getURL(`popups/${reactBuildType}.html`)
204+
});
205+
}
206+
207+
function isRestrictedBrowserPage(url) {
208+
return !url || new URL(url).protocol === 'chrome:';
209+
}
210+
211+
function checkAndHandleRestrictedPageIfSo(tab) {
212+
if (tab && isRestrictedBrowserPage(tab.url)) {
213+
setIconAndPopup('restricted', tab.id);
214+
}
215+
} // update popup page of any existing open tabs, if they are restricted browser pages.
216+
// we can't update for any other types (prod,dev,outdated etc)
217+
// as the content script needs to be injected at document_start itself for those kinds of detection
218+
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
219+
220+
221+
if (!IS_FIREFOX) {
222+
chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
223+
chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => checkAndHandleRestrictedPageIfSo(tab));
224+
} // Listen to URL changes on the active tab and update the DevTools icon.
225+
226+
227+
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
228+
if (IS_FIREFOX) {
229+
// We don't properly detect protected URLs in Firefox at the moment.
230+
// However we can reset the DevTools icon to its loading state when the URL changes.
231+
// It will be updated to the correct icon by the onMessage callback below.
232+
if (tab.active && changeInfo.status === 'loading') {
233+
setIconAndPopup('disabled', tabId);
234+
}
235+
} else {
236+
// Don't reset the icon to the loading state for Chrome or Edge.
237+
// The onUpdated callback fires more frequently for these browsers,
238+
// often after onMessage has been called.
239+
checkAndHandleRestrictedPageIfSo(tab);
240+
}
241+
});
242+
chrome.runtime.onMessage.addListener((request, sender) => {
243+
var _request$payload, _ports$id;
244+
245+
const tab = sender.tab;
246+
247+
if (tab) {
248+
const id = tab.id; // This is sent from the hook content script.
249+
// It tells us a renderer has attached.
250+
251+
if (request.hasDetectedReact) {
252+
setIconAndPopup(request.reactBuildType, id);
253+
} else {
254+
switch ((_request$payload = request.payload) === null || _request$payload === void 0 ? void 0 : _request$payload.type) {
255+
case 'fetch-file-with-cache-complete':
256+
case 'fetch-file-with-cache-error':
257+
// Forward the result of fetch-in-page requests back to the extension.
258+
const devtools = (_ports$id = ports[id]) === null || _ports$id === void 0 ? void 0 : _ports$id.devtools;
259+
260+
if (devtools) {
261+
devtools.postMessage(request);
262+
}
263+
264+
break;
265+
}
266+
}
267+
}
268+
});
269+
270+
/***/ })
271+
272+
/******/ });

0 commit comments

Comments
 (0)