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.
Ruslan Lesiutin committed
Aug 29, 2024 at 11:31 UTC
795b3207ce5ea25c80749e367c61e5f56ac09856
5 files changed
+19
-20
packages/react-devtools-extensions/chrome/manifest.json
+2
-1
@@ -42,7 +42,8 @@
42
},
43
"permissions": [
44
"storage",
45
- "scripting"
45
+ "scripting",
46
+ "tabs"
47
],
48
"host_permissions": [
49
"<all_urls>"
packages/react-devtools-extensions/edge/manifest.json
+2
-1
@@ -42,7 +42,8 @@
42
},
43
"permissions": [
44
"storage",
45
- "scripting"
45
+ "scripting",
46
+ "tabs"
47
],
48
"host_permissions": [
49
"<all_urls>"
packages/react-devtools-extensions/firefox/manifest.json
+2
-1
@@ -48,7 +48,8 @@
48
]
49
},
50
"permissions": [
51
- "scripting"
51
+ "scripting",
52
+ "tabs"
53
],
54
"host_permissions": [
55
"<all_urls>"
packages/react-devtools-extensions/src/background/tabsManager.js
+11
-9
@@ -5,7 +5,12 @@
5
import setExtensionIconAndPopup from './setExtensionIconAndPopup';
6
7
function isRestrictedBrowserPage(url) {
8
- return !url || new URL(url).protocol === 'chrome:';
8
+ if (!url) {
9
+ return true;
10
+ }
11
+
12
+ const urlProtocol = new URL(url).protocol;
13
+ return urlProtocol === 'chrome:' || urlProtocol === 'about:';
14
}
15
16
function checkAndHandleRestrictedPageIfSo(tab) {
@@ -14,16 +19,13 @@ function checkAndHandleRestrictedPageIfSo(tab) {
19
}
20
}
21
17
-// update popup page of any existing open tabs, if they are restricted browser pages.
18
-// we can't update for any other types (prod,dev,outdated etc)
19
-// as the content script needs to be injected at document_start itself for those kinds of detection
20
-// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
22
+// Update popup page of any existing open tabs, if they are restricted browser pages
23
chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
22
-chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
23
- checkAndHandleRestrictedPageIfSo(tab),
24
-);
24
+chrome.tabs.onCreated.addListener(tab => checkAndHandleRestrictedPageIfSo(tab));
25
26
// Listen to URL changes on the active tab and update the DevTools icon.
27
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
28
- checkAndHandleRestrictedPageIfSo(tab);
28
+ if (changeInfo.url && isRestrictedBrowserPage(changeInfo.url)) {
29
+ setExtensionIconAndPopup('restricted', tabId);
30
+ }
31
});
packages/react-devtools-extensions/src/main/registerEventsLogger.js
+2
-8
@@ -4,14 +4,8 @@ import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDev
4
5
function registerEventsLogger() {
6
registerDevToolsEventLogger('extension', async () => {
7
- // TODO: after we upgrade to Firefox Manifest V3, chrome.tabs.query returns a Promise without the callback.
8
- return new Promise(resolve => {
9
- chrome.tabs.query({active: true}, tabs => {
10
- resolve({
11
- page_url: tabs[0]?.url,
12
- });
13
- });
14
- });
7
+ const tabs = await chrome.tabs.query({active: true});
8
+ return {page_url: tabs[0]?.url};
9
});
10
}
11