Updated version 1.1.0 and upgraded various devDependencies.

Improved type annotations.
Enhanced event listener parameter types.
Fixed potential null reference in report.js when clearing the report table.
Added error handling for script and CSS injection.
Updated event parameter types in toolbar.js for better clarity.

Author: MarkusBordihn

eslint.config.mjs

@@ -65,6 +65,7 @@ export default [
           Object.entries(globals.serviceworker).map(([key]) => [key, 'off']),
         ),
         console: true,
+        crypto: true,
         DEVMODE: false,
         VERSION: false,
         ViewabilityInsights: true,

package-lock.json

@@ -1,28 +1,28 @@
 {
   "name": "admanager-viewability-insights",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "author": "Markus Bordihn <mbordihn@google.com>",
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "@material-design-icons/font": "^0.14.13",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "@material-design-icons/font": "^0.14.15",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
-    "eslint": "^9.9.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-compat": "^6.0.1",
-    "eslint-plugin-jsdoc": "^50.2.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-compat": "^6.0.2",
+    "eslint-plugin-jsdoc": "^61.1.5",
+    "eslint-plugin-prettier": "^5.5.4",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.2",
+    "html-webpack-plugin": "^5.6.4",
+    "mini-css-extract-plugin": "^2.9.4",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4"
+    "terser-webpack-plugin": "^5.3.14",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1"
   },
   "scripts": {
     "test": "npm run build:dev & npm run build",

package.json

@@ -71,7 +71,7 @@ class ContentScript {
   }
 
   /**
-   * @param {*} message Message
+   * @param {object} message Message
    */
   handlePortMessage(message) {
     if (message && message.token) {
@@ -124,9 +124,10 @@ class ContentScript {
     if (
       event.source !== window ||
       !event.data ||
-      typeof event.data.token == 'undefined' ||
+      typeof event.data !== 'object' ||
+      !event.data.token ||
       !this.token ||
-      event.data.token != this.token
+      event.data.token !== this.token
     ) {
       return;
     }

src/content_script/content_script.js

@@ -74,7 +74,7 @@ export default class ViewabilityInsights {
 
   /**
    * @param {string} name Event Name
-   * @param {Function} listener Event Listener
+   * @param {(...args: unknown[]) => void} listener Event Listener
    */
   addEventListener(name, listener) {
     try {
@@ -518,19 +518,15 @@ export default class ViewabilityInsights {
       ) {
         const overlayRect = overlay.getBoundingClientRect();
         const iframeRect = iframeElement.getBoundingClientRect();
-        if (overlayRect && iframeRect) {
-          if (
-            Math.abs(Math.round(overlayRect.top) - Math.round(iframeRect.top)) >
-            1
-          ) {
-            overlay.style.top = iframeRect.top - overlayRect.top + 'px';
+        const parentRect = overlay.parentElement.getBoundingClientRect();
+        if (overlayRect && iframeRect && parentRect) {
+          const topDiff = Math.round(iframeRect.top - parentRect.top);
+          const leftDiff = Math.round(iframeRect.left - parentRect.left);
+          if (Math.abs(topDiff) > 1) {
+            overlay.style.top = topDiff + 'px';
           }
-          if (
-            Math.abs(
-              Math.round(overlayRect.left) - Math.round(iframeRect.left),
-            ) > 1
-          ) {
-            overlay.style.left = iframeRect.left - overlayRect.left + 'px';
+          if (Math.abs(leftDiff) > 1) {
+            overlay.style.left = leftDiff + 'px';
           }
         }
       }

src/gpt/gpt_integration_script.js

@@ -1,7 +1,7 @@
 {
   "name": "Ad Manager Viewability Insights",
   "description": "A DevTools extension for inspecting the viewability of Ad Manager Ads",
-  "version": "0.8.0",
+  "version": "1.1.0",
   "manifest_version": 3,
   "icons": {
     "32": "logo_48px.png"

src/manifest.json

@@ -41,7 +41,7 @@ class MessageHandler {
     this.sender = null;
     this.statusbar = null;
     this.tabId = null;
-    this.token = Math.random().toString(36).substring(2);
+    this.token = crypto.randomUUID();
     this.toolbar = null;
   }
 
@@ -82,20 +82,22 @@ class MessageHandler {
    * @see https://developer.chrome.com/docs/extensions/reference/runtime/#event-onConnect
    */
   handleConnect(port) {
-    this.port = port;
-    this.sender = port.sender;
-    this.tabId = this.sender.tab.id;
-
     // Ignore events from other tabs.
-    if (this.tabId != chrome.devtools.inspectedWindow.tabId) {
+    if (
+      !port.sender?.tab?.id ||
+      port.sender?.tab?.id !== chrome.devtools.inspectedWindow.tabId
+    ) {
       return;
     }
 
     // Ignore events from other names.
-    if (port.name != this.connectionName) {
+    if (port.name !== this.connectionName) {
       return;
     }
 
+    this.port = port;
+    this.sender = port.sender;
+    this.tabId = this.sender.tab.id;
     this.connected = false;
 
     // Add Message Listener
@@ -107,7 +109,7 @@ class MessageHandler {
   }
 
   /**
-   * @param {Function} message Callback function for messages.
+   * @param {object} message Callback function for messages.
    * @see https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage
    */
   handleMessage(message) {

src/panel/message_handler.js

@@ -63,15 +63,17 @@ class Report {
    */
   clear() {
     const reportTable = document.querySelector('#report > tbody');
-    reportTable.parentNode.replaceChild(
-      document.createElement('tbody'),
-      reportTable,
-    );
+    if (reportTable?.parentNode) {
+      reportTable.parentNode.replaceChild(
+        document.createElement('tbody'),
+        reportTable,
+      );
+    }
     this.slotCounter = 0;
   }
 
   /**
-   * @param {*} slot Slot
+   * @param {object} slot Slot
    * @returns {HTMLElement} row
    */
   addSlot(slot) {
@@ -149,7 +151,7 @@ class Report {
   }
 
   /**
-   * @param {*} slot Slot
+   * @param {object} slot Slot
    */
   updateSlot(slot) {
     if (!slot) {
@@ -216,7 +218,7 @@ class Report {
   }
 
   /**
-   * @param {*} event Event
+   * @param {MouseEvent} event Event
    */
   scrollIntoView(event) {
     if (event.target && event.target.innerText) {
@@ -228,8 +230,8 @@ class Report {
    * @param {HTMLElement} row Row
    * @param {number} index Index
    * @param {string} name Name
-   * @param {*} value Value
-   * @param {Function?} clickHandler Click handler
+   * @param {string|number|boolean} value Value
+   * @param {((event: MouseEvent) => void)|null} clickHandler Click handler
    * @private
    */
   insertCell_(row, index, name, value, clickHandler = null) {

src/panel/report.js

@@ -38,6 +38,10 @@ class ScriptHandler {
         world: 'MAIN',
       },
       (injectionResults) => {
+        if (chrome.runtime.lastError) {
+          console.error('Script injection failed:', chrome.runtime.lastError);
+          return;
+        }
         console.log('Inject Script results:', injectionResults);
         ScriptHandler.injectStyleSheet(tabId);
         ScriptHandler.initScript(tabId, sessionToken);
@@ -56,6 +60,10 @@ class ScriptHandler {
         target: { tabId: tabId },
       },
       (injectionResults) => {
+        if (chrome.runtime.lastError) {
+          console.error('CSS injection failed:', chrome.runtime.lastError);
+          return;
+        }
         console.log('Inject StyleSheet results:', injectionResults);
       },
     );

src/panel/script_handler.js

@@ -55,7 +55,7 @@ class Toolbar {
   }
 
   /**
-   * @param {event} event Event
+   * @param {MouseEvent} event Event
    */
   reloadPage(event) {
     if (event && chrome.devtools.inspectedWindow.tabId) {
@@ -73,7 +73,7 @@ class Toolbar {
   }
 
   /**
-   * @param {*} event Event
+   * @param {MouseEvent} event Event
    */
   showViewableOverlay(event) {
     console.debug('Show Viewable Overlay', event.currentTarget.checked);