From 4835bda4534a792c15a327cb63387c4f302cc0d7 Mon Sep 17 00:00:00 2001 From: Deepak Jacob Date: Fri, 28 Apr 2017 01:50:15 +0100 Subject: [PATCH 1/9] Chrome extension icon should activate on sites using React #490 --- shells/chrome/manifest.json | 7 ++++++- shells/chrome/src/background.js | 12 ++++++++++++ shells/chrome/src/detector.js | 14 ++++++++++++++ shells/chrome/webpack.config.js | 1 + 4 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 shells/chrome/src/detector.js diff --git a/shells/chrome/manifest.json b/shells/chrome/manifest.json index 20e7414976..8965e80464 100644 --- a/shells/chrome/manifest.json +++ b/shells/chrome/manifest.json @@ -4,7 +4,7 @@ "description": "Adds React debugging tools to the Chrome Developer Tools.", "version": "2.1.0", "minimum_chrome_version": "43", - "browser_action": { + "page_action": { "default_icon": "icons/icon48.png" }, "icons": { @@ -33,6 +33,11 @@ "matches": [""], "js": ["build/inject.js"], "run_at": "document_start" + }, + { + "matches": [""], + "js": ["build/detector.js"], + "run_at": "document_idle" } ] } diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index bc7a688dcb..9e049f4271 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -67,3 +67,15 @@ function doublePipe(one, two) { one.onDisconnect.addListener(shutdown); two.onDisconnect.addListener(shutdown); } + +chrome.runtime.onMessage.addListener((req, sender) => { + if (sender.tab && req.runningReact) { + chrome.tabs.query({ + currentWindow: true, + active: true, + }, function(tabArray) { + chrome.pageAction.show(tabArray[0].id); + } + ); + } +}); diff --git a/shells/chrome/src/detector.js b/shells/chrome/src/detector.js new file mode 100644 index 0000000000..ab2ff34480 --- /dev/null +++ b/shells/chrome/src/detector.js @@ -0,0 +1,14 @@ +/* global chrome */ +function detect() { + setTimeout(() => { + const selector = '[data-reactroot], [data-reactid]'; + const runningReact = !!document.querySelector(selector); + if (runningReact) { + chrome.runtime.sendMessage({ + runningReact: true, + }); + } + }, 100); +} + +detect(); diff --git a/shells/chrome/webpack.config.js b/shells/chrome/webpack.config.js index 26ca28703f..3b80b96b48 100644 --- a/shells/chrome/webpack.config.js +++ b/shells/chrome/webpack.config.js @@ -20,6 +20,7 @@ module.exports = { inject: './src/GlobalHook.js', contentScript: './src/contentScript.js', panel: './src/panel.js', + detector: './src/detector.js', }, output: { path: __dirname + '/build', From 0ffc2e8fce8097b713c3acddea7a2ecf8949f8ab Mon Sep 17 00:00:00 2001 From: Deepak Jacob Date: Fri, 28 Apr 2017 03:13:45 +0100 Subject: [PATCH 2/9] Chrome extension icon should activate on sites using React #490 - typechecking --- flow/chrome.js | 12 ++++++++++++ shells/chrome/src/background.js | 6 ++++-- shells/chrome/src/detector.js | 12 ++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/flow/chrome.js b/flow/chrome.js index 0794925276..408c49800f 100644 --- a/flow/chrome.js +++ b/flow/chrome.js @@ -35,9 +35,14 @@ declare var chrome: { }, tabs: { executeScript: (tabId: number, options: Object, fn: () => void) => void, + query: (options: Object, fn: (tabArray: Array) => void) => void, + }, + pageAction: { + show: (tabId: number) => void, }, runtime: { getURL: (path: string) => string, + sendMessage: (config: Object) => void, connect: (config: Object) => { disconnect: () => void, onMessage: { @@ -58,5 +63,12 @@ declare var chrome: { }, }) => void) => void, }, + onMessage: { + addListener: (fn: (req: Object, sender: { + tab: { + id: number, + }, + }) => void) => void, + }, }, }; diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index 9e049f4271..7d865d1e99 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -73,8 +73,10 @@ chrome.runtime.onMessage.addListener((req, sender) => { chrome.tabs.query({ currentWindow: true, active: true, - }, function(tabArray) { - chrome.pageAction.show(tabArray[0].id); + }, (tabArray) => { + if (tabArray.length) { + chrome.pageAction.show(tabArray[0].id); + } } ); } diff --git a/shells/chrome/src/detector.js b/shells/chrome/src/detector.js index ab2ff34480..cb79945d96 100644 --- a/shells/chrome/src/detector.js +++ b/shells/chrome/src/detector.js @@ -1,4 +1,16 @@ +/** + * 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 + */ + /* global chrome */ + function detect() { setTimeout(() => { const selector = '[data-reactroot], [data-reactid]'; From 745d6d6634319b4fb97736bf02b04e4c198b731b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 14:43:14 +0100 Subject: [PATCH 3/9] Copy detector to the build folder --- shells/chrome/build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/shells/chrome/build.sh b/shells/chrome/build.sh index 505289fbbe..836af30189 100755 --- a/shells/chrome/build.sh +++ b/shells/chrome/build.sh @@ -14,6 +14,7 @@ rsync -R \ build/backend.js \ build/background.js \ build/contentScript.js \ + build/detector.js \ build/inject.js \ build/main.js \ build/panel.js \ From 107d919e67a54c57bb23688ee31212b571a471aa Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 16:18:26 +0100 Subject: [PATCH 4/9] Change how we detect React on the page Use our existing attached events so that it works even if we attach later. --- shells/chrome/build.sh | 1 - shells/chrome/manifest.json | 5 ----- shells/chrome/src/GlobalHook.js | 24 +++++++++++++++++++++++- shells/chrome/src/background.js | 4 +++- shells/chrome/src/contentScript.js | 1 + shells/chrome/src/detector.js | 26 -------------------------- 6 files changed, 27 insertions(+), 34 deletions(-) delete mode 100644 shells/chrome/src/detector.js diff --git a/shells/chrome/build.sh b/shells/chrome/build.sh index 836af30189..505289fbbe 100755 --- a/shells/chrome/build.sh +++ b/shells/chrome/build.sh @@ -14,7 +14,6 @@ rsync -R \ build/backend.js \ build/background.js \ build/contentScript.js \ - build/detector.js \ build/inject.js \ build/main.js \ build/panel.js \ diff --git a/shells/chrome/manifest.json b/shells/chrome/manifest.json index 8965e80464..2433489a9a 100644 --- a/shells/chrome/manifest.json +++ b/shells/chrome/manifest.json @@ -33,11 +33,6 @@ "matches": [""], "js": ["build/inject.js"], "run_at": "document_start" - }, - { - "matches": [""], - "js": ["build/detector.js"], - "run_at": "document_idle" } ] } diff --git a/shells/chrome/src/GlobalHook.js b/shells/chrome/src/GlobalHook.js index 2b5ecf51ba..d95cab0d03 100644 --- a/shells/chrome/src/GlobalHook.js +++ b/shells/chrome/src/GlobalHook.js @@ -10,12 +10,33 @@ */ 'use strict'; +/* globals chrome */ + // 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 want to detect when a renderer attaches, and notify the "background +// page" (which is shared between tabs and can highlight the React icon). +// Currently we are in "content script" context, so we can't listen +// to the hook directly (it will be injected directly into the page). +// So instead, the hook will use postMessage() to pass message to us here. +// And when this happens, we'll send a message to the "background page". +window.addEventListener('message', function(evt) { + if (evt.source === window && evt.data && evt.data.source === 'react-devtools-detector') { + chrome.runtime.sendMessage({ + hasDetectedReact: true, + }); + } +}); + +var detectReact = ` +window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function() { + window.postMessage({source: 'react-devtools-detector'}, '*'); +}); +`; var saveNativeValues = ` window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create; window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map; @@ -26,7 +47,8 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set; var js = ( ';(' + installGlobalHook.toString() + '(window))' + ';(' + installRelayHook.toString() + '(window))' + - saveNativeValues + saveNativeValues + + detectReact ); // This script runs before the element is created, so we add the script diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index 7d865d1e99..a6b9414642 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -69,7 +69,9 @@ function doublePipe(one, two) { } chrome.runtime.onMessage.addListener((req, sender) => { - if (sender.tab && req.runningReact) { + // This is sent from the hook content script. + // It tells us a renderer has attached. + if (sender.tab && req.hasDetectedReact) { chrome.tabs.query({ currentWindow: true, active: true, diff --git a/shells/chrome/src/contentScript.js b/shells/chrome/src/contentScript.js index 193484470e..ea6cb9bf6a 100644 --- a/shells/chrome/src/contentScript.js +++ b/shells/chrome/src/contentScript.js @@ -50,3 +50,4 @@ function handleDisconnect() { }, }, '*'); } + diff --git a/shells/chrome/src/detector.js b/shells/chrome/src/detector.js deleted file mode 100644 index cb79945d96..0000000000 --- a/shells/chrome/src/detector.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * 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 - */ - -/* global chrome */ - -function detect() { - setTimeout(() => { - const selector = '[data-reactroot], [data-reactid]'; - const runningReact = !!document.querySelector(selector); - if (runningReact) { - chrome.runtime.sendMessage({ - runningReact: true, - }); - } - }, 100); -} - -detect(); From 648104252b6225a5e98eb9663de6c42ad9f14589 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 16:22:56 +0100 Subject: [PATCH 5/9] Remove detector from webpack config --- shells/chrome/webpack.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/shells/chrome/webpack.config.js b/shells/chrome/webpack.config.js index 3b80b96b48..26ca28703f 100644 --- a/shells/chrome/webpack.config.js +++ b/shells/chrome/webpack.config.js @@ -20,7 +20,6 @@ module.exports = { inject: './src/GlobalHook.js', contentScript: './src/contentScript.js', panel: './src/panel.js', - detector: './src/detector.js', }, output: { path: __dirname + '/build', From ea1caacb3658913b18a1eda870056431ba9abc04 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 16:23:11 +0100 Subject: [PATCH 6/9] Remove unintentional change --- shells/chrome/src/contentScript.js | 1 - 1 file changed, 1 deletion(-) diff --git a/shells/chrome/src/contentScript.js b/shells/chrome/src/contentScript.js index ea6cb9bf6a..193484470e 100644 --- a/shells/chrome/src/contentScript.js +++ b/shells/chrome/src/contentScript.js @@ -50,4 +50,3 @@ function handleDisconnect() { }, }, '*'); } - From 988e6147e7e126606d8836c0260ba68e8f121b45 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 17:51:45 +0100 Subject: [PATCH 7/9] Show popups corresponding to the state --- flow/chrome.js | 11 +++++++++-- shells/chrome/build.sh | 12 ++++-------- shells/chrome/icons/icon48-gray.png | Bin 0 -> 3831 bytes shells/chrome/manifest.json | 10 +++++++--- shells/chrome/popups/detected.html | 7 +++++++ shells/chrome/popups/links.js | 12 ++++++++++++ shells/chrome/popups/not-detected.html | 7 +++++++ shells/chrome/src/background.js | 26 +++++++++++++++---------- 8 files changed, 62 insertions(+), 23 deletions(-) create mode 100644 shells/chrome/icons/icon48-gray.png create mode 100644 shells/chrome/popups/detected.html create mode 100644 shells/chrome/popups/links.js create mode 100644 shells/chrome/popups/not-detected.html diff --git a/flow/chrome.js b/flow/chrome.js index 408c49800f..efb6726973 100644 --- a/flow/chrome.js +++ b/flow/chrome.js @@ -37,8 +37,15 @@ declare var chrome: { executeScript: (tabId: number, options: Object, fn: () => void) => void, query: (options: Object, fn: (tabArray: Array) => void) => void, }, - pageAction: { - show: (tabId: number) => void, + browserAction: { + setIcon: ({ + tabId: number, + path: {[key: string]: string} + }), + setPopup: ({ + tabId: sender.tab.id, + popup: string, + }) => void, }, runtime: { getURL: (path: string) => string, diff --git a/shells/chrome/build.sh b/shells/chrome/build.sh index 505289fbbe..1d1a0035f9 100755 --- a/shells/chrome/build.sh +++ b/shells/chrome/build.sh @@ -11,14 +11,10 @@ NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.backend.js mkdir "$PACKAGE_TMP/react-devtools-chrome/" rsync -R \ - build/backend.js \ - build/background.js \ - build/contentScript.js \ - build/inject.js \ - build/main.js \ - build/panel.js \ - icons/icon48.png \ - icons/icon128.png \ + build/*.js \ + icons/*.png \ + popups/*.html \ + popups/*.js \ main.html \ manifest.json \ panel.html \ diff --git a/shells/chrome/icons/icon48-gray.png b/shells/chrome/icons/icon48-gray.png new file mode 100644 index 0000000000000000000000000000000000000000..d694947a0f30d1f712ecc8663debfec5da19af7b GIT binary patch literal 3831 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 literal 0 HcmV?d00001 diff --git a/shells/chrome/manifest.json b/shells/chrome/manifest.json index 2433489a9a..fd9fc1d715 100644 --- a/shells/chrome/manifest.json +++ b/shells/chrome/manifest.json @@ -4,14 +4,18 @@ "description": "Adds React debugging tools to the Chrome Developer Tools.", "version": "2.1.0", "minimum_chrome_version": "43", - "page_action": { - "default_icon": "icons/icon48.png" - }, "icons": { "48": "icons/icon48.png", "128": "icons/icon128.png" }, + "browser_action": { + "default_icon": { + "48": "icons/icon48-gray.png" + }, + "default_popup": "popups/not-detected.html" + }, + "devtools_page": "main.html", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", diff --git a/shells/chrome/popups/detected.html b/shells/chrome/popups/detected.html new file mode 100644 index 0000000000..a05157417c --- /dev/null +++ b/shells/chrome/popups/detected.html @@ -0,0 +1,7 @@ + + +

