Source from repo

URL to Markdown

Fetch any URL via Chrome CDP and convert the rendered page to clean markdown with YouTube transcript support.

jimliuGitHub jimliuSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

271.9 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

scripts/lib/browser/page-snapshot.ts

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

code106 linesFree

scripts/lib/browser/page-snapshot.ts

1import type { BrowserSession } from "./session";
2 
3export interface CapturedPageSnapshot {
4  html: string;
5  finalUrl: string;
6}
7 
8export const CAPTURE_NORMALIZED_PAGE_SCRIPT = String.raw`
9(() => {
10  const baseUrl = document.baseURI || location.href;
11  const htmlClone = document.documentElement.cloneNode(true);
12 
13  function materializeShadowDom(sourceRoot, cloneRoot) {
14    const sourceElements = Array.from(sourceRoot.querySelectorAll("*"));
15    const cloneElements = Array.from(cloneRoot.querySelectorAll("*"));
16 
17    for (let index = sourceElements.length - 1; index >= 0; index -= 1) {
18      const sourceElement = sourceElements[index];
19      const cloneElement = cloneElements[index];
20      const shadowRoot = sourceElement && sourceElement.shadowRoot;
21      if (!shadowRoot || !cloneElement || !shadowRoot.innerHTML) {
22        continue;
23      }
24 
25      if (cloneElement.tagName && cloneElement.tagName.includes("-")) {
26        const wrapper = document.createElement("div");
27        wrapper.setAttribute("data-shadow-host", cloneElement.tagName.toLowerCase());
28        wrapper.innerHTML = shadowRoot.innerHTML;
29        cloneElement.replaceWith(wrapper);
30      } else {
31        cloneElement.innerHTML = shadowRoot.innerHTML;
32      }
33    }
34  }
35 
36  function toAbsolute(url) {
37    if (!url) return url;
38    try {
39      return new URL(url, baseUrl).href;
40    } catch {
41      return url;
42    }
43  }
44 
45  function absolutizeAttribute(root, selector, attribute) {
46    root.querySelectorAll(selector).forEach((element) => {
47      const value = element.getAttribute(attribute);
48      if (!value) return;
49      const absolute = toAbsolute(value);
50      if (absolute) {
51        element.setAttribute(attribute, absolute);
52      }
53    });
54  }
55 
56  function absolutizeSrcset(root, selector) {
57    root.querySelectorAll(selector).forEach((element) => {
58      const srcset = element.getAttribute("srcset");
59      if (!srcset) return;
60      element.setAttribute(
61        "srcset",
62        srcset
63          .split(",")
64          .map((part) => {
65            const trimmed = part.trim();
66            if (!trimmed) return "";
67            const [url, ...descriptor] = trimmed.split(/\s+/);
68            const absolute = toAbsolute(url);
69            return descriptor.length > 0 ? absolute + " " + descriptor.join(" ") : absolute;
70          })
71          .filter(Boolean)
72          .join(", "),
73      );
74    });
75  }
76 
77  materializeShadowDom(document.documentElement, htmlClone);
78 
79  htmlClone
80    .querySelectorAll("img[data-src], video[data-src], audio[data-src], source[data-src]")
81    .forEach((element) => {
82      const dataSource = element.getAttribute("data-src");
83      const current = element.getAttribute("src");
84      if (dataSource && (!current || current === "" || current.startsWith("data:"))) {
85        element.setAttribute("src", dataSource);
86      }
87    });
88 
89  absolutizeAttribute(htmlClone, "a[href]", "href");
90  absolutizeAttribute(htmlClone, "img[src], video[src], audio[src], source[src], iframe[src]", "src");
91  absolutizeAttribute(htmlClone, "video[poster]", "poster");
92  absolutizeSrcset(htmlClone, "img[srcset], source[srcset]");
93 
94  return {
95    html: "<!doctype html>\n" + htmlClone.outerHTML,
96    finalUrl: location.href,
97  };
98})()
99`;
100 
101export async function captureNormalizedPageSnapshot(
102  browser: BrowserSession,
103): Promise<CapturedPageSnapshot> {
104  return browser.evaluate<CapturedPageSnapshot>(CAPTURE_NORMALIZED_PAGE_SCRIPT);
105}
106

Marketplace

Source from repo

URL to Markdown

