[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3319":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":24,"defaultBranch":25,"hasWiki":24,"hasPages":24,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},3319,"headless-recorder","checkly\u002Fheadless-recorder","checkly","Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script. ","https:\u002F\u002Fchecklyhq.com\u002Fheadless-recorder",null,"JavaScript",15291,733,9,1,0,3,7,22,11,43.6,"MIT License",true,false,"main",[27,28,29,30,31],"chrome","chrome-extension","playwright","puppeteer","vue","2026-06-12 02:00:48","# 🚨 Deprecated!\nAs of Dec 16th 2022, Headless Recorder is fully deprecated. No new changes, support, maintenance or new features are expected to land.\n\nFor more information and possible alternatives refer to this [issue](https:\u002F\u002Fgithub.com\u002Fcheckly\u002Fheadless-recorder\u002Fissues\u002F232).\n\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"200px\" src=\".\u002Fassets\u002Flogo.png\" alt=\"Headless Recorder\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp>\n  \u003Cimg height=\"128\" src=\"https:\u002F\u002Fwww.checklyhq.com\u002Fimages\u002Ffooter-logo.svg\" align=\"right\" \u002F>\n  \u003Ch1>Headless Recorder\u003C\u002Fh1>\n\u003C\u002Fp>\n\n\u003Cp>\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fcheckly\u002Fheadless-recorder\u002Fworkflows\u002FLint%20&%20Build%20&%20Test\u002Fbadge.svg?branch=main\" alt=\"Github Build\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fchrome-web-store\u002Fusers\u002Fdjeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore%20-%20Users\" alt=\"Chrome Webstore Users\" \u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fchrome-web-store\u002Fv\u002Fdjeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore\" alt=\"Chrome Webstore Version\" \u002F>\n\u003C\u002Fp>\n\n\n> 🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright\u002FPuppeteer script.\n\n\n\u003Cbr>\n\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fassets\u002Fhr.gif\" alt=\"Headless recorder demo\" \u002F>\n\u003C\u002Fp>\n\u003Cbr>\n\n## Overview\n\nHeadless recorder is a Chrome extension that records your browser interactions and generates a [Playwright](https:\u002F\u002Fplaywright.dev\u002F) or [Puppeteer](http:\u002F\u002Fpptr.dev\u002F) script. Install it from the [Chrome Webstore](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpuppeteer-recorder\u002Fdjeegiggegleadkkbgopoonhjimgehda) to get started!\n\nThis project builds on existing open source projects (see [Credits](#-credits)) but adds extensibility, configurability and a smoother UI. For more information, please check our [documentation](https:\u002F\u002Fwww.checklyhq.com\u002Fdocs\u002Fheadless-recorder\u002F).\n\n> 🤔 Do you want to learn more about Puppeteer and Playwright? Check our open [Headless Guides](https:\u002F\u002Fwww.checklyhq.com\u002Flearn\u002Fheadless\u002F)\n\n\u003Cbr>\n\n## What you can do?\n\n- Records clicks and type events.\n- Add waitForNavigation, setViewPort and other useful clauses.\n- Generates a Playwright & Puppeteer script.\n- Preview CSS selectors of HTML elements.\n- Take full page and element screenshots.\n- Pause, resume and restart recording.\n- Persist latest script in your browser\n- Copy to clipboard.\n- Run generated scripts directly on [Checkly](https:\u002F\u002Fchecklyhq.com)\n- Flexible configuration options and dark mode support.\n- Allows `data-id` configuration for element selection.\n\n#### Recorded Events\n  - `click`\n  - `dblclick`\n  - `change`\n  - `keydown`\n  - `select`\n  - `submit`\n  - `load`\n  - `unload`\n\n> This collection will be expanded in future releases. 💪\n\n\u003Cbr>\n\n## How to use?\n\n1. Click the icon and hit the red button.\n2. 👉 Hit \u003Ckbd>tab\u003C\u002Fkbd> after you finish typing in an `input` element. 👈\n3. Click on links, inputs and other elements.\n4. Wait for full page load on each navigation.\n\n    **The icon will switch from \u003Cimg width=\"24px\" height=\"24px\" src=\".\u002Fassets\u002Frec.png\" alt=\"recording icon\"\u002F>\n    to \u003Cimg width=\"24px\" height=\"24px\" src=\".\u002Fassets\u002Fwait.png\" alt=\"waiting icon\"\u002F> to indicate it is ready for more input from you.**\n\n5. Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.\n\n### ⌨️ Shortcuts\n\n- `alt + k`: Toggle overlay\n- `alt + shift + F`: Take full page screenshot\n- `alt + shift + E`: Take element screenshot\n\n\u003Cbr>\n\n## Run Locally\n\nAfter cloning the project, open the terminal and navigate to project root directory.\n\n```bash\n$ npm i # install dependencies\n\n$ npm run serve # run development mode\n\n$ npm run test # run test cases\n\n$ npm run lint # run and fix linter issues\n\n$ npm run build # build and zip for production\n```\n\n\u003Cbr>\n\n## Install Locally\n\n1. Open chrome and navigate to extensions page using this URL: [`chrome:\u002F\u002Fextensions`](chrome:\u002F\u002Fextensions).\n1. Make sure \"**Developer mode**\" is enabled.\n1. Click \"**Load unpacked extension**\" button, browse the `headless-recorder\u002Fdist` directory and select it.\n\n![](.\u002Fassets\u002Fdev-guide.png)\n\n\u003Cbr>\n\n## Release\n\n1. Bump version using `npm version` (patch, minor, major).\n2. Push changes with tags `git push --tags`\n3. Generate a release using **gren**: `gren release --override --data-source=milestones --milestone-match=\"{{tag_name}}\"`\n\n> 🚨 Make sure all issues associated with the new version are linked to a milestone with the name of the tag.\n\n\u003Cbr>\n\n## Credits\n\nHeadless recorder is the spiritual successor & love child of segment.io's [Daydream](https:\u002F\u002Fgithub.com\u002Fsegmentio\u002Fdaydream) and [ui recorder](https:\u002F\u002Fgithub.com\u002Fyguan\u002Fui-recorder).\n\n\u003Cbr>\n\n## License\n\n[MIT](https:\u002F\u002Fgithub.com\u002Fcheckly\u002Fheadless-recorder\u002Fblob\u002Fmain\u002FLICENSE)\n\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fchecklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder\" target=\"_blank\">\n  \u003Cimg width=\"100px\" src=\".\u002Fassets\u002Fcheckly-logo.png?raw=true\" alt=\"Checkly\" \u002F>\n  \u003C\u002Fa>\n  \u003Cbr \u002F>\n  \u003Ci>\u003Csub>Delightful Active Monitoring for Developers\u003C\u002Fsub>\u003C\u002Fi>\n  \u003Cbr>\n  \u003Cb>\u003Csub>From Checkly with ♥️\u003C\u002Fsub>\u003C\u002Fb>\n\u003Cp>\n\n","Headless Recorder 是一个 Chrome 扩展程序，能够记录浏览器交互并生成 Playwright 或 Puppeteer 脚本。其核心功能包括记录点击和输入事件、添加导航等待等实用语句、预览 HTML 元素的 CSS 选择器以及截取全页面或元素截图。此外，它还支持暂停、恢复录制过程，并允许用户直接在 Checkly 上运行生成的脚本。尽管该项目已于2022年12月16日停止维护，但其简洁易用的界面和强大的配置选项使其非常适合需要自动化网页操作测试或开发场景的专业人士使用。",2,"2026-06-11 02:53:31","top_language"]