+ This page is using React. ✅ +
+ Open the developer tools, and the React tab will appear to the right. +

\ No newline at end of file diff --git a/shells/chrome/popups/links.js b/shells/chrome/popups/links.js new file mode 100644 index 0000000000..b2fbe02657 --- /dev/null +++ b/shells/chrome/popups/links.js @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', function () { + var links = document.getElementsByTagName('a'); + for (var i = 0; i < links.length; i++) { + (function() { + var ln = links[i]; + var location = ln.href; + ln.onclick = function() { + chrome.tabs.create({active: true, url: location}); + }; + })(); + } +}); diff --git a/shells/chrome/popups/not-detected.html b/shells/chrome/popups/not-detected.html new file mode 100644 index 0000000000..5df0690d8f --- /dev/null +++ b/shells/chrome/popups/not-detected.html @@ -0,0 +1,7 @@ + + +

+ React was not detected on this page. +
+ If this seems wrong, follow the troubleshooting instructions. +

\ No newline at end of file diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index a6b9414642..d60ea34899 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -71,15 +71,21 @@ function doublePipe(one, two) { chrome.runtime.onMessage.addListener((req, sender) => { // This is sent from the hook content script. // It tells us a renderer has attached. - if (sender.tab && req.hasDetectedReact) { - chrome.tabs.query({ - currentWindow: true, - active: true, - }, (tabArray) => { - if (tabArray.length) { - chrome.pageAction.show(tabArray[0].id); - } - } - ); + if (req.hasDetectedReact && sender.tab) { + // 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. + chrome.browserAction.setIcon({ + tabId: sender.tab.id, + path: { + '48': 'icons/icon48.png', + // I'm not using our 128 icon here because it is weird. + // We should fix it to show the right thing. + }, + }); + chrome.browserAction.setPopup({ + tabId: sender.tab.id, + popup: 'popups/detected.html' + }) } }); From e3b17f9494e8aeed65a2e4e1ae521f36653fc8fc Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Apr 2017 18:10:04 +0100 Subject: [PATCH 8/9] Fix lint nits --- shells/chrome/popups/links.js | 4 +++- shells/chrome/src/background.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/shells/chrome/popups/links.js b/shells/chrome/popups/links.js index b2fbe02657..2ee895497a 100644 --- a/shells/chrome/popups/links.js +++ b/shells/chrome/popups/links.js @@ -1,4 +1,6 @@ -document.addEventListener('DOMContentLoaded', function () { +/* globals chrome */ + +document.addEventListener('DOMContentLoaded', function() { var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { (function() { diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index d60ea34899..848c4082e2 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -85,7 +85,7 @@ chrome.runtime.onMessage.addListener((req, sender) => { }); chrome.browserAction.setPopup({ tabId: sender.tab.id, - popup: 'popups/detected.html' - }) + popup: 'popups/detected.html', + }); } }); From 094b708700e52bdd7d91b7cfc1bc4bb387628e87 Mon Sep 17 00:00:00 2001 From: Deepak Jacob Date: Sun, 30 Apr 2017 09:50:01 +0100 Subject: [PATCH 9/9] making file names consistent --- shells/chrome/manifest.json | 2 +- shells/chrome/webpack.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/shells/chrome/manifest.json b/shells/chrome/manifest.json index 354f1a130d..84ac11bc63 100644 --- a/shells/chrome/manifest.json +++ b/shells/chrome/manifest.json @@ -35,7 +35,7 @@ "content_scripts": [ { "matches": [""], - "js": ["build/inject.js"], + "js": ["build/GlobalHook.js"], "run_at": "document_start" } ] diff --git a/shells/chrome/webpack.config.js b/shells/chrome/webpack.config.js index 26ca28703f..bd56178f9e 100644 --- a/shells/chrome/webpack.config.js +++ b/shells/chrome/webpack.config.js @@ -17,7 +17,7 @@ module.exports = { entry: { main: './src/main.js', background: './src/background.js', - inject: './src/GlobalHook.js', + GlobalHook: './src/GlobalHook.js', contentScript: './src/contentScript.js', panel: './src/panel.js', },