npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@karinjs/plugin-puppeteer

v2.0.2

Published

karin 的 puppeteer 截图、渲染插件

Readme

@karinjs/plugin-puppeteer

node-karin 的 Puppeteer 截图/渲染插件,基于 @snapka/puppeteer 封装。

功能

  • 自动下载/查找系统中的 Chrome 浏览器
  • 支持 CDP 和 WebDriver BiDi 两种协议
  • 页面池管理(复用 / 一次性模式)
  • 并发截图队列与限速
  • 提供 Web 管理面板(通过 node-karin Web UI 配置)
  • 配置热更新

安装

作为 node-karin 插件安装:

pnpm add @karinjs/plugin-puppeteer -w

配置

插件首次运行时会自动生成默认配置文件,位于 <karin数据目录>/@karinjs-plugin-puppeteer/config/config.json

也可以通过 node-karin 的 Web 管理面板修改配置。

配置项

| 配置项 | 类型 | 默认值 | 说明 | |---|---|---|---| | protocol | 'cdp' \| 'webDriverBiDi' | 'cdp' | 浏览器通信协议。CDP 稳定,BiDi 更快但仍在开发中 | | headless | 'new' \| 'shell' \| false | 'shell' | 无头模式。'new' 新版无头、'shell' 传统无头(仅 chrome-headless-shell)、false 有头 | | debug | boolean | false | 调试模式,浏览器前台运行且页面不自动关闭(仅 Windows) | | findBrowser | boolean | true | 是否使用 @snapka/browser-finder 自动查找系统/puppeteer/playwright 已有的浏览器 | | pipe | boolean | false | 是否使用管道模式与浏览器通信 | | slowMo | number | 0 | 操作延迟(毫秒),用于调试 | | maxOpenPages | number | 10 | 最大同时打开的标签页数量,超出排队 | | pageMode | 'reuse' \| 'disposable' | 'reuse' | 页面模式。复用模式性能好,一次性模式隔离性强 | | pageIdleTimeout | number | 60000 | 页面空闲超时时间(毫秒),0 表示永不超时 | | defaultViewport | { width, height } | { width: 800, height: 600 } | 默认视窗大小 | | executablePath | string | - | 浏览器可执行文件路径,为空则自动下载/查找 | | userDataDir | string | - | 浏览器用户数据目录 | | args | string[] | 见下方 | Chrome 启动参数 | | download.enable | boolean | true | 是否启用浏览器自动下载 | | download.browser | 'chrome' \| 'chromium' \| 'chrome-headless-shell' | 'chrome-headless-shell' | 下载的浏览器类型 | | download.version | string | 'latest' | 浏览器版本,支持 lateststablebetadevcanary 或具体版本号 | | download.dir | string | - | 下载目录,为空使用默认路径 | | download.baseUrl | string | - | 自定义下载源 URL |

默认启动参数

--window-size=800,600
--disable-gpu
--no-sandbox
--disable-setuid-sandbox
--no-zygote
--disable-extensions
--disable-dev-shm-usage
--disable-background-networking
--disable-sync
--disable-crash-reporter
--disable-translate
--disable-notifications
--disable-device-discovery-notifications
--disable-accelerated-2d-canvas

开发

环境要求

  • Node.js >= 18
  • pnpm

目录结构

├── src/
│   ├── index.ts          # 插件入口,注册渲染器
│   ├── app.ts            # 开发模式入口
│   ├── web.config.ts     # Web 管理面板配置
│   ├── utils.ts          # 工具函数
│   ├── config/
│   │   └── index.ts      # 配置管理
│   └── __mocks__/        # 测试 mock
├── tsconfig.json
├── tsup.config.ts
├── vitest.config.ts
├── eslint.config.mjs
└── package.json

常用命令

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 运行测试
pnpm test

# 监听模式测试
pnpm test:watch

# 测试覆盖率
pnpm test:coverage

# Lint
pnpm lint

# 发布
pnpm pub

构建产物

构建输出到 dist/ 目录,包含:

  • dist/index.js - 插件入口
  • dist/web.config.js - Web 管理面板配置
  • dist/*.d.ts - 类型声明

协议

MIT