webmarker-js 0.3.0 → 0.5.0

package/README.md

@@ -32,7 +32,7 @@ You can use this information to build your prompt for the vision-language model.
 Example prompt:
 
 ```javascript
-let markedElements = await mark();
+let markedElements = mark();
 
 let prompt = `The following is a screenshot of a web page.
 
@@ -148,7 +148,7 @@ Only mark elements that are visible in the current viewport.
 ### Advanced example
 
 ```typescript
-const markedElements = await mark({
+const markedElements = mark({
   // Only mark buttons and inputs
   selector: "button, input",
   // Use test id attribute for marker labels

package/chrome-extension/dist/index.d.ts

@@ -0,0 +1,72 @@
+type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+type StyleFunction = (element: Element, index: number) => Partial<CSSStyleDeclaration>;
+type StyleObject = Partial<CSSStyleDeclaration>;
+interface MarkOptions {
+    /**
+     * A CSS selector to query the elements to be marked.
+     */
+    selector?: string;
+    /**
+     * Provide a function for generating labels.
+     * By default, labels are generated as numbers starting from 0.
+     */
+    getLabel?: (element: Element, index: number) => string;
+    /**
+     * Name for the attribute added to the marked elements to store the mark label.
+     *
+     * @default 'data-mark-label'
+     */
+    markAttribute?: string;
+    /**
+     * The placement of the mark relative to the element.
+     *
+     * @default 'top-start'
+     */
+    markPlacement?: Placement;
+    /**
+     * A CSS style to apply to the label element.
+     * You can also specify a function that returns a CSS style object.
+     */
+    markStyle?: StyleObject | StyleFunction;
+    /**
+     * A CSS style to apply to the bounding box element.
+     * You can also specify a function that returns a CSS style object.
+     * Bounding boxes are only shown if `showBoundingBoxes` is `true`.
+     */
+    boundingBoxStyle?: StyleObject | StyleFunction;
+    /**
+     * Whether or not to show bounding boxes around the elements.
+     *
+     * @default true
+     */
+    showBoundingBoxes?: boolean;
+    /**
+     * Provide a container element to query the elements to be marked.
+     * By default, the container element is `document.body`.
+     */
+    containerElement?: Element;
+    /**
+     * Only mark elements that are visible in the current viewport
+     *
+     * @default false
+     */
+    viewPortOnly?: boolean;
+    /**
+     * Additional class to apply to the mark elements.
+     */
+    markClass?: string;
+    /**
+     * Additional class to apply to the bounding box elements.
+     */
+    boundingBoxClass?: string;
+}
+interface MarkedElement {
+    element: Element;
+    markElement: HTMLElement;
+    boundingBoxElement?: HTMLElement;
+}
+declare function mark(options?: MarkOptions): Record<string, MarkedElement>;
+declare function unmark(): void;
+declare function isMarked(): boolean;
+export { mark, unmark, isMarked };
+export type { MarkOptions, MarkedElement, Placement };