Skip to content

Commit

Permalink
fix(electron): load react devtools extension failed
Browse files Browse the repository at this point in the history 
lose extensions build folder
  • Loading branch information
@BlackHole1
BlackHole1 committed Nov 17, 2021
1 parent b7032c6 commit b12d511
Show file tree
Hide file tree
Showing 13 changed files with 188,563 additions and 1 deletion.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ $RECYCLE.BIN/
.npmrc

build/
!third_party/extensions/**/build
!desktop/main-app/scripts/build

agoraAddonlog.txt
Expand Down
6 changes: 5 additions & 1 deletion desktop/main-app/src/window-manager/window-main/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ export class WindowMain extends AbstractWindow {
"extensions",
extensionName,
);
void win.window.webContents.session.loadExtension(extPath);
win.window.webContents.session.loadExtension(extPath).catch(error => {
console.error(
`install ${extensionName} extensions failed! error message: ${error.message}. error stack: ${error.stack}`,
);
});
}

private injectAgoraSDKAddon(win: CustomWindow): void {
Expand Down
243 changes: 243 additions & 0 deletions third_party/extensions/react-devtools/build/background.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/build/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 111);
/******/ })
/************************************************************************/
/******/ ({

/***/ 111:
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/* global chrome */


const ports = {};
const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
chrome.runtime.onConnect.addListener(function (port) {
let tab = null;
let name = null;

if (isNumeric(port.name)) {
tab = port.name;
name = 'devtools';
installContentScript(+port.name);
} else {
tab = port.sender.tab.id;
name = 'content-script';
}

if (!ports[tab]) {
ports[tab] = {
devtools: null,
'content-script': null
};
}

ports[tab][name] = port;

if (ports[tab].devtools && ports[tab]['content-script']) {
doublePipe(ports[tab].devtools, ports[tab]['content-script']);
}
});

function isNumeric(str) {
return +str + '' === str;
}

function installContentScript(tabId) {
chrome.tabs.executeScript(tabId, {
file: '/build/contentScript.js'
}, function () {});
}

function doublePipe(one, two) {
one.onMessage.addListener(lOne);

function lOne(message) {
two.postMessage(message);
}

two.onMessage.addListener(lTwo);

function lTwo(message) {
one.postMessage(message);
}

function shutdown() {
one.onMessage.removeListener(lOne);
two.onMessage.removeListener(lTwo);
one.disconnect();
two.disconnect();
}

one.onDisconnect.addListener(shutdown);
two.onDisconnect.addListener(shutdown);
}

function setIconAndPopup(reactBuildType, tabId) {
chrome.browserAction.setIcon({
tabId: tabId,
path: {
'16': 'icons/16-' + reactBuildType + '.png',
'32': 'icons/32-' + reactBuildType + '.png',
'48': 'icons/48-' + reactBuildType + '.png',
'128': 'icons/128-' + reactBuildType + '.png'
}
});
chrome.browserAction.setPopup({
tabId: tabId,
popup: 'popups/' + reactBuildType + '.html'
});
}

function isRestrictedBrowserPage(url) {
return !url || new URL(url).protocol === 'chrome:';
}

function checkAndHandleRestrictedPageIfSo(tab) {
if (tab && isRestrictedBrowserPage(tab.url)) {
setIconAndPopup('restricted', tab.id);
}
} // update popup page of any existing open tabs, if they are restricted browser pages.
// we can't update for any other types (prod,dev,outdated etc)
// as the content script needs to be injected at document_start itself for those kinds of detection
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed


if (!IS_FIREFOX) {
chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => checkAndHandleRestrictedPageIfSo(tab));
} // Listen to URL changes on the active tab and update the DevTools icon.


chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (IS_FIREFOX) {
// We don't properly detect protected URLs in Firefox at the moment.
// However we can reset the DevTools icon to its loading state when the URL changes.
// It will be updated to the correct icon by the onMessage callback below.
if (tab.active && changeInfo.status === 'loading') {
setIconAndPopup('disabled', tabId);
}
} else {
// Don't reset the icon to the loading state for Chrome or Edge.
// The onUpdated callback fires more frequently for these browsers,
// often after onMessage has been called.
checkAndHandleRestrictedPageIfSo(tab);
}
});
chrome.runtime.onMessage.addListener((request, sender) => {
var _request$payload, _ports$id;

const tab = sender.tab;

if (tab) {
const id = tab.id; // This is sent from the hook content script.
// It tells us a renderer has attached.

if (request.hasDetectedReact) {
// We use browserAction instead of pageAction because this lets us
// display a custom default popup when React is *not* detected.
// It is specified in the manifest.
setIconAndPopup(request.reactBuildType, id);
} else {
switch ((_request$payload = request.payload) === null || _request$payload === void 0 ? void 0 : _request$payload.type) {
case 'fetch-file-with-cache-complete':
case 'fetch-file-with-cache-error':
// Forward the result of fetch-in-page requests back to the extension.
const devtools = (_ports$id = ports[id]) === null || _ports$id === void 0 ? void 0 : _ports$id.devtools;

if (devtools) {
devtools.postMessage(request);
}

break;
}
}
}
});

/***/ })

/******/ });
Loading

0 comments on commit b12d511

Please sign in to comment.