webmarker-js 0.5.0 → 0.7.0

package/README.md

@@ -87,7 +87,7 @@ await page.evaluate(async () => await WebMarker.unmark());
 A custom CSS selector to specify which elements to mark.
 
 - Type: `string`
-- Default: `"button, input, a, select, textarea"`
+- Default: `'a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])'`
 
 ### getLabel
 
@@ -158,7 +158,7 @@ const markedElements = mark({
   // Use a blue dashed outline with a transparent and slighly blue background
   boundingBoxStyle: { outline: "2px dashed blue", backgroundColor: "rgba(0, 0, 255, 0.1)"},
   // Place the mark at the top right corner of the element
-  markPlacement: "top-end";
+  markPlacement: "top-end",
   // Show bounding boxes over elements (defaults to true)
   showBoundingBoxes: true,
   // Generate labels as 'Element 0', 'Element 1', 'Element 2'...

package/dist/main.js

@@ -931,7 +931,7 @@ var WebMarker = (() => {
   function mark(options = {}) {
     try {
       const {
-        selector = "button, input, a, select, textarea",
+        selector = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])',
         getLabel = (_, index) => index.toString(),
         markAttribute = "data-mark-label",
         markPlacement = "top-start",
@@ -972,7 +972,7 @@ var WebMarker = (() => {
           markClass
         );
         fragment.appendChild(markElement);
-        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass) : void 0;
         if (boundingBoxElement) {
           fragment.appendChild(boundingBoxElement);
         }
@@ -1010,7 +1010,7 @@ var WebMarker = (() => {
     );
     return markElement;
   }
-  function createBoundingBox(element, style, label, boundingBoxClass) {
+  function createBoundingBox(element, index, style, label, boundingBoxClass) {
     const boundingBoxElement = document.createElement("div");
     boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
     boundingBoxElement.id = `webmarker-bounding-box-${label}`;
@@ -1031,7 +1031,7 @@ var WebMarker = (() => {
         position: "absolute",
         pointerEvents: "none"
       },
-      typeof style === "function" ? style(element, parseInt(label)) : style
+      typeof style === "function" ? style(element, index) : style
     );
     return boundingBoxElement;
   }

package/dist/module.js

@@ -907,7 +907,7 @@ var cleanupFns = [];
 function mark(options = {}) {
   try {
     const {
-      selector = "button, input, a, select, textarea",
+      selector = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])',
       getLabel = (_, index) => index.toString(),
       markAttribute = "data-mark-label",
       markPlacement = "top-start",
@@ -948,7 +948,7 @@ function mark(options = {}) {
         markClass
       );
       fragment.appendChild(markElement);
-      const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+      const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass) : void 0;
       if (boundingBoxElement) {
         fragment.appendChild(boundingBoxElement);
       }
@@ -986,7 +986,7 @@ function createMark(element, index, style, label, markPlacement = "top-start", m
   );
   return markElement;
 }
-function createBoundingBox(element, style, label, boundingBoxClass) {
+function createBoundingBox(element, index, style, label, boundingBoxClass) {
   const boundingBoxElement = document.createElement("div");
   boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
   boundingBoxElement.id = `webmarker-bounding-box-${label}`;
@@ -1007,7 +1007,7 @@ function createBoundingBox(element, style, label, boundingBoxClass) {
       position: "absolute",
       pointerEvents: "none"
     },
-    typeof style === "function" ? style(element, parseInt(label)) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return boundingBoxElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webmarker-js",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A library for marking web pages for Set-of-Mark prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -14,7 +14,7 @@
     "docs:dev": "cd docs && next",
     "docs:build": "cd docs && next build",
     "docs:start": "cd docs && next start",
-    "test:playwright": "cd test/playwright && npx playwright test"
+    "test:playwright": "npx playwright test"
   },
   "author": "Reid Barber",
   "license": "MIT",