diff --git a/.changeset/eager-moles-grin.md b/.changeset/eager-moles-grin.md new file mode 100644 index 0000000..6782e25 --- /dev/null +++ b/.changeset/eager-moles-grin.md @@ -0,0 +1,5 @@ +--- +"@lightpanda/browser": minor +--- + +Feat/#23 Option external stylesheets diff --git a/packages/browser/package.json b/packages/browser/package.json index 13323b2..e76fcf7 100644 --- a/packages/browser/package.json +++ b/packages/browser/package.json @@ -9,13 +9,13 @@ "scripts": { "dev": "tsup index.ts --target node22 --format cjs,esm --dts --watch", "build:index": "tsup index.ts --target node22 --format cjs,esm --minify terser", - "build:decl": "yarn dlx --package=typescript tsc --emitDeclarationOnly --declaration", + "build:decl": "npx tsc --emitDeclarationOnly --declaration", "build:cli": "tsup cli/main.ts --target node22 --format cjs,esm --minify terser -d dist/cli", "build:postinstall": "tsup scripts/postinstall.ts --target node22 --format cjs,esm --minify terser -d dist/scripts", "build": "yarn build:index && yarn build:decl && yarn build:cli && yarn build:postinstall", "postinstall": "node dist/scripts/postinstall.js || true", "lint": "biome ci . --diagnostic-level=error", - "typecheck": "yarn dlx --package=typescript tsc --noEmit" + "typecheck": "npx tsc --noEmit" }, "bin": { "lightpanda": "./dist/cli/main.js" @@ -50,4 +50,4 @@ "dependencies": { "yargs": "^18.0.0" } -} +} \ No newline at end of file diff --git a/packages/browser/src/fetch.ts b/packages/browser/src/fetch.ts index 6872de4..24859ec 100644 --- a/packages/browser/src/fetch.ts +++ b/packages/browser/src/fetch.ts @@ -29,6 +29,7 @@ import { getExecutablePath, validateUrl } from './utils.js' export type LightpandaFetchOptions = { disableHostVerification?: boolean obeyRobots?: boolean + enableExternalStylesheets?: boolean httpProxy?: string dump?: boolean dumpOptions?: { type?: 'html' | 'markdown' } @@ -46,7 +47,14 @@ const defaultOptions: LightpandaFetchOptions = { * @returns {Promise} */ export const fetch = (url: string, options: LightpandaFetchOptions = defaultOptions) => { - const { dump, dumpOptions, disableHostVerification, obeyRobots, httpProxy } = options + const { + dump, + dumpOptions, + disableHostVerification, + obeyRobots, + enableExternalStylesheets, + httpProxy, + } = options validateUrl(url) if (httpProxy) { @@ -60,6 +68,7 @@ export const fetch = (url: string, options: LightpandaFetchOptions = defaultOpti { flag: `--dump ${dumpOptions?.type ?? 'html'}`, condition: dump }, { flag: '--insecure-disable-tls-host-verification', condition: disableHostVerification }, { flag: '--obey-robots', condition: obeyRobots }, + { flag: '--enable-external-stylesheets', condition: enableExternalStylesheets }, { flag: `--http-proxy ${httpProxy}`, condition: httpProxy }, ] .map(f => (f.condition ? f.flag : '')) diff --git a/packages/browser/src/serve.ts b/packages/browser/src/serve.ts index 3942755..191f047 100644 --- a/packages/browser/src/serve.ts +++ b/packages/browser/src/serve.ts @@ -23,6 +23,7 @@ import { getExecutablePath, validatePort, validateUrl } from './utils.js' * @property {string} port - Port of the CDP server * @property {boolean} disableHostVerification - Disables host verification on all HTTP requests * @property {boolean} obeyRobots - Fetches and obeys the robots.txt (if available) of the web pages we make requests towards. + * @property {boolean} enableExternalStylesheets - Fetch external resources so their rules contribute to computed styles (and therefore to visibility checks like display, visibility, opacity, pointer-events). Defaults to false, except in agent mode with an LLM, where it is on. * @property {string} httpProxy - The HTTP proxy to use for all HTTP requests */ export type LightpandaServeOptions = { @@ -30,6 +31,7 @@ export type LightpandaServeOptions = { port?: number disableHostVerification?: boolean obeyRobots?: boolean + enableExternalStylesheets?: boolean httpProxy?: string } @@ -44,7 +46,8 @@ const defaultOptions: LightpandaServeOptions = { * @returns {Promise} */ export const serve = (options: LightpandaServeOptions = defaultOptions) => { - const { host, port, disableHostVerification, obeyRobots, httpProxy } = options + const { host, port, disableHostVerification, obeyRobots, enableExternalStylesheets, httpProxy } = + options if (port) { validatePort(port) @@ -68,6 +71,11 @@ export const serve = (options: LightpandaServeOptions = defaultOptions) => { value: obeyRobots, flagOnly: true, }, + { + flag: '--enable-external-stylesheets', + value: enableExternalStylesheets, + flagOnly: true, + }, { flag: '--http-proxy', value: httpProxy }, ] .flatMap(f => (f.value ? [f.flag, !f.flagOnly ? f.value.toString() : ''] : ''))