Make React Developer Tools work on Chrome extension pages · ngyikp/react-devtools@3bf9cde

/**

* Copyright (c) 2015-present, Facebook, Inc.

* All rights reserved.

*

* This source code is licensed under the BSD-style license found in the

* LICENSE file in the root directory of this source tree. An additional grant

* of patent rights can be found in the PATENTS file in the same directory.

*

* @flow

*/

'use strict';

/* global chrome */

module.exports = function() {

// Change this to whatever random string Chrome gives you

var DEVTOOLS_EXTENSION_ID = 'lijlpjbjbiafjcjfhfpjhhjjnligpdda';

// proxy from main page to devtools (via the background page)

var port = chrome.runtime.connect(DEVTOOLS_EXTENSION_ID, {

name: 'content-script_extension_' + window.__REACT_DEVTOOLS_GLOBAL_HOOK__.pageId,

});

port.onMessage.addListener(handleMessageFromDevtools);

port.onDisconnect.addListener(handleDisconnect);

window.addEventListener('message', handleMessageFromPage);

window.postMessage({

source: 'react-devtools-content-script',

hello: true,

}, '*');

function handleMessageFromDevtools(message) {

window.postMessage({

source: 'react-devtools-content-script',

payload: message,

}, '*');

}

function handleMessageFromPage(evt) {

if (evt.data && evt.data.source === 'react-devtools-bridge') {

// console.log('page -> rep -> dev', evt.data);

port.postMessage(evt.data.payload);

}

}

function handleDisconnect() {

window.removeEventListener('message', handleMessageFromPage);

window.postMessage({

source: 'react-devtools-content-script',

payload: {

type: 'event',

evt: 'shutdown',

},

}, '*');

}

};

/**

* Copyright (c) 2015-present, Facebook, Inc.

* All rights reserved.

*

* This source code is licensed under the BSD-style license found in the

* LICENSE file in the root directory of this source tree. An additional grant

* of patent rights can be found in the PATENTS file in the same directory.

*

* @flow

*/

'use strict';

var contentScript = require('./contentScript');

// Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the

// devtools are installed (and skip its suggestion to install the devtools).

var installGlobalHook = require('../../../backend/installGlobalHook.js');

var installRelayHook = require('../../../plugins/Relay/installRelayHook.js');

// We are already running on the page execution scope, there is no need to create

// a <script> tag, plus it wouldn't work under the strict Content Security Policy anyway

installGlobalHook(window);

installRelayHook(window);

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;

// Extension popup pages do not have tabId, so we create our own unique identifier

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.pageId = +new Date();

contentScript();

var ports = {};

chrome.runtime.onConnect.addListener(function(port) {

chrome.runtime.onConnect.addListener(onConnect);

// Enable extension popup pages to be inspected

// TODO: Might be a potential security risk here...

chrome.runtime.onConnectExternal.addListener(onConnect);

function onConnect(port) {

var tab = null;

var name = null;

if (isNumeric(port.name)) {

tab = port.name;

var parts = port.name.split('_');

// Possible outcomes from pages:

// devtools_page_<tabId>

// content-script_page

// Possible outcomes from extensions:

// devtools_extension_<pageId>

// content-script_extension_<pageId>

if (parts[0] === 'devtools') {

name = 'devtools';

installContentScript(+port.name);

} else {

tab = port.sender.tab.id;

tab = +parts[2];

if (parts[1] !== 'extension') {

installContentScript(+parts[2]);

}

} else if (parts[0] === 'content-script') {

if (parts[1] !== 'extension') {

tab = port.sender.tab.id;

} else {

tab = +parts[2];

}

name = 'content-script';

} else {

console.error('Unknown port name ' + port.name);

return;

}

if (!ports[tab]) {

if (ports[tab].devtools && ports[tab]['content-script']) {

doublePipe(ports[tab].devtools, ports[tab]['content-script']);

}

});

function isNumeric(str: string): boolean {

return +str + '' === str;

}

function installContentScript(tabId: number) {

// proxy from main page to devtools (via the background page)

var port = chrome.runtime.connect({

name: 'content-script',

name: 'content-script_page',

});

port.onMessage.addListener(handleMessageFromDevtools);

},

inject(done) {

inject(chrome.runtime.getURL('build/backend.js'), () => {

var port = chrome.runtime.connect({

name: '' + chrome.devtools.inspectedWindow.tabId,

});

var disconnected = false;

// TODO We should use `chrome.devtools.inspectedWindow.tabId` first and

// then fallback to eval() so this call wouldn't be necessary for most pages

chrome.devtools.inspectedWindow.eval('window.__REACT_DEVTOOLS_GLOBAL_HOOK__.pageId', (pageId, err) => {

var portName;

if (typeof chrome.devtools.inspectedWindow.tabId !== 'undefined') {

portName = 'devtools_page_' + chrome.devtools.inspectedWindow.tabId;

} else {

// Chrome extension popup pages don't have tabId

portName = 'devtools_extension_' + pageId;

}

var port = chrome.runtime.connect({

name: portName,

});

var disconnected = false;

var wall = {

listen(fn) {

port.onMessage.addListener(message => fn(message));

},

send(data) {

if (disconnected) {

return;

}

port.postMessage(data);

},

};

var wall = {

listen(fn) {

port.onMessage.addListener(message => fn(message));

},

send(data) {

if (disconnected) {

return;

}

port.postMessage(data);

},

};

port.onDisconnect.addListener(() => {

disconnected = true;

port.onDisconnect.addListener(() => {

disconnected = true;

});

done(wall, () => port.disconnect());

});

done(wall, () => port.disconnect());

});

},

};

background: './src/background.js',

inject: './src/GlobalHook.js',

contentScript: './src/contentScript.js',

reactDevtoolsHelperForChromeExtensions: './src-for-chrome-extension/hook.js',

panel: './src/panel.js',

},

output: {