From 795b3207ce5ea25c80749e367c61e5f56ac09856 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 29 Aug 2024 11:31:43 +0100 Subject: [PATCH] fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup (#30825) Stacked on https://github.com/facebook/react/pull/30824. See [this commit](https://github.com/facebook/react/pull/30825/commits/c9830d64749cf8fd592ea30a1cd65842cf83f6df). Turns out we should be listing `tabs` in our permissions, if we want to be able to receive tab url, once its updated. This also fixes `chrome.tabs.onCreated` event subscription, because [it should receive only tab object](https://developer.chrome.com/docs/extensions/reference/api/tabs#event-onCreated), and not 3 arguments, as expected in the previous implementation. --- .../chrome/manifest.json | 3 ++- .../edge/manifest.json | 3 ++- .../firefox/manifest.json | 3 ++- .../src/background/tabsManager.js | 20 ++++++++++--------- .../src/main/registerEventsLogger.js | 10 ++-------- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 4dcd951a48..e7b9b19b6a 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -42,7 +42,8 @@ }, "permissions": [ "storage", - "scripting" + "scripting", + "tabs" ], "host_permissions": [ "" diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index fd19f1c5df..496d4e92c3 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -42,7 +42,8 @@ }, "permissions": [ "storage", - "scripting" + "scripting", + "tabs" ], "host_permissions": [ "" diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index 3c2d417d58..930c1ab110 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -48,7 +48,8 @@ ] }, "permissions": [ - "scripting" + "scripting", + "tabs" ], "host_permissions": [ "" diff --git a/packages/react-devtools-extensions/src/background/tabsManager.js b/packages/react-devtools-extensions/src/background/tabsManager.js index 192a6ce42c..d46c14c6ea 100644 --- a/packages/react-devtools-extensions/src/background/tabsManager.js +++ b/packages/react-devtools-extensions/src/background/tabsManager.js @@ -5,7 +5,12 @@ import setExtensionIconAndPopup from './setExtensionIconAndPopup'; function isRestrictedBrowserPage(url) { - return !url || new URL(url).protocol === 'chrome:'; + if (!url) { + return true; + } + + const urlProtocol = new URL(url).protocol; + return urlProtocol === 'chrome:' || urlProtocol === 'about:'; } function checkAndHandleRestrictedPageIfSo(tab) { @@ -14,16 +19,13 @@ function checkAndHandleRestrictedPageIfSo(tab) { } } -// 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 +// Update popup page of any existing open tabs, if they are restricted browser pages chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo)); -chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => - checkAndHandleRestrictedPageIfSo(tab), -); +chrome.tabs.onCreated.addListener(tab => checkAndHandleRestrictedPageIfSo(tab)); // Listen to URL changes on the active tab and update the DevTools icon. chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { - checkAndHandleRestrictedPageIfSo(tab); + if (changeInfo.url && isRestrictedBrowserPage(changeInfo.url)) { + setExtensionIconAndPopup('restricted', tabId); + } }); diff --git a/packages/react-devtools-extensions/src/main/registerEventsLogger.js b/packages/react-devtools-extensions/src/main/registerEventsLogger.js index 5234866fd5..ec57d173e4 100644 --- a/packages/react-devtools-extensions/src/main/registerEventsLogger.js +++ b/packages/react-devtools-extensions/src/main/registerEventsLogger.js @@ -4,14 +4,8 @@ import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDev function registerEventsLogger() { registerDevToolsEventLogger('extension', async () => { - // TODO: after we upgrade to Firefox Manifest V3, chrome.tabs.query returns a Promise without the callback. - return new Promise(resolve => { - chrome.tabs.query({active: true}, tabs => { - resolve({ - page_url: tabs[0]?.url, - }); - }); - }); + const tabs = await chrome.tabs.query({active: true}); + return {page_url: tabs[0]?.url}; }); }