EOL notice (#193)

* EOL notice

* review feedback

Author: rviscomi

README.md

@@ -1,3 +1,6 @@
+> [!WARNING]
+> The Chrome team has been working hard to bring the best of the Web Vitals extension directly into the DevTools Performance panel. As of Chrome version 132, which became stable on January 7, 2025, we have finally ended support for the extension and encourage all users to switch to DevTools. Be aware that extension updates will stop and features may break without notice. [Learn more](https://developer.chrome.com/blog/web-vitals-extension)
+
 # Web Vitals Chrome Extension 
 *A Chrome extension to measure metrics for a healthy site* 
 [Install now](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Web Vitals",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "manifest_version": 3,
   "description": "Measure metrics for a healthy site",
   "homepage_url": "https://web.dev/articles/vitals",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals-extension",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Instant Web Vitals metrics",
   "main": "src/browser_action/vitals.js",
   "repository": "https://github.com/GoogleChrome/web-vitals-extension",

src/browser_action/core.css

@@ -395,3 +395,24 @@
 .web-vitals-chrome-extension-popup #settings-link a:hover svg {
   color: blue;
 }
+
+.web-vitals-chrome-extension-popup #eol-notice {
+  border: 4px solid var(--color-needs-improvement);
+  margin: auto 20px;
+  padding: 0 30px;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+.web-vitals-chrome-extension-popup #eol-notice::backdrop {
+  backdrop-filter: blur(1px);
+}
+.web-vitals-chrome-extension-popup button.danger {
+  background-color: var(--color-needs-improvement);
+  border: none;
+}
+.web-vitals-chrome-extension-popup #eol-notice > :first-child {
+  margin-top: 30px;
+}
+.web-vitals-chrome-extension-popup #eol-notice > :last-child {
+  margin-bottom: 30px;
+}

src/browser_action/crux.js

@@ -11,7 +11,6 @@ export class CrUX {
     const origin = urlHelper.origin;
 
     return CrUX.query({url, formFactor}).catch(e =>{
-      console.warn('CrUX URL data unavailable', e);
       // If URL data is unavailable, fall back to the origin.
       return CrUX.query({origin, formFactor});
     });

src/browser_action/popup.html

@@ -80,6 +80,19 @@ <h1>Metrics</h1>
 
     </footer>
 
+    <dialog id="eol-notice" popover>
+      <p>
+        As of January 2025, support for the Web Vitals extension has ended.
+        We encourage all users to switch to the DevTools Performance panel instead.
+        <a href="https://developer.chrome.com/blog/web-vitals-extension" target="_blank">Learn more</a>
+      </p>
+
+      <div>
+        <button class="danger" popovertarget="eol-notice" popovertargetaction="hide">I understand</button>
+        <label><input type="checkbox" id="hide-eol-notice">Don't show again</label>
+      </div>
+    </dialog>
+
     <script type="module" src="popup.js"></script>
   </body>
 </html>

src/browser_action/popup.js

@@ -44,6 +44,7 @@ class Popup {
     this.initTimestamp();
     this.initMetrics();
     this.initFieldData();
+    this.showEOLNotice();
   }
 
   initStatus() {
@@ -95,11 +96,25 @@ class Popup {
       console.log('CrUX data', fieldData);
       this.renderFieldData(fieldData, formFactor);
     }).catch(e => {
-      console.warn('Unable to load any CrUX data', e);
+      console.warn('Unable to load any CrUX data. See https://developer.chrome.com/blog/web-vitals-extension', e);
       this.setStatus('Local metrics only (field data unavailable)');
     });
   }
 
+  showEOLNotice() {
+    chrome.storage.sync.get({hideEOLNotice: false}, ({hideEOLNotice}) => {
+      if (hideEOLNotice) {
+        return;
+      }
+      const notice = document.getElementById('eol-notice');
+      notice.showPopover();
+      const hideNoticeToggle = document.getElementById('hide-eol-notice');
+      hideNoticeToggle.addEventListener('change', (e) => {
+        chrome.storage.sync.set({hideEOLNotice: e.target.checked});
+      });
+    });
+  }
+
   setStatus(status) {
     const statusElement = document.getElementById('status');
 

src/browser_action/vitals.js

@@ -254,6 +254,12 @@
       default:
         formattedValue = secondsFormatter.format(metric.value / 1000);
     }
+
+    // Log the EOL warning at the same time as TTFB, which should only occur once per page load.
+    if (metric.name === 'TTFB') {
+      console.warn(`${LOG_PREFIX} As of January 2025, support for the Web Vitals extension has ended. We encourage all users to switch to the DevTools Performance panel instead. Learn more: https://developer.chrome.com/blog/web-vitals-extension`);
+    }
+
     console.groupCollapsed(
       `${LOG_PREFIX} ${metric.name} %c${formattedValue} (${metric.rating})`,
       `color: ${RATING_COLORS[metric.rating] || 'inherit'}`

src/options/options.html

@@ -37,6 +37,11 @@
                     <input type="checkbox" id="noBadgeAnimation">
                     Only show overall status in badge (no animation of failing metrics)
                 </label>
+                <br/>
+                <label for="hideEOLNotice">
+                    <input type="checkbox" id="hideEOLNotice">
+                    Never show extension deprecation notice
+                </label> (<a href="https://developer.chrome.com/blog/web-vitals-extension">Learn more</a>)
                 <div id="status"></div>
                 <button id="save">Save</button>
                 </div>

src/options/options.js

@@ -3,6 +3,7 @@ const optionsConsoleLoggingNode = document.getElementById('consoleLogging');
 const optionsNoBadgeAnimation = document.getElementById('noBadgeAnimation');
 const optionsUserTimingNode = document.getElementById('userTiming');
 const optionsPreferPhoneFieldNode = document.getElementById('preferPhoneField');
+const optionsHideEOLNotice = document.getElementById('hideEOLNotice');
 const optionsSaveBtn = document.getElementById('save');
 const optionsStatus = document.getElementById('status');
 
@@ -16,6 +17,7 @@ function saveOptions() {
     userTiming: optionsUserTimingNode.checked,
     preferPhoneField: optionsPreferPhoneFieldNode.checked,
     noBadgeAnimation: optionsNoBadgeAnimation.checked,
+    hideEOLNotice: optionsHideEOLNotice.checked,
   }, () => {
     // Update status to let user know options were saved.
     optionsStatus.textContent = 'Options saved.';
@@ -36,12 +38,14 @@ function restoreOptions() {
     userTiming: false,
     preferPhoneField: false,
     noBadgeAnimation: false,
-  }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation}) => {
+    hideEOLNotice: false,
+  }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation, hideEOLNotice}) => {
     optionsOverlayNode.checked = enableOverlay;
     optionsConsoleLoggingNode.checked = debug;
     optionsUserTimingNode.checked = userTiming;
     optionsPreferPhoneFieldNode.checked = preferPhoneField;
     optionsNoBadgeAnimation.checked = noBadgeAnimation;
+    optionsHideEOLNotice.checked = hideEOLNotice;
   });
 }
 document.addEventListener('DOMContentLoaded', restoreOptions);