Fetch any URL via Chrome CDP and convert the rendered page to clean markdown with YouTube transcript support.

jimliuGitHub jimliuSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

271.9 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

scripts/lib/browser/page-snapshot.ts

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

code106 linesFree

scripts/lib/browser/page-snapshot.ts

1import type { BrowserSession } from "./session";
2 
3export interface CapturedPageSnapshot {
4  html: string;
5  finalUrl: string;
6}
7 
8export const CAPTURE_NORMALIZED_PAGE_SCRIPT = String.raw`
9(() => {
10  const baseUrl = document.baseURI || location.href;
11  const htmlClone = document.documentElement.cloneNode(true);
12 
13  function materializeShadowDom(sourceRoot, cloneRoot) {
14    const sourceElements = Array.from(sourceRoot.querySelectorAll("*"));
15    const cloneElements = Array.from(cloneRoot.querySelectorAll("*"));
16 
17    for (let index = sourceElements.length - 1; index >= 0; index -= 1) {
18      const sourceElement = sourceElements[index];
19      const cloneElement = cloneElements[index];
20      const shadowRoot = sourceElement && sourceElement.shadowRoot;
21      if (!shadowRoot || !cloneElement || !shadowRoot.innerHTML) {
22        continue;
23      }
24 
25      if (cloneElement.tagName && cloneElement.tagName.includes("-")) {
26        const wrapper = document.createElement("div");
27        wrapper.setAttribute("data-shadow-host", cloneElement.tagName.toLowerCase());
28        wrapper.innerHTML = shadowRoot.innerHTML;
29        cloneElement.replaceWith(wrapper);
30      } else {
31        cloneElement.innerHTML = shadowRoot.innerHTML;
32      }
33    }
34  }
35 
36  function toAbsolute(url) {
37    if (!url) return url;
38    try {
39      return new URL(url, baseUrl).href;
40    } catch {
41      return url;
42    }
43  }
44 
45  function absolutizeAttribute(root, selector, attribute) {
46    root.querySelectorAll(selector).forEach((element) => {
47      const value = element.getAttribute(attribute);
48      if (!value) return;
49      const absolute = toAbsolute(value);
50      if (absolute) {
51        element.setAttribute(attribute, absolute);
52      }
53    });
54  }
55 
56  function absolutizeSrcset(root, selector) {
57    root.querySelectorAll(selector).forEach((element) => {
58      const srcset = element.getAttribute("srcset");
59      if (!srcset) return;
60      element.setAttribute(
61        "srcset",
62        srcset
63          .split(",")
64          .map((part) => {
65            const trimmed = part.trim();
66            if (!trimmed) return "";
67            const [url, ...descriptor] = trimmed.split(/\s+/);
68            const absolute = toAbsolute(url);
69            return descriptor.length > 0 ? absolute + " " + descriptor.join(" ") : absolute;
70          })
71          .filter(Boolean)
72          .join(", "),
73      );
74    });
75  }
76 
77  materializeShadowDom(document.documentElement, htmlClone);
78 
79  htmlClone
80    .querySelectorAll("img[data-src], video[data-src], audio[data-src], source[data-src]")
81    .forEach((element) => {
82      const dataSource = element.getAttribute("data-src");
83      const current = element.getAttribute("src");
84      if (dataSource && (!current || current === "" || current.startsWith("data:"))) {
85        element.setAttribute("src", dataSource);
86      }
87    });
88 
89  absolutizeAttribute(htmlClone, "a[href]", "href");
90  absolutizeAttribute(htmlClone, "img[src], video[src], audio[src], source[src], iframe[src]", "src");
91  absolutizeAttribute(htmlClone, "video[poster]", "poster");
92  absolutizeSrcset(htmlClone, "img[srcset], source[srcset]");
93 
94  return {
95    html: "<!doctype html>\n" + htmlClone.outerHTML,
96    finalUrl: location.href,
97  };
98})()
99`;
100 
101export async function captureNormalizedPageSnapshot(
102  browser: BrowserSession,
103): Promise<CapturedPageSnapshot> {
104  return browser.evaluate<CapturedPageSnapshot>(CAPTURE_NORMALIZED_PAGE_SCRIPT);
105}
106

URL to Markdown

scripts/lib/browser/page-snapshot.ts

Preparing the source view

URL to Markdown

scripts/lib/browser/page-snapshot.ts