From 0f1a85ca438ae4c9cd27cc137ec855c3ba8ccfb3 Mon Sep 17 00:00:00 2001
From: brave-builds <brave-builds+devops@brave.com>
Date: Fri, 15 Sep 2023 21:25:14 +0000
Subject: [PATCH] Uplift of #20178 (squashed) to release

---
 .../extension/brave_extension/manifest.json   |  3 ++-
 .../extension/brave_extension/webstore.ts     | 20 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/brave_extension/extension/brave_extension/manifest.json b/components/brave_extension/extension/brave_extension/manifest.json
index 884bc1020e6f..cf76ba5147f5 100644
--- a/components/brave_extension/extension/brave_extension/manifest.json
+++ b/components/brave_extension/extension/brave_extension/manifest.json
@@ -44,7 +44,8 @@
     },
     {
       "matches": [
-        "https://chrome.google.com/webstore/*"
+        "https://chrome.google.com/webstore/*",
+        "https://chromewebstore.google.com/*"
       ],
       "js": [
         "out/webstore.bundle.js"
diff --git a/components/brave_extension/extension/brave_extension/webstore.ts b/components/brave_extension/extension/brave_extension/webstore.ts
index c017b5237f73..170d5efcf20f 100644
--- a/components/brave_extension/extension/brave_extension/webstore.ts
+++ b/components/brave_extension/extension/brave_extension/webstore.ts
@@ -7,9 +7,12 @@ import { getLocale } from './background/api/localeAPI'
 
 const config = { attributes: true, childList: true, subtree: true }
 
-const callback = (mutationsList: MutationRecord[], observer: MutationObserver) => {
-  const buttons = document.querySelectorAll('div.webstore-test-button-label')
-  buttons.forEach((button: Element) => {
+const callback = () => {
+  const buttonQueries = [
+    'div.webstore-test-button-label', // https://chrome.google.com/webstore
+    'button span[jsname]:not(:empty)' // https://chromewebstore.google.com/
+  ]
+  for (const button of document.querySelectorAll(buttonQueries.join(','))) {
     const text = button.textContent || ''
     if (text === getLocale('addToChrome')) {
       button.textContent =
@@ -18,11 +21,14 @@ const callback = (mutationsList: MutationRecord[], observer: MutationObserver) =
       button.textContent =
         getLocale('removeFromBrave') || text.replace('Chrome', 'Brave')
     }
-  })
+  }
 }
 
 const observer: MutationObserver = new MutationObserver(callback)
 
-window.onload = () => {
-  observer.observe(document, config)
-}
+// At https://chromewebstore.google.com, "*Chrome" buttons are displayed
+// shortly after the first paint, and long before either `DOMContentLoaded` or
+// `window.load` fire, so we must start watching for document mutations as soon
+// as possible. The performance impact of observing mutations prior to `onload`
+// is non-trivial but small (measured at 60ms on a development build).
+observer.observe(document, config)