Knowledge & page-load imporvements

manifest.js

@@ -42,6 +42,7 @@ const manifest = {
       matches: ["http://*/*", "https://*/*", "<all_urls>"],
       js: ["src/pages/content/index.js"],
       css: ["assets/css/contentStyleGlobal.css"],
+      run_at: "document_start", // load the js as soon as possible since it does not rely on the DOM
     },
   ],
   // devtools_page: "src/pages/devtools/index.html",

src/helpers/knowledge/db.json

@@ -51,7 +51,7 @@
   "airbnb.com": {
     "rules": [
       {
-        "regexes": ["^/?$"],
+        "regexes": [".*"],
         "knowledge": {
           "annotationRules": [
             {
@@ -64,5 +64,27 @@
         }
       }
     ]
+  },
+  "amazon.com": {
+    "rules": [
+      {
+        "regexes": [".*"],
+        "knowledge": {
+          "notes": [
+            "Be careful not to confuse the \"Add to Cart\" with the \"Buy Now\". The \"Add to Cart\" button adds the item to the cart, while the \"Buy Now\" button takes you to the checkout page.",
+            "Do not confuse \"Buy Now\" and \"Buy New\" on product page.",
+            "You should always verify if the product is in stock before buying or adding to the cart. If the product is not in stock, you should notify the user about it."
+          ]
+        }
+      },
+      {
+        "regexes": ["^/s$"],
+        "knowledge": {
+          "notes": [
+            "There is no \"Add to Cart\" button on the search results page. You need to click on the product name to go to the product details page first."
+          ]
+        }
+      }
+    ]
   }
 }

src/helpers/knowledge/redirects.json

@@ -2,5 +2,6 @@
   "twitter.com": "x.com",
   "www.twitter.com": "x.com",
   "www.x.com": "x.com",
-  "www.airbnb.com": "airbnb.com"
+  "www.airbnb.com": "airbnb.com",
+  "www.amazon.com": "amazon.com"
 }

src/helpers/rpc/domActions.ts

@@ -78,14 +78,15 @@ export class DomActions {
     y: number,
     clickCount = 1,
   ): Promise<void> {
-    callRPCWithTab(this.tabId, "ripple", [x, y]);
+    await callRPCWithTab(this.tabId, "ripple", [x, y]);
     await this.sendCommand("Input.dispatchMouseEvent", {
       type: "mousePressed",
       x,
       y,
       button: "left",
       clickCount,
     });
+    await sleep(20);
     await this.sendCommand("Input.dispatchMouseEvent", {
       type: "mouseReleased",
       x,

src/pages/content/drawLabels.ts

@@ -10,7 +10,7 @@ styleElem.setAttribute("type", "text/css");
 styleElem.innerHTML = `
 ._label_overlay_wrapper {
   position: absolute;
-  z-index: 9999;
+  z-index: 99999999;
   top: 0;
   left: 0;
 }
@@ -68,8 +68,8 @@ function isVisible(
   const { display, visibility, opacity } = style;
   if (display === "none") return false;
   if (visibility !== "visible") return false;
-  if (opacity != null && parseFloat(opacity) < 0.1) return false; // considering something very close to 0 as invisible
-  // don't respect 'aria-hidden' attribute since they are most likely visible to the user
+  if (opacity != null && parseFloat(opacity) <= 0) return false;
+  // don't respect 'aria-hidden' attribute since they are most likely visible in the screenshot
   // if (element.getAttribute('aria-hidden') === 'true') return false;
 
   const rect = element.getBoundingClientRect();

src/pages/content/ripple.ts

@@ -1,6 +1,6 @@
 import { sleep } from "../../helpers/utils";
 
-export default async function ripple(x: number, y: number) {
+export default function ripple(x: number, y: number) {
   const rippleRadius = 30;
   const ripple = document.createElement("div");
   ripple.classList.add("web-agent-ripple");
@@ -11,6 +11,9 @@ export default async function ripple(x: number, y: number) {
 
   document.body.appendChild(ripple);
 
-  await sleep(1000);
-  ripple.remove();
+  // remove after the animation to finish
+  // but we don't need to `await` it
+  sleep(800).then(() => {
+    ripple.remove();
+  });
 }

src/pages/content/style.global.scss

@@ -8,7 +8,7 @@
   animation: web-agent-ripple 0.5s ease-out;
   background-color: rgba(0, 0, 255, 0.961);
   pointer-events: none;
-  z-index: 9999;
+  z-index: 999999;
 }
 
 @keyframes web-agent-ripple {