[
  {
    "path": ".browserslistrc",
    "content": "> 1%\nlast 2 versions\nnot dead\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  root: true,\n\n  env: {\n    node: true,\n    webextensions: true,\n  },\n\n  extends: [\n    'plugin:vuejs-accessibility/recommended',\n    'plugin:vue/vue3-essential',\n    'eslint:recommended',\n    '@vue/prettier',\n  ],\n\n  parserOptions: {\n    parser: 'babel-eslint',\n  },\n\n  rules: {\n    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n    'vuejs-accessibility/label-has-for': 'off',\n  },\n\n  overrides: [\n    {\n      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],\n      env: {\n        jest: true,\n      },\n    },\n  ],\n}\n"
  },
  {
    "path": ".github/auto_assign.yml",
    "content": "addReviewers: true\naddAssignees: author\n\nreviewers:\n  - pilimartinez\n  - ianaya89\n\nskipKeywords:\n  - wip\n\nnumberOfReviewers: 1\n"
  },
  {
    "path": ".github/dependabot.yml",
    "content": "version: 2\nupdates:\n  - package-ecosystem: \"npm\"\n    directory: \"/\"\n    # Runs at 9am CET only on weekdays\n    schedule:\n      time: \"13:00\"\n      interval: \"daily\"\n      timezone: Europe/Berlin\n    open-pull-requests-limit: 3\n    labels:\n      - \"dependencies\"\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "# Pull Request Template\n\n## Description\n\nPlease include a summary of the change or which issue is fixed. Also, include relevant motivation and context.\nRemember, as mentioned in the [contribution guidelines](https://github.com/checkly/puppeteer-recorder/blob/main/CONTRIBUTING.md) that\nPR's should be as atomic as possible 1 feature === 1 PR. 1 bugfix === 1 PR.\n\n## Type of change\n\nPlease delete options that are not relevant.\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)\n- [ ] This change requires a documentation update\n\n## How Has This Been Tested?\n\nPlease describe the tests that you ran to verify your changes.\n\n## Checklist:\n\n- [ ] My code follows the style guidelines of this project. `npm run lint` passes with no errors.\n- [ ] I have made corresponding changes to the documentation\n- [ ] I have added tests that prove my fix is effective or that my feature works\n- [ ] New and existing unit tests pass locally with my changes. `npm run test` passes with no errors.\n"
  },
  {
    "path": ".github/workflows/codeql-analysis.yml",
    "content": "name: \"CodeQL\"\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\n  schedule:\n    - cron: '38 6 * * 5'\n\njobs:\n  analyze:\n    name: Analyze\n    runs-on: ubuntu-latest\n    permissions:\n      actions: read\n      contents: read\n      security-events: write\n\n    strategy:\n      fail-fast: false\n      matrix:\n        language: [ 'javascript' ]\n\n    steps:\n    - name: Checkout repository\n      uses: actions/checkout@v2\n\n    # Initializes the CodeQL tools for scanning.\n    - name: Initialize CodeQL\n      uses: github/codeql-action/init@v1\n      with:\n        languages: ${{ matrix.language }}\n        # If you wish to specify custom queries, you can do so here or in a config file.\n        # By default, queries listed here will override any specified in a config file.\n        # Prefix the list here with \"+\" to use these queries and those in the config file.\n        # queries: ./path/to/local/query, your-org/your-repo/queries@main\n\n    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).\n    # If this step fails, then you should remove it and run the build manually (see below)\n    - name: Autobuild\n      uses: github/codeql-action/autobuild@v1\n\n    # ℹ️ Command-line programs to run using the OS shell.\n    # 📚 https://git.io/JvXDl\n\n    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines\n    #    and modify them (or add more) to build your code if your project\n    #    uses a compiled language\n\n    #- run: |\n    #   make bootstrap\n    #   make release\n\n    - name: Perform CodeQL Analysis\n      uses: github/codeql-action/analyze@v1\n"
  },
  {
    "path": ".github/workflows/lint-build-test.yml",
    "content": "name: Lint & Build & Test\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    types: [ opened, synchronize ]\n\njobs:\n  dependencies:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v2\n    - run: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install\n    - uses: actions/cache@v1\n      id: cache-dependencies\n      with:\n        path: '.'\n        key: ${{ github.sha }}\n\n  ci:\n    runs-on: ubuntu-latest\n    needs: dependencies\n    steps:\n    - uses: actions/cache@v1\n      id: restore-dependencies\n      with:\n        path: '.'\n        key: ${{ github.sha }}\n    - name: Lint\n      run: npm run lint\n    - name: Build\n      run: npm run build\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n# Vue Browser Extension Output\n*.pem\n*.pub\n*.zip\n/artifacts\n"
  },
  {
    "path": ".npmrc",
    "content": "save-exact=true\n"
  },
  {
    "path": ".prettierrc.js",
    "content": "module.exports = {\n  trailingComma: 'es5',\n  tabWidth: 2,\n  semi: false,\n  singleQuote: true,\n  printWidth: 100,\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [1.0.0] - 2021-07-08\n### Added\n- New visual identity by [@nucro](https://twitter.com/nucro).\n- In page overlay to handle recording and take screenshots\n- Visual feedback when taking screenshots\n- New code structure organized in modules and services\n- Dark mode support\n- Migrate to Vue 3 and dependencies update\n- Migrate CSS to Tailwind (except for Overlay components)\n- Selector preview while recording\n- Restart button while recording\n- Allow run scripts directly on Checkly 🦝\n- First draft of Vuex shared store\n\n### Changed\n- Make Playwright default tab\n- Use non-async wrap as default\n- Full page screenshots use `fullPage` property\n- Replace clipped screenshots with element screenshots\n- Improve selector generation giving relevance to `ID` and `data-attributes` [#64](https://github.com/checkly/headless-recorder/issues/64)\n- General bug fixing\n- Improve code reusability and events management\n\n### Removed\n- Screenshots context menu\n- Events recording list\n\n<br>\n\n## [0.8.2] - 2020-12-15\n\n### Changed\n- Specify custom key for input record [#111](https://github.com/checkly/headless-recorder/pulls/111)\n- Fix input escaping [#119](https://github.com/checkly/headless-recorder/pulls/119)"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\nHI! Thanks you for your interest in Puppeteer Recorder! We'd love to accept your patches and contributions, but please remember that this project was started first and foremost to serve the users of the Checkly API and Site transaction monitoring service.\n\n## New feature guidelines\n\nWhen authoring new features or extending existing ones, consider the following:\n- All new features should be accompanied first with a Github issues describing the feature and its necessity.\n- We aim for simplicity. Too many options, buttons, panels etc. detract from that.\n- Features should serve the general public. Very specific things for your use case are frowned upon.\n\n## Getting set up\n\n1. Clone this repository\n\n```bash\ngit clone https://github.com/checkly/headless-recorder\ncd headless-recorder\n```\n\n2. Install dependencies\n\n```bash\nnpm install\n```\n\n## Code reviews\n\nAll submissions, including submissions by project members, require review. We\nuse GitHub pull requests for this purpose. Consult\n[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more\ninformation on using pull requests.\n\n> Note: one pull request should cover one, atomic feature and/or bug fix. Do not submit pull requests with a plethora of updates, tweaks, fixes and new features.\n\n## Code Style\n\n- Coding style is fully defined in [.eslintrc](https://github.com/checkly/headless-recorder/blob/main/.eslintrc.js)\n- Comments should be generally avoided. If the code would not be understood without comments, consider re-writing the code to make it self-explanatory.\n\nTo run code linter, use:\n\n```bash\nnpm run lint\n```\n## Commit Messages\n\nCommit messages should follow the Semantic Commit Messages format:\n\n```\nlabel(namespace): title\n\ndescription\n\nfooter\n```\n\n1. *label* is one of the following:\n    - `fix` - puppeteer bug fixes.\n    - `feat` - puppeteer features.\n    - `docs` - changes to docs, e.g. `docs(api.md): ..` to change documentation.\n    - `test` - changes to puppeteer tests infrastructure.\n    - `style` - puppeteer code style: spaces/alignment/wrapping etc.\n    - `chore` - build-related work, e.g. doclint changes / travis / appveyor.\n2. *namespace* is put in parenthesis after label and is optional.\n3. *title* is a brief summary of changes.\n4. *description* is **optional**, new-line separated from title and is in present tense.\n\nExample:\n\n```\nfix(code-generator): fix page.pizza method\n\nThis patch fixes page.pizza so that it works with iframes.\n\nFixes #123, Fixes #234\n```\n\n## Adding New Dependencies\n\nFor all dependencies (both installation and development):\n- **Do not add** a dependency if the desired functionality is easily implementable.\n- If adding a dependency, it should be well-maintained and trustworthy.\n\nA barrier for introducing new installation dependencies is especially high:\n- **Do not add** installation dependency unless it's critical to project success.\n\n## Writing Tests\n\n- Every feature should be accompanied by a test.\n- Every public api event/method should be accompanied by a test.\n- Tests should be *hermetic*. Tests should not depend on external services.\n\nWe use Jest for testing. Tests are located in the various `__test__` folders.\n\n- To run all tests:\n\n```bash\nnpm run test\n```\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Checkly Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "PRIVACY_POLICY.md",
    "content": "# Privacy policy\n> Last Updated: July 12, 2021\n\nThe Headless Recorder browser extension (hereinafter “Service”) provided by the company Checkly Inc. provides this Privacy Policy to inform users of our policies and procedures regarding the collection, use and disclosure of information received from users of this extension, located at https://github.com/checkly/headless-recorder (“Extension”), as well as https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda?hl=de, and other services provided by us (collectively, together with the Extension, our “Service”).\n\nBy using our Service you are consenting to our Processing of your information as set forth in this Privacy Policy now and as amended by us. “Processing” means using cookies on a computer or using or accessing such information in any way, including, but not limited to, collecting, storing, deleting, using, combining and disclosing information, all of which activities may take place in the United States.\n\n### TL;DR:\n  - We will not sell your data to anyone.\n  - We use Google Analytics to see how you interact with extension. You can opt out of both Google Analytics.\n\n## 1. Information Collection and Use\n\nOur primary goals in collecting information from you are to provide you with the products and services made available through the Service.\nWe may also use your information to operate, maintain, and enhance the Service and its features.\n\n## 2. Log Data\n\nWhen use the Extension, our Google Analytics may record information that your browser sends whenever you visit a website (“Log Data”). This Log Data may include information such as your IP address, browser type or the domain from which you are visiting, the web-pages you visit, the search terms you use, and any advertisements on which you click. For most users accessing the Internet from an Internet service provider the IP address will be different every time you log on. We use Log Data to monitor the use of the Extension and of our Service, and for the Extension’s technical administration. We do not associate your IP address with any other personally identifiable information to identify you personally.\n\n## 3. Cookies and Automatically Collected Information\n\nLike many websites, we also use “cookie” technology to collect additional usage data and to improve the Extension and our Service. A cookie is a small data file that we transfer to your computer’s hard disk. We do not use cookies to collect personally identifiable information. Checkly may use both session cookies and persistent cookies to better understand how you interact with the Extension and our Service, to monitor aggregate usage by our users, and to improve the Extension and our services. A persistent cookie remains after you close your browser and may be used by your browser on subsequent visits to the Extension. Persistent cookies can be removed by following your web browser help file directions. Most Internet browsers automatically accept cookies. You can instruct your browser, by editing its options, to stop accepting cookies or to prompt you before accepting a cookie from the websites you visit. Please note that if you delete, or choose not to accept, cookies from the Service, you may not be able to utilize certain features of the Service to their fullest potential.\nWe may also automatically record certain information from your device by using various types of technology, including “clear gifs” or “web beacons.” This automatically collected information may include your IP address or other device address or ID, web browser and/or device type, the web pages or sites that you visit just before or just after you use the Service, the pages or other content you view or otherwise interact with on the Service, and the dates and times that you visit, access, or use the Service.\n\n### Google Analytics\nWe use Google Analytics to measure the effectiveness of our Extension.\n\n## 4. Security\nCheckly is very concerned about safeguarding the confidentiality of your personally identifiable information. Please be aware that no security measures are perfect or impenetrable. We cannot and do not guarantee that information about you will not be accessed, viewed, disclosed, altered, or destroyed by breach of any of our administrative, physical, and electronic safeguards. We will make any legally-required disclosures of any breach of the security, confidentiality, or integrity of your unencrypted electronically stored personal data to you via email or conspicuous posting on this Extension in the most expedient time possible and without unreasonable delay, consistent with (i) the legitimate needs of law enforcement or (ii) any measures necessary to determine the scope of the breach and restore the reasonable integrity of the data system.\n\n"
  },
  {
    "path": "README.md",
    "content": "# 🚨 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://github.com/checkly/headless-recorder/issues/232).\n\n</p>\n\n<p align=\"center\">\n  <img width=\"200px\" src=\"./assets/logo.png\" alt=\"Headless Recorder\" />\n</p>\n\n<p>\n  <img height=\"128\" src=\"https://www.checklyhq.com/images/footer-logo.svg\" align=\"right\" />\n  <h1>Headless Recorder</h1>\n</p>\n\n<p>\n  <img src=\"https://github.com/checkly/headless-recorder/workflows/Lint%20&%20Build%20&%20Test/badge.svg?branch=main\" alt=\"Github Build\"/>\n  <img src=\"https://img.shields.io/chrome-web-store/users/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore%20-%20Users\" alt=\"Chrome Webstore Users\" />\n  <img src=\"https://img.shields.io/chrome-web-store/v/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore\" alt=\"Chrome Webstore Version\" />\n</p>\n\n\n> 🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.\n\n\n<br>\n<p align=\"center\">\n  <img src=\"./assets/hr.gif\" alt=\"Headless recorder demo\" />\n</p>\n<br>\n\n## Overview\n\nHeadless recorder is a Chrome extension that records your browser interactions and generates a [Playwright](https://playwright.dev/) or [Puppeteer](http://pptr.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda) 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://www.checklyhq.com/docs/headless-recorder/).\n\n> 🤔 Do you want to learn more about Puppeteer and Playwright? Check our open [Headless Guides](https://www.checklyhq.com/learn/headless/)\n\n<br>\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://checklyhq.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<br>\n\n## How to use?\n\n1. Click the icon and hit the red button.\n2. 👉 Hit <kbd>tab</kbd> 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 <img width=\"24px\" height=\"24px\" src=\"./assets/rec.png\" alt=\"recording icon\"/>\n    to <img width=\"24px\" height=\"24px\" src=\"./assets/wait.png\" alt=\"waiting icon\"/> 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<br>\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<br>\n\n## Install Locally\n\n1. Open chrome and navigate to extensions page using this URL: [`chrome://extensions`](chrome://extensions).\n1. Make sure \"**Developer mode**\" is enabled.\n1. Click \"**Load unpacked extension**\" button, browse the `headless-recorder/dist` directory and select it.\n\n![](./assets/dev-guide.png)\n\n<br>\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<br>\n\n## Credits\n\nHeadless recorder is the spiritual successor & love child of segment.io's [Daydream](https://github.com/segmentio/daydream) and [ui recorder](https://github.com/yguan/ui-recorder).\n\n<br>\n\n## License\n\n[MIT](https://github.com/checkly/headless-recorder/blob/main/LICENSE)\n\n\n<p align=\"center\">\n  <a href=\"https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder\" target=\"_blank\">\n  <img width=\"100px\" src=\"./assets/checkly-logo.png?raw=true\" alt=\"Checkly\" />\n  </a>\n  <br />\n  <i><sub>Delightful Active Monitoring for Developers</sub></i>\n  <br>\n  <b><sub>From Checkly with ♥️</sub></b>\n<p>\n\n"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = {\n  presets: ['@vue/cli-plugin-babel/preset'],\n}\n"
  },
  {
    "path": "dependabot.yml",
    "content": "version: 2\nupdates:\n  - package-ecosystem: \"npm\"\n    directory: \"/\"\n    schedule:\n      time: \"09:00\"\n      interval: \"daily\"\n      timezone: Europe/Berlin\n    open-pull-requests-limit: 3\n    labels:\n      - \"dependencies\"\n    reviewers:\n      - \"ianaya89\""
  },
  {
    "path": "jest.config.js",
    "content": "module.exports = {\n  preset: '@vue/cli-plugin-unit-jest',\n  transform: {\n    '^.+\\\\.vue$': 'vue-jest',\n    \"^.+\\\\.js$\": \"babel-jest\",\n  },\n  setupFilesAfterEnv: ['./jest.setup.js'],\n  moduleFileExtensions: [\"js\", \"json\", \"vue\"],\n}\n"
  },
  {
    "path": "jest.setup.js",
    "content": "import '@testing-library/jest-dom'\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"include\": [\n    \"./src/**/*\"\n  ]\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"headless-recorder\",\n  \"version\": \"1.1.0\",\n  \"scripts\": {\n    \"serve\": \"vue-cli-service build --mode development --watch\",\n    \"build\": \"vue-cli-service build\",\n    \"test\": \"npm run test:unit\",\n    \"test:unit\": \"vue-cli-service test:unit __tests__/.*.spec.js\",\n    \"lint\": \"vue-cli-service lint\"\n  },\n  \"dependencies\": {\n    \"@headlessui/vue\": \"1.2.0\",\n    \"@medv/finder\": \"2.0.0\",\n    \"@tailwindcss/postcss7-compat\": \"2.0.2\",\n    \"@vueuse/core\": \"4.0.8\",\n    \"autoprefixer\": \"9\",\n    \"core-js\": \"3.6.5\",\n    \"css-selector-generator\": \"3.0.1\",\n    \"lodash\": \"4.17.21\",\n    \"pinia\": \"2.0.0-beta.3\",\n    \"postcss\": \"7\",\n    \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@2.0.2\",\n    \"vue\": \"3.0.6\",\n    \"vue-tippy\": \"6.0.0-alpha.30\",\n    \"vue3-highlightjs\": \"1.0.5\",\n    \"vuex\": \"4.0.2\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/jest-dom\": \"5.12.0\",\n    \"@vue/cli-plugin-babel\": \"4.5.0\",\n    \"@vue/cli-plugin-eslint\": \"4.5.0\",\n    \"@vue/cli-plugin-unit-jest\": \"4.5.12\",\n    \"@vue/cli-service\": \"4.5.0\",\n    \"@vue/compiler-sfc\": \"3.0.0\",\n    \"@vue/eslint-config-prettier\": \"6.0.0\",\n    \"@vue/test-utils\": \"2.0.0-rc.6\",\n    \"@vue/vue3-jest\": \"27.0.0-alpha.1\",\n    \"babel-core\": \"7.0.0-bridge.0\",\n    \"babel-eslint\": \"10.1.0\",\n    \"eslint\": \"6.7.2\",\n    \"eslint-plugin-prettier\": \"3.1.3\",\n    \"eslint-plugin-vue\": \"7.0.0\",\n    \"eslint-plugin-vuejs-accessibility\": \"0.6.2\",\n    \"jest\": \"27.5.1\",\n    \"jest-vue-preprocessor\": \"1.7.1\",\n    \"node-sass\": \"5.0.0\",\n    \"playwright\": \"1.10.0\",\n    \"prettier\": \"1.19.1\",\n    \"puppeteer\": \"9.0.0\",\n    \"sass-loader\": \"10.1.1\",\n    \"typescript\": \"3.9.3\",\n    \"vue-cli-plugin-browser-extension\": \"0.25.1\",\n    \"vue-cli-plugin-tailwind\": \"2.0.6\",\n    \"vue-jest\": \"3.0.7\"\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}\n"
  },
  {
    "path": "public/_locales/en/messages.json",
    "content": "{\n  \"extName\": {\n    \"message\": \"headless-recorder-v2\",\n    \"description\": \"\"\n  }\n}\n"
  },
  {
    "path": "public/browser-extension.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n  <title><%= htmlWebpackPlugin.options.title %></title>\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap\" rel=\"stylesheet\">\n</head>\n<body>\n  <div id=\"app\"></div>\n</body>\n</html>\n"
  },
  {
    "path": "src/__tests__/build.spec.js",
    "content": "import puppeteer from 'puppeteer'\nimport { launchPuppeteerWithExtension } from './helpers'\n\ndescribe('install', () => {\n  test('it installs the extension', async () => {\n    const browser = await launchPuppeteerWithExtension(puppeteer)\n    expect(browser).toBeTruthy()\n    browser.close()\n  }, 5000)\n})\n"
  },
  {
    "path": "src/__tests__/helpers.js",
    "content": "import path from 'path'\nimport { scripts } from '../../package.json'\nconst util = require('util')\nconst exec = util.promisify(require('child_process').exec)\n\nconst extensionPath = path.join(__dirname, '../../dist')\n\nexport const launchPuppeteerWithExtension = function(puppeteer) {\n  const options = {\n    headless: false,\n    ignoreHTTPSErrors: true,\n    devtools: true,\n    args: [\n      `--disable-extensions-except=${extensionPath}`,\n      `--load-extension=${extensionPath}`,\n      '--no-sandbox',\n      '--disable-setuid-sandbox',\n    ],\n  }\n\n  if (process.env.CI) {\n    options.executablePath = process.env.PUPPETEER_EXEC_PATH // Set by docker on github actions\n  }\n\n  return puppeteer.launch(options)\n}\n\nexport const runBuild = function() {\n  return exec(scripts.build)\n}\n"
  },
  {
    "path": "src/assets/animations.css",
    "content": "@keyframes flash {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideup {\n  0% {\n    transform: translateY(100%);\n  }\n\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@keyframes pop {\n  0% {\n    transform: scale(1);\n  }\n\n  0% {\n    transform: scale(1.25);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.headless-recorder-flash {\n  animation-name: flash;\n  animation-duration: 0.5s;\n  animation-iteration-count: 1;\n  animation-timing-function: ease-in-out;\n}\n\n.headless-recorder-camera-cursor {\n  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACMSURBVHgBzZDrDUBAEITnVEIHVIoKUAkd0MHphCXrstm4R/jBJF9yu5d9DfAXWWJT2DfFqVjDj0NGNd6QoEwVSC61RMEDKmLAzSQfHZETI8czx40cFGpQcpHMjdzkjA3Ct/r+XT5DWDkxqdzCmzmFTqi5yazW75HowWVkKTaq5X/Mg6gOD1Y814rPtQPiEFi9rPKoQQAAAABJRU5ErkJggg=='),\n    auto !important;\n}"
  },
  {
    "path": "src/assets/code.css",
    "content": ".hljs-line {\n  color: '#ADAACC';\n  margin-right: 8px;\n}\n\n/* Comment */\n.hljs-comment,\n.hljs-quote {\n  color: #d4d0ab;\n}\n\n/* Red */\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-regexp,\n.hljs-deletion {\n  color: #C792EA;\n}\n\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-literal,\n.hljs-type,\n.hljs-params,\n.hljs-meta,\n.hljs-link {\n  color: #7DD8C7;\n}\n\n.hljs-number {\n  color: #FF628C;\n}\n\n/* Yellow */\n.hljs-attribute {\n  color: #ffd700;\n}\n\n/* Green */\n.hljs-string,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-addition {\n  color: #ECC48D;\n}\n\n/* Blue */\n.hljs-title,\n.hljs-section {\n  color: #00e0e0;\n}\n\n/* Purple */\n.hljs-keyword,\n.hljs-selector-tag {\n  color: #C792EA;\n}\n\n.hljs {\n  display: block;\n  overflow-x: auto;\n  background: #2b2b2b;\n  color: #f8f8f2;\n  padding: 0.5em;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}\n\n.hljs-strong {\n  font-weight: bold;\n}\n\n@media screen and (-ms-high-contrast: active) {\n  .hljs-addition,\n  .hljs-attribute,\n  .hljs-built_in,\n  .hljs-builtin-name,\n  .hljs-bullet,\n  .hljs-comment,\n  .hljs-link,\n  .hljs-literal,\n  .hljs-meta,\n  .hljs-number,\n  .hljs-params,\n  .hljs-string,\n  .hljs-symbol,\n  .hljs-type,\n  .hljs-quote {\n        color: highlight;\n    }\n\n    .hljs-keyword,\n    .hljs-selector-tag {\n        font-weight: bold;\n    }\n}\n"
  },
  {
    "path": "src/assets/tailwind.css",
    "content": "@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n"
  },
  {
    "path": "src/background/index.js",
    "content": "import badge from '@/services/badge'\nimport browser from '@/services/browser'\nimport storage from '@/services/storage'\nimport { popupActions, recordingControls } from '@/services/constants'\nimport { overlayActions } from '@/modules/overlay/constants'\nimport { headlessActions } from '@/modules/code-generator/constants'\n\nimport CodeGenerator from '@/modules/code-generator'\n\nclass Background {\n  constructor() {\n    this._recording = []\n    this._boundedMessageHandler = null\n    this._boundedNavigationHandler = null\n    this._boundedWaitHandler = null\n\n    this.overlayHandler = null\n\n    this._badgeState = ''\n    this._isPaused = false\n\n    this._menuId = 'PUPPETEER_RECORDER_CONTEXT_MENU'\n    this._boundedMenuHandler = null\n\n    // Some events are sent double on page navigations to simplify the event recorder.\n    // We keep some simple state to disregard events if needed.\n    this._hasGoto = false\n    this._hasViewPort = false\n  }\n\n  init() {\n    chrome.extension.onConnect.addListener(port => {\n      port.onMessage.addListener(msg => this.handlePopupMessage(msg))\n    })\n  }\n\n  async start() {\n    await this.cleanUp()\n\n    this._badgeState = ''\n    this._hasGoto = false\n    this._hasViewPort = false\n\n    await browser.injectContentScript()\n    this.toggleOverlay({ open: true, clear: true })\n\n    this._boundedMessageHandler = this.handleMessage.bind(this)\n    this._boundedNavigationHandler = this.handleNavigation.bind(this)\n    this._boundedWaitHandler = () => badge.wait()\n\n    this.overlayHandler = this.handleOverlayMessage.bind(this)\n\n    // chrome.contextMenus.create({\n    //   id: this._menuId,\n    //   title: 'Headless Recorder',\n    //   contexts: ['all'],\n    // })\n\n    // chrome.contextMenus.create({\n    //   id: this._menuId + 'SELECTOR',\n    //   title: 'Copy Selector',\n    //   parentId: this._menuId,\n    //   contexts: ['all'],\n    // })\n\n    // this._boundedMenuHandler = this.handleMenuInteraction.bind(this)\n    // chrome.contextMenus.onClicked.addListener(this._boundedMenuHandler)\n\n    chrome.runtime.onMessage.addListener(this._boundedMessageHandler)\n    chrome.runtime.onMessage.addListener(this.overlayHandler)\n\n    chrome.webNavigation.onCompleted.addListener(this._boundedNavigationHandler)\n    chrome.webNavigation.onBeforeNavigate.addListener(this._boundedWaitHandler)\n\n    badge.start()\n  }\n\n  stop() {\n    this._badgeState = this._recording.length > 0 ? '1' : ''\n\n    chrome.runtime.onMessage.removeListener(this._boundedMessageHandler)\n    chrome.webNavigation.onCompleted.removeListener(this._boundedNavigationHandler)\n    chrome.webNavigation.onBeforeNavigate.removeListener(this._boundedWaitHandler)\n    // chrome.contextMenus.onClicked.removeListener(this._boundedMenuHandler)\n\n    badge.stop(this._badgeState)\n\n    storage.set({ recording: this._recording })\n  }\n\n  pause() {\n    badge.pause()\n    this._isPaused = true\n  }\n\n  unPause() {\n    badge.start()\n    this._isPaused = false\n  }\n\n  cleanUp() {\n    this._recording = []\n    this._isPaused = false\n    badge.reset()\n\n    return new Promise(function(resolve) {\n      chrome.storage.local.remove('recording', () => resolve())\n    })\n  }\n\n  recordCurrentUrl(href) {\n    if (!this._hasGoto) {\n      this.handleMessage({\n        selector: undefined,\n        value: undefined,\n        action: headlessActions.GOTO,\n        href,\n      })\n      this._hasGoto = true\n    }\n  }\n\n  recordCurrentViewportSize(value) {\n    if (!this._hasViewPort) {\n      this.handleMessage({\n        selector: undefined,\n        value,\n        action: headlessActions.VIEWPORT,\n      })\n      this._hasViewPort = true\n    }\n  }\n\n  recordNavigation() {\n    this.handleMessage({\n      selector: undefined,\n      value: undefined,\n      action: headlessActions.NAVIGATION,\n    })\n  }\n\n  recordScreenshot(value) {\n    this.handleMessage({\n      selector: undefined,\n      value,\n      action: headlessActions.SCREENSHOT,\n    })\n  }\n\n  // handleMenuInteraction(info, tab) {\n  // }\n\n  handleMessage(msg, sender) {\n    if (msg.control) {\n      return this.handleRecordingMessage(msg, sender)\n    }\n\n    if (msg.type === 'SIGN_CONNECT') {\n      return\n    }\n\n    // NOTE: To account for clicks etc. we need to record the frameId\n    // and url to later target the frame in playback\n    msg.frameId = sender ? sender.frameId : null\n    msg.frameUrl = sender ? sender.url : null\n\n    if (!this._isPaused) {\n      this._recording.push(msg)\n      storage.set({ recording: this._recording })\n    }\n  }\n\n  async handleOverlayMessage({ control }) {\n    if (!control) {\n      return\n    }\n\n    if (control === overlayActions.RESTART) {\n      chrome.storage.local.set({ restart: true })\n      chrome.storage.local.set({ clear: false })\n      chrome.runtime.onMessage.removeListener(this.overlayHandler)\n      this.stop()\n      this.cleanUp()\n      this.start()\n    }\n\n    if (control === overlayActions.CLOSE) {\n      this.toggleOverlay()\n      chrome.runtime.onMessage.removeListener(this.overlayHandler)\n    }\n\n    if (control === overlayActions.COPY) {\n      const { options = {} } = await storage.get('options')\n      const generator = new CodeGenerator(options)\n      const code = generator.generate(this._recording)\n\n      browser.sendTabMessage({\n        action: 'CODE',\n        value: options?.code?.showPlaywrightFirst ? code.playwright : code.puppeteer,\n      })\n    }\n\n    if (control === overlayActions.STOP) {\n      chrome.storage.local.set({ clear: true })\n      chrome.storage.local.set({ pause: false })\n      chrome.storage.local.set({ restart: false })\n      this.stop()\n    }\n\n    if (control === overlayActions.UNPAUSE) {\n      chrome.storage.local.set({ pause: false })\n      this.unPause()\n    }\n\n    if (control === overlayActions.PAUSE) {\n      chrome.storage.local.set({ pause: true })\n      this.pause()\n    }\n\n    // TODO: the next 3 events do not need to be listened in background\n    // content script controller, should be able to handle that directly from overlay\n    if (control === overlayActions.CLIPPED_SCREENSHOT) {\n      browser.sendTabMessage({ action: overlayActions.TOGGLE_SCREENSHOT_CLIPPED_MODE })\n    }\n\n    if (control === overlayActions.FULL_SCREENSHOT) {\n      browser.sendTabMessage({ action: overlayActions.TOGGLE_SCREENSHOT_MODE })\n    }\n\n    if (control === overlayActions.ABORT_SCREENSHOT) {\n      browser.sendTabMessage({ action: overlayActions.CLOSE_SCREENSHOT_MODE })\n    }\n  }\n\n  handleRecordingMessage({ control, href, value, coordinates }) {\n    if (control === recordingControls.EVENT_RECORDER_STARTED) {\n      badge.setText(this._badgeState)\n    }\n\n    if (control === recordingControls.GET_VIEWPORT_SIZE) {\n      this.recordCurrentViewportSize(coordinates)\n    }\n\n    if (control === recordingControls.GET_CURRENT_URL) {\n      this.recordCurrentUrl(href)\n    }\n\n    if (control === recordingControls.GET_SCREENSHOT) {\n      this.recordScreenshot(value)\n    }\n  }\n\n  handlePopupMessage(msg) {\n    if (!msg.action) {\n      return\n    }\n\n    if (msg.action === popupActions.START) {\n      this.start()\n    }\n\n    if (msg.action === popupActions.STOP) {\n      browser.sendTabMessage({ action: popupActions.STOP })\n      this.stop()\n    }\n\n    if (msg.action === popupActions.CLEAN_UP) {\n      chrome.runtime.onMessage.removeListener(this.overlayHandler)\n      msg.value && this.stop()\n      this.toggleOverlay()\n      this.cleanUp()\n    }\n\n    if (msg.action === popupActions.PAUSE) {\n      if (!msg.stop) {\n        browser.sendTabMessage({ action: popupActions.PAUSE })\n      }\n      this.pause()\n    }\n\n    if (msg.action === popupActions.UN_PAUSE) {\n      if (!msg.stop) {\n        browser.sendTabMessage({ action: popupActions.UN_PAUSE })\n      }\n      this.unPause()\n    }\n  }\n\n  async handleNavigation({ frameId }) {\n    await browser.injectContentScript()\n    this.toggleOverlay({ open: true, pause: this._isPaused })\n\n    if (frameId === 0) {\n      this.recordNavigation()\n    }\n  }\n\n  // TODO: Use a better naming convention for this arguments\n  toggleOverlay({ open = false, clear = false, pause = false } = {}) {\n    browser.sendTabMessage({ action: overlayActions.TOGGLE_OVERLAY, value: { open, clear, pause } })\n  }\n}\n\nwindow.headlessRecorder = new Background()\nwindow.headlessRecorder.init()\n"
  },
  {
    "path": "src/components/Button.vue",
    "content": "<template>\n  <button\n    class=\"font-semibold text-xs text-gray-darkest inline-flex justify-center items-center rounded-sm p-2\"\n    :class=\"{\n      'text-white': dark,\n      'bg-gray-dark hover:bg-gray-darkest': dark,\n      'text-gray-darkest': !dark,\n      'bg-blue hover:bg-blue-dark': !dark,\n    }\"\n  >\n    <slot />\n  </button>\n</template>\n\n<script>\nexport default {\n  name: 'Button',\n\n  props: {\n    dark: { type: Boolean, default: false },\n  },\n}\n</script>\n"
  },
  {
    "path": "src/components/Footer.vue",
    "content": "<template>\n  <div class=\"flex px-4 py-3 justify-between items-center mt-3\">\n    <a href=\"https://checklyhq.com\" target=\"_blank\">\n      <img src=\"/images/checkly-logo.svg\" alt=\"Checkly logo\" class=\"w-24\" />\n    </a>\n    <span class=\"text-gray-darkish\">Version {{ version }}</span>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue'\nimport { version } from '../../package.json'\n\nexport default {\n  name: 'ChecklyBadge',\n\n  setup() {\n    return {\n      version: ref(version),\n    }\n  },\n}\n</script>\n"
  },
  {
    "path": "src/components/Header.vue",
    "content": "<template>\n  <div class=\"flex justify-between items-center p-4 pb-0 mb-2\">\n    <h1 role=\"button\" class=\"text-sm font-semibold text-gray-darkest dark:text-gray-lightest\">\n      Headless Recorder\n    </h1>\n    <div class=\"flex\">\n      <button @click=\"$emit('dark')\" class=\"ml-4\">\n        <img src=\"@/assets/icons/moon.svg\" alt=\"help\" class=\"w-4\" />\n      </button>\n      <button @click=\"$emit('help')\" class=\"ml-2\">\n        <img src=\"@/assets/icons/question.svg\" alt=\"help\" class=\"w-4\" />\n      </button>\n      <button @click=\"$emit('options')\" class=\"ml-2\">\n        <img src=\"@/assets/icons/gear.svg\" alt=\"settings\" class=\"w-4\" />\n      </button>\n    </div>\n  </div>\n</template>\n"
  },
  {
    "path": "src/components/RecordingLabel.vue",
    "content": "<template>\n  <div\n    data-test-id=\"recording-badge\"\n    class=\"flex text-2xl justify-center items-center text-red font-semibold\"\n    :class=\"{ 'text-yellow': text === 'Paused', 'animate-pulse': text !== 'Paused' }\"\n  >\n    {{ text }}\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'RecordingLabel',\n  props: {\n    isPaused: { type: Boolean, default: false },\n  },\n\n  computed: {\n    text() {\n      return this.isPaused ? 'Paused' : 'Recording...'\n    },\n  },\n}\n</script>\n"
  },
  {
    "path": "src/components/RoundButton.vue",
    "content": "<template>\n  <button\n    class=\"p-2 bg-white rounded-full border-gray-light border-solid border-4 hover:bg-gray-lightest dark:hover:bg-gray-hover dark:bg-black-shady dark:border-gray-dark\"\n    :class=\"{ 'btn-small': small, 'btn-medium': medium }\"\n  >\n    <slot />\n  </button>\n</template>\n\n<script>\nexport default {\n  props: {\n    small: { type: Boolean, default: false },\n    medium: { type: Boolean, default: false },\n    big: { type: Boolean, default: false },\n  },\n}\n</script>\n\n<style scoped>\n.btn-small {\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n}\n\n.btn-medium {\n  height: 72px;\n  width: 72px;\n}\n</style>\n"
  },
  {
    "path": "src/components/Toggle.vue",
    "content": "<template>\n  <div class=\"flex items-center mb-3\">\n    <button\n      type=\"button\"\n      :class=\"[\n        modelValue ? 'bg-blue' : 'bg-gray',\n        'relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue',\n      ]\"\n      role=\"switch\"\n      aria-checked=\"false\"\n      @click=\"toggle\"\n    >\n      <span\n        aria-hidden=\"true\"\n        :class=\"[\n          modelValue ? 'translate-x-4' : 'translate-x-0',\n          'm-px pointer-events-none inline-block h-2.5 w-2.5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',\n        ]\"\n      ></span>\n    </button>\n    <span class=\"ml-4\">\n      <span class=\"text-sm text-gray-dark dark:text-gray-light\">\n        <slot />\n      </span>\n    </span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'Toggle',\n  props: { modelValue: { type: Boolean, default: true } },\n\n  setup(props, context) {\n    function toggle() {\n      context.emit('update:modelValue', !props.modelValue)\n    }\n\n    return { toggle }\n  },\n}\n</script>\n"
  },
  {
    "path": "src/components/__tests__/RecordingTab.spec.js",
    "content": "import { mount } from '@vue/test-utils'\nimport RecordingTab from '../RecordingTab'\n\ndescribe('RecordingTab.vue', () => {\n  test('it has the correct pristine / empty state', () => {\n    const wrapper = mount(RecordingTab)\n    expect(wrapper.element).toMatchSnapshot()\n  })\n\n  test('it has the correct waiting for events state', () => {\n    const wrapper = mount(RecordingTab, { props: { isRecording: true } })\n    expect(wrapper.element).toMatchSnapshot()\n    expect(wrapper.find('.event-list').element).toBeEmpty()\n  })\n\n  test('it has the correct recording Puppeteer custom events state', () => {\n    const wrapper = mount(RecordingTab, {\n      props: {\n        isRecording: true,\n        liveEvents: [\n          {\n            action: 'goto*',\n            href: 'http://example.com',\n          },\n          {\n            action: 'viewport*',\n            selector: undefined,\n            value: { width: 1280, height: 800 },\n          },\n          {\n            action: 'navigation*',\n            selector: undefined,\n          },\n        ],\n      },\n    })\n    expect(wrapper.element).toMatchSnapshot()\n    expect(wrapper.find('.event-list').element).not.toBeEmpty()\n  })\n\n  test('it has the correct recording DOM events state', () => {\n    const wrapper = mount(RecordingTab, {\n      props: {\n        isRecording: true,\n        liveEvents: [\n          {\n            action: 'click',\n            selector: '.main > a.link',\n            href: 'http://example.com',\n          },\n        ],\n      },\n    })\n    expect(wrapper.element).toMatchSnapshot()\n    expect(wrapper.find('.event-list').element).not.toBeEmpty()\n  })\n})\n"
  },
  {
    "path": "src/components/__tests__/ResultsTab.spec.js",
    "content": "import { mount } from '@vue/test-utils'\nimport VueHighlightJS from 'vue3-highlightjs'\n\nimport ResultsTab from '../ResultsTab'\n\ndescribe('RecordingTab.vue', () => {\n  test('it has the correct pristine / empty state', () => {\n    const wrapper = mount(ResultsTab)\n    expect(wrapper.element).toMatchSnapshot()\n    expect(wrapper.find('code.javascript').exists()).toBe(false)\n  })\n\n  test('it show a code box when there is code', () => {\n    const wrapper = mount(ResultsTab, {\n      global: {\n        plugins: [VueHighlightJS],\n      },\n      props: { puppeteer: `await page.click('.class')` },\n    })\n    expect(wrapper.element).toMatchSnapshot()\n    expect(wrapper.find('code.javascript').exists()).toBe(true)\n  })\n\n  test('it render tabs for puppeteer & playwright', () => {\n    const wrapper = mount(ResultsTab)\n    expect(wrapper.findAll('.tabs__action').length).toEqual(2)\n  })\n\n  test('it render playwright first when option is present', async () => {\n    const wrapper = await mount(ResultsTab, {\n      props: {\n        options: {\n          code: {\n            showPlaywrightFirst: true,\n          },\n        },\n      },\n    })\n    expect(wrapper.find('.tabs__action').text()).toEqual('🎭playwright')\n  })\n})\n"
  },
  {
    "path": "src/components/__tests__/__snapshots__/RecordingTab.spec.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `\n<div\n  class=\"tab recording-tab\"\n>\n  <div\n    class=\"content\"\n  >\n    <div\n      class=\"empty\"\n    >\n      <img\n        alt=\"desert\"\n        src=\"\"\n        width=\"0\"\n      />\n      <h3>\n        No recorded events yet\n      </h3>\n      <p\n        class=\"text-muted\"\n      >\n        Click record to begin\n      </p>\n      <div\n        class=\"nag-cta\"\n      >\n        <a\n          href=\"https://checklyhq.com/headless-recorder\"\n          target=\"_blank\"\n        >\n          Puppeteer Recorder is now \n          <strong>\n            Headless Recorder\n          </strong>\n           and supports Playwright →\n        </a>\n      </div>\n    </div>\n    <div\n      class=\"events\"\n      style=\"display: none;\"\n    >\n      <p\n        class=\"text-muted text-center loading\"\n      >\n         Waiting for events \n      </p>\n      <ul\n        class=\"event-list\"\n      >\n        \n        \n      </ul>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`RecordingTab.vue it has the correct recording DOM events state 1`] = `\n<div\n  class=\"tab recording-tab\"\n>\n  <div\n    class=\"content\"\n  >\n    <div\n      class=\"empty\"\n      style=\"display: none;\"\n    >\n      <img\n        alt=\"desert\"\n        src=\"\"\n        width=\"0\"\n      />\n      <h3>\n        No recorded events yet\n      </h3>\n      <p\n        class=\"text-muted\"\n      >\n        Click record to begin\n      </p>\n      <div\n        class=\"nag-cta\"\n        style=\"display: none;\"\n      >\n        <a\n          href=\"https://checklyhq.com/headless-recorder\"\n          target=\"_blank\"\n        >\n          Puppeteer Recorder is now \n          <strong>\n            Headless Recorder\n          </strong>\n           and supports Playwright →\n        </a>\n      </div>\n    </div>\n    <div\n      class=\"events\"\n    >\n      <p\n        class=\"text-muted text-center loading\"\n        style=\"display: none;\"\n      >\n         Waiting for events \n      </p>\n      <ul\n        class=\"event-list\"\n      >\n        \n        <li\n          class=\"event-list-item\"\n        >\n          <div\n            class=\"event-label\"\n          >\n            1.\n          </div>\n          <div\n            class=\"event-description\"\n          >\n            <div\n              class=\"event-action\"\n            >\n              click\n            </div>\n            <div\n              class=\"event-props text-muted\"\n            >\n              .main &gt; a.link\n            </div>\n          </div>\n        </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`RecordingTab.vue it has the correct recording Puppeteer custom events state 1`] = `\n<div\n  class=\"tab recording-tab\"\n>\n  <div\n    class=\"content\"\n  >\n    <div\n      class=\"empty\"\n      style=\"display: none;\"\n    >\n      <img\n        alt=\"desert\"\n        src=\"\"\n        width=\"0\"\n      />\n      <h3>\n        No recorded events yet\n      </h3>\n      <p\n        class=\"text-muted\"\n      >\n        Click record to begin\n      </p>\n      <div\n        class=\"nag-cta\"\n        style=\"display: none;\"\n      >\n        <a\n          href=\"https://checklyhq.com/headless-recorder\"\n          target=\"_blank\"\n        >\n          Puppeteer Recorder is now \n          <strong>\n            Headless Recorder\n          </strong>\n           and supports Playwright →\n        </a>\n      </div>\n    </div>\n    <div\n      class=\"events\"\n    >\n      <p\n        class=\"text-muted text-center loading\"\n        style=\"display: none;\"\n      >\n         Waiting for events \n      </p>\n      <ul\n        class=\"event-list\"\n      >\n        \n        <li\n          class=\"event-list-item\"\n        >\n          <div\n            class=\"event-label\"\n          >\n            1.\n          </div>\n          <div\n            class=\"event-description\"\n          >\n            <div\n              class=\"event-action\"\n            >\n              goto*\n            </div>\n            <div\n              class=\"event-props text-muted\"\n            >\n              http://example.com\n            </div>\n          </div>\n        </li>\n        <li\n          class=\"event-list-item\"\n        >\n          <div\n            class=\"event-label\"\n          >\n            2.\n          </div>\n          <div\n            class=\"event-description\"\n          >\n            <div\n              class=\"event-action\"\n            >\n              viewport*\n            </div>\n            <div\n              class=\"event-props text-muted\"\n            >\n              width: 1280, height: 800\n            </div>\n          </div>\n        </li>\n        <li\n          class=\"event-list-item\"\n        >\n          <div\n            class=\"event-label\"\n          >\n            3.\n          </div>\n          <div\n            class=\"event-description\"\n          >\n            <div\n              class=\"event-action\"\n            >\n              navigation*\n            </div>\n            <div\n              class=\"event-props text-muted\"\n            />\n          </div>\n        </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`RecordingTab.vue it has the correct waiting for events state 1`] = `\n<div\n  class=\"tab recording-tab\"\n>\n  <div\n    class=\"content\"\n  >\n    <div\n      class=\"empty\"\n      style=\"display: none;\"\n    >\n      <img\n        alt=\"desert\"\n        src=\"\"\n        width=\"0\"\n      />\n      <h3>\n        No recorded events yet\n      </h3>\n      <p\n        class=\"text-muted\"\n      >\n        Click record to begin\n      </p>\n      <div\n        class=\"nag-cta\"\n        style=\"display: none;\"\n      >\n        <a\n          href=\"https://checklyhq.com/headless-recorder\"\n          target=\"_blank\"\n        >\n          Puppeteer Recorder is now \n          <strong>\n            Headless Recorder\n          </strong>\n           and supports Playwright →\n        </a>\n      </div>\n    </div>\n    <div\n      class=\"events\"\n    >\n      <p\n        class=\"text-muted text-center loading\"\n      >\n         Waiting for events \n      </p>\n      <ul\n        class=\"event-list\"\n      >\n        \n        \n      </ul>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "src/components/__tests__/__snapshots__/ResultsTab.spec.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `\n<div\n  class=\"tab results-tab\"\n>\n  <div\n    class=\"tabs\"\n  >\n    \n    <button\n      class=\"tabs__action selected\"\n    >\n      <!--v-if-->\n      <img\n        src=\"\"\n        width=\"16\"\n      />\n      <span\n        class=\"tabs__action--text\"\n      >\n        puppeteer\n      </span>\n    </button>\n    <button\n      class=\"tabs__action\"\n    >\n      <span>\n        🎭\n      </span>\n      <!--v-if-->\n      <span\n        class=\"tabs__action--text\"\n      >\n        playwright\n      </span>\n    </button>\n    \n  </div>\n  <div\n    class=\"content\"\n  >\n    <pre>\n              \n      <code>\n        No code yet...\n      </code>\n      \n      \n    </pre>\n  </div>\n</div>\n`;\n\nexports[`RecordingTab.vue it show a code box when there is code 1`] = `\n<div\n  class=\"tab results-tab\"\n>\n  <div\n    class=\"tabs\"\n  >\n    \n    <button\n      class=\"tabs__action selected\"\n    >\n      <!--v-if-->\n      <img\n        src=\"\"\n        width=\"16\"\n      />\n      <span\n        class=\"tabs__action--text\"\n      >\n        puppeteer\n      </span>\n    </button>\n    <button\n      class=\"tabs__action\"\n    >\n      <span>\n        🎭\n      </span>\n      <!--v-if-->\n      <span\n        class=\"tabs__action--text\"\n      >\n        playwright\n      </span>\n    </button>\n    \n  </div>\n  <div\n    class=\"content\"\n  >\n    <pre>\n              \n      <code\n        class=\"javascript hljs\"\n      >\n        <span\n          class=\"hljs-keyword\"\n        >\n          await\n        </span>\n         page.click(\n        <span\n          class=\"hljs-string\"\n        >\n          '.class'\n        </span>\n        )\n      </code>\n      \n      \n    </pre>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "src/content-scripts/__tests__/attributes.spec.js",
    "content": "import puppeteer from 'puppeteer'\nimport { launchPuppeteerWithExtension } from '@/__tests__/helpers'\nimport { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'\n\nlet server\nlet port\nlet browser\nlet page\n\ndescribe('attributes', () => {\n  beforeAll(async done => {\n    const buildDir = '../../../dist'\n    const fixture = './fixtures/attributes.html'\n    {\n      const { server: _s, port: _p } = await startServer(buildDir, fixture)\n      server = _s\n      port = _p\n    }\n    return done()\n  }, 20000)\n\n  afterAll(done => {\n    server.close(() => {\n      return done()\n    })\n  })\n\n  beforeEach(async () => {\n    browser = await launchPuppeteerWithExtension(puppeteer)\n    page = await browser.newPage()\n    await page.goto(`http://localhost:${port}/`)\n    await cleanEventLog(page)\n  })\n\n  afterEach(async () => {\n    browser.close()\n  })\n\n  test('it should load the content', async () => {\n    const content = await page.$('#content-root')\n    expect(content).toBeTruthy()\n  })\n\n  test('it should use data attributes throughout selector', async () => {\n    await page.evaluate('window.eventRecorder._dataAttribute = \"data-qa\"')\n    await page.click('span')\n\n    const event = (await waitForAndGetEvents(page, 1))[0]\n    expect(event.selector).toEqual(\n      'body > #content-root > [data-qa=\"article-wrapper\"] > [data-qa=\"article-body\"] > span'\n    )\n  })\n\n  test('it should use data attributes throughout selector even when id is set', async () => {\n    await page.evaluate('window.eventRecorder._dataAttribute = \"data-qa\"')\n    await page.click('#link')\n\n    const event = (await waitForAndGetEvents(page, 1))[0]\n    expect(event.selector).toEqual('[data-qa=\"link\"]')\n  })\n\n  test('it should use id throughout selector when data attributes is not set', async () => {\n    await page.evaluate('window.eventRecorder._dataAttribute = null')\n    await page.click('#link')\n\n    const event = (await waitForAndGetEvents(page, 1))[0]\n    expect(event.selector).toEqual('#link')\n  })\n})\n"
  },
  {
    "path": "src/content-scripts/__tests__/fixtures/attributes.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>forms</title>\n</head>\n<body>\n<div id=\"content-root\">\n  <div data-qa=\"article-wrapper\" class=\"wrapper\">\n    <h1 data-qa=\"article-title\" class=\"title\">Lorem</h1>\n    <div data-qa=\"article-body\" class=\"body\">\n      <span>Read More...</span>\n    </div>\n  </div>\n  <a href=\"#\" id=\"link\" data-qa=\"link\">Click here</a>\n</div>\n<script src=\"./build/js/content-script.js\" ></script>\n</body>\n</html>\n"
  },
  {
    "path": "src/content-scripts/__tests__/fixtures/forms.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>forms</title>\n</head>\n<body>\n<form action=\"/handler\" method=\"post\">\n  <fieldset>\n    <legend>Inputs</legend>\n    <div>\n      <label>text input</label>\n      <input type=\"text\">\n    </div>\n    <div>\n      <label for=\"msg\">text area</label>\n      <textarea id=\"msg\"></textarea>\n    </div>\n    <div>\n      <label>radio</label>\n      <input type=\"radio\" id=\"radioChoice1\"\n             name=\"contact\" value=\"radioChoice1\">\n      <label>radioChoice1</label>\n\n      <input type=\"radio\" id=\"radioChoice2\"\n             name=\"contact\" value=\"radioChoice2\">\n      <label>radioChoice2</label>\n\n      <input type=\"radio\" id=\"radioChoice3\"\n             name=\"contact\" value=\"radioChoice3\">\n      <label>radioChoice3</label>\n    </div>\n  </fieldset>\n  <fieldset>\n    <legend>Select</legend>\n    <select>\n      <option value=\"\">--Please choose an option--</option>\n      <option value=\"dog\">Dog</option>\n      <option value=\"cat\">Cat</option>\n      <option value=\"hamster\">Hamster</option>\n      <option value=\"parrot\">Parrot</option>\n      <option value=\"spider\">Spider</option>\n      <option value=\"goldfish\">Goldfish</option>\n    </select>\n  </fieldset>\n\n  <fieldset>\n    <legend>Checkboxes</legend>\n    <div>\n      <input id=\"checkbox1\" type=\"checkbox\" name=\"interest\" value=\"checkbox1\">\n      <label>Coding</label>\n    </div>\n    <div>\n      <input id=\"checkbox2\" type=\"checkbox\" name=\"interest\" value=\"checkbox2\">\n      <label>Music</label>\n    </div>\n  </fieldset>\n  <div>\n    <button type=\"submit\">Submit</button>\n  </div>\n</form>\n<script src=\"./build/js/content-script.js\" ></script>\n</body>\n</html>\n"
  },
  {
    "path": "src/content-scripts/__tests__/forms.spec.js",
    "content": "import puppeteer from 'puppeteer'\nimport _ from 'lodash'\nimport { launchPuppeteerWithExtension } from '@/__tests__/helpers'\nimport { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'\n\nlet server\nlet port\nlet browser\nlet page\n\ndescribe('forms', () => {\n  beforeAll(async done => {\n    const buildDir = '../../../dist'\n    const fixture = './fixtures/forms.html'\n    {\n      const { server: _s, port: _p } = await startServer(buildDir, fixture)\n      server = _s\n      port = _p\n    }\n    return done()\n  }, 20000)\n\n  afterAll(done => {\n    server.close(() => {\n      return done()\n    })\n  })\n\n  beforeEach(async () => {\n    browser = await launchPuppeteerWithExtension(puppeteer)\n    page = await browser.newPage()\n    await page.goto(`http://localhost:${port}/`)\n    await cleanEventLog(page)\n  })\n\n  afterEach(async () => {\n    browser.close()\n  })\n\n  const tab = 1\n  const change = 1\n  test('it should load the form', async () => {\n    const form = await page.$('form')\n    expect(form).toBeTruthy()\n  })\n\n  test('it should record text input elements', async () => {\n    const string = 'I like turtles'\n    await page.type('input[type=\"text\"]', string)\n    await page.keyboard.press('Tab')\n\n    const eventLog = await waitForAndGetEvents(page, string.length + tab + change)\n    const event = _.find(eventLog, e => {\n      return e.action === 'keydown' && e.keyCode === 9\n    })\n    expect(event.value).toEqual(string)\n  })\n\n  test('it should record textarea elements', async () => {\n    const string = 'I like turtles\\n but also cats'\n    await page.type('textarea', string)\n    await page.keyboard.press('Tab')\n\n    const eventLog = await waitForAndGetEvents(page, string.length + tab + change)\n    const event = _.find(eventLog, e => {\n      return e.action === 'keydown' && e.keyCode === 9\n    })\n    expect(event.value).toEqual(string)\n  })\n\n  test('it should record radio input elements', async () => {\n    await page.click('#radioChoice1')\n    await page.click('#radioChoice3')\n    const eventLog = await waitForAndGetEvents(page, 2 + 2 * change)\n    expect(eventLog[0].value).toEqual('radioChoice1')\n    expect(eventLog[2].value).toEqual('radioChoice3')\n  })\n\n  test('it should record select and option elements', async () => {\n    await page.select('select', 'hamster')\n    const eventLog = await waitForAndGetEvents(page, 1)\n    expect(eventLog[0].value).toEqual('hamster')\n    expect(eventLog[0].tagName).toEqual('SELECT')\n  })\n\n  test('it should record checkbox input elements', async () => {\n    await page.click('#checkbox1')\n    await page.click('#checkbox2')\n    const eventLog = await waitForAndGetEvents(page, 2 + 2 * change)\n    expect(eventLog[0].value).toEqual('checkbox1')\n    expect(eventLog[2].value).toEqual('checkbox2')\n  })\n})\n"
  },
  {
    "path": "src/content-scripts/__tests__/helpers.js",
    "content": "import express from 'express'\nimport path from 'path'\n\nexport const waitForAndGetEvents = async function(page, amount) {\n  await waitForRecorderEvents(page, amount)\n  return getEventLog(page)\n}\n\nexport const waitForRecorderEvents = function(page, amount) {\n  return page.waitForFunction(`window.eventRecorder._getEventLog().length >= ${amount || 1}`)\n}\n\nexport const getEventLog = function(page) {\n  return page.evaluate(() => {\n    return window.eventRecorder._getEventLog()\n  })\n}\n\nexport const cleanEventLog = function(page) {\n  return page.evaluate(() => {\n    return window.eventRecorder._clearEventLog()\n  })\n}\n\nexport const startServer = function(buildDir, file) {\n  return new Promise(resolve => {\n    const app = express()\n    app.use('/build', express.static(path.join(__dirname, buildDir)))\n    app.get('/', (req, res) => {\n      res.status(200).sendFile(file, { root: __dirname })\n    })\n    let server\n    let port\n    const retry = e => {\n      if (e.code === 'EADDRINUSE') {\n        setTimeout(() => connect, 1000)\n      }\n    }\n    const connect = () => {\n      port = 0 | (Math.random() * 1000 + 3000)\n      server = app.listen(port)\n      server.once('error', retry)\n      server.once('listening', () => {\n        return resolve({ server, port })\n      })\n    }\n    connect()\n  })\n}\n"
  },
  {
    "path": "src/content-scripts/__tests__/screenshot-controller.spec.js",
    "content": "import UIController from '../shooter'\n\n// this test NEEDS to come first because of shitty JSDOM.\n// See https://github.com/facebook/jest/issues/1224\nit('Registers mouse events', () => {\n  jest.useFakeTimers()\n\n  document.body.innerHTML =\n    '<div>' + '  <div id=\"username\">UserName</div>' + '  <button id=\"button\"></button>' + '</div>'\n\n  const uic = new UIController()\n  uic.showSelector()\n\n  const handleClick = jest.fn()\n  uic.on('click', handleClick)\n\n  const el = document.querySelector('#username')\n  el.click()\n\n  jest.runAllTimers()\n\n  expect(setTimeout).toHaveBeenCalledTimes(1)\n  expect(handleClick).toHaveBeenCalled()\n})\n\nit('Shows and hides the selector', () => {\n  const uic = new UIController()\n\n  uic.showSelector()\n  let overlay = document.querySelector('.headlessRecorderOverlay')\n  let outline = document.querySelector('.headlessRecorderOutline')\n\n  expect(overlay).toBeDefined()\n  expect(outline).toBeDefined()\n\n  uic.hideSelector()\n  overlay = document.querySelector('.headlessRecorderOverlay')\n  outline = document.querySelector('.headlessRecorderOutline')\n\n  expect(overlay).toBeNull()\n  expect(outline).toBeNull()\n})\n"
  },
  {
    "path": "src/content-scripts/controller.js",
    "content": "import { overlayActions } from '@/modules/overlay/constants'\nimport { popupActions, recordingControls, isDarkMode } from '@/services/constants'\n\nimport storage from '@/services/storage'\nimport browser from '@/services/browser'\n\nimport Shooter from '@/modules/shooter'\n\nexport default class HeadlessController {\n  constructor({ overlay, recorder, store }) {\n    this.backgroundListener = null\n\n    this.store = store\n    this.shooter = null\n    this.overlay = overlay\n    this.recorder = recorder\n  }\n\n  async init() {\n    const { options } = await storage.get(['options'])\n\n    const darkMode = options && options.extension ? options.extension.darkMode : isDarkMode()\n    const { dataAttribute } = options ? options.code : {}\n\n    this.store.commit('setDarkMode', darkMode)\n    this.store.commit('setDataAttribute', dataAttribute)\n\n    this.recorder.init(() => this.listenBackgroundMessages())\n  }\n\n  listenBackgroundMessages() {\n    this.backgroundListener = this.backgroundListener || this.handleBackgroundMessages.bind(this)\n    chrome.runtime.onMessage.addListener(this.backgroundListener)\n  }\n\n  async handleBackgroundMessages(msg) {\n    if (!msg?.action) {\n      return\n    }\n\n    switch (msg.action) {\n      case overlayActions.TOGGLE_SCREENSHOT_MODE:\n        this.handleScreenshot(false)\n        break\n\n      case overlayActions.TOGGLE_SCREENSHOT_CLIPPED_MODE:\n        this.handleScreenshot(true)\n        break\n\n      case overlayActions.CLOSE_SCREENSHOT_MODE:\n        this.cancelScreenshot()\n        break\n\n      case overlayActions.TOGGLE_OVERLAY:\n        msg?.value?.open ? this.overlay.mount(msg.value) : this.overlay.unmount()\n        break\n\n      case popupActions.STOP:\n        this.store.commit('close')\n        break\n\n      case popupActions.PAUSE:\n        this.store.commit('pause')\n        break\n\n      case popupActions.UN_PAUSE:\n        this.store.commit('unpause')\n        break\n\n      case 'CODE':\n        await browser.copyToClipboard(msg.value)\n        this.store.commit('showCopy')\n        break\n    }\n  }\n\n  handleScreenshot(isClipped) {\n    this.recorder.disableClickRecording()\n    this.shooter = new Shooter({ isClipped, store: this.store })\n\n    this.shooter.addCameraIcon()\n\n    this.store.state.screenshotMode\n      ? this.shooter.startScreenshotMode()\n      : this.shooter.stopScreenshotMode()\n\n    this.shooter.on('click', ({ selector }) => {\n      this.store.commit('stopScreenshotMode')\n\n      this.shooter.showScreenshotEffect()\n      this.recorder._sendMessage({ control: recordingControls.GET_SCREENSHOT, value: selector })\n      this.recorder.enableClickRecording()\n    })\n  }\n\n  cancelScreenshot() {\n    if (!this.store.state.screenshotMode) {\n      return\n    }\n\n    this.store.commit('stopScreenshotMode')\n    this.recorder.enableClickRecording()\n  }\n}\n"
  },
  {
    "path": "src/content-scripts/index.js",
    "content": "import store from '@/store'\n\nimport Overlay from '@/modules/overlay'\nimport Recorder from '@/modules/recorder'\n\nimport HeadlessController from '@/content-scripts/controller'\n\nwindow.headlessRecorder = new HeadlessController({\n  overlay: new Overlay({ store }),\n  recorder: new Recorder({ store }),\n  store,\n})\n\nwindow.headlessRecorder.init()\n"
  },
  {
    "path": "src/manifest.json",
    "content": "{\n  \"name\": \"Headless Recorder\",\n  \"version\": \"1.0.0\",\n  \"manifest_version\": 2,\n  \"description\": \"A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts\",\n  \"default_locale\": \"en\",\n  \"permissions\": [\n    \"storage\",\n    \"webNavigation\",\n    \"activeTab\",\n    \"cookies\",\n    \"*://*/\"\n  ],\n  \"icons\" : {\n    \"16\": \"icons/16.png\",\n    \"48\": \"icons/48.png\",\n    \"128\": \"icons/128.png\"\n  },\n  \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n  \"background\": {\n    \"scripts\": [\n      \"js/background.js\"\n    ],\n    \"persistent\": false\n  },\n  \"browser_action\": {\n    \"default_popup\": \"popup.html\",\n    \"default_title\": \"__MSG_extName__\",\n    \"default_icon\": {\n      \"19\": \"icons/19.png\",\n      \"38\": \"icons/38.png\"\n    }\n  },\n  \"options_ui\": {\n    \"page\": \"options.html\",\n    \"browser_style\": true,\n    \"open_in_tab\": true\n  },\n  \"web_accessible_resources\": [\n    \"icons/dark/play.svg\",\n    \"icons/light/play.svg\",\n    \"icons/dark/pause.svg\",\n    \"icons/light/pause.svg\",\n    \"icons/dark/screen.svg\",\n    \"icons/light/screen.svg\",\n    \"icons/dark/clip.svg\",\n    \"icons/light/clip.svg\",\n    \"icons/dark/sync.svg\",\n    \"icons/light/sync.svg\",\n    \"icons/dark/duplicate.svg\",\n    \"icons/light/duplicate.svg\"\n  ]\n}\n"
  },
  {
    "path": "src/modules/code-generator/__tests__/playwright-code-generator.spec.js",
    "content": "import PlaywrightCodeGenerator from '../playwright'\n\ndescribe('PlaywrightCodeGenerator', () => {\n  test('it should generate nothing when there are no events', () => {\n    const events = []\n    const codeGenerator = new PlaywrightCodeGenerator()\n    expect(codeGenerator._parseEvents(events)).toBeFalsy()\n  })\n\n  test('it generates a page.selectOption() only for select dropdowns', () => {\n    const events = [\n      {\n        action: 'change',\n        selector: 'select#animals',\n        tagName: 'SELECT',\n        value: 'hamster',\n      },\n    ]\n    const codeGenerator = new PlaywrightCodeGenerator()\n    expect(codeGenerator._parseEvents(events)).toContain(\n      `await page.selectOption('${events[0].selector}', '${events[0].value}')`\n    )\n  })\n})\n"
  },
  {
    "path": "src/modules/code-generator/__tests__/puppeteer-code-generator.spec.js",
    "content": "import PuppeteerCodeGenerator from '../puppeteer'\nimport { headlessActions } from '@/services/constants'\n\ndescribe('PuppeteerCodeGenerator', () => {\n  test('it should generate nothing when there are no events', () => {\n    const events = []\n    const codeGenerator = new PuppeteerCodeGenerator()\n    expect(codeGenerator._parseEvents(events)).toBeFalsy()\n  })\n\n  test('it generates a page.select() only for select dropdowns', () => {\n    const events = [\n      {\n        action: 'change',\n        selector: 'select#animals',\n        tagName: 'SELECT',\n        value: 'hamster',\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    expect(codeGenerator._parseEvents(events)).toContain(\n      \"await page.select('select#animals', 'hamster')\"\n    )\n  })\n\n  test('it generates the correct waitForNavigation code', () => {\n    const events = [{ action: 'click', selector: 'a.link' }, { action: headlessActions.NAVIGATION }]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const code = codeGenerator._parseEvents(events)\n    const lines = code.split('\\n')\n    expect(lines[1].trim()).toEqual('const navigationPromise = page.waitForNavigation()')\n    expect(lines[4].trim()).toEqual(\"await page.click('a.link')\")\n    expect(lines[6].trim()).toEqual('await navigationPromise')\n  })\n\n  test('it does not generate waitForNavigation code when turned off', () => {\n    const events = [{ action: 'navigation*' }, { action: 'click', selector: 'a.link' }]\n    const codeGenerator = new PuppeteerCodeGenerator({\n      waitForNavigation: false,\n    })\n    expect(codeGenerator._parseEvents(events)).not.toContain(\n      'const navigationPromise = page.waitForNavigation()\\n'\n    )\n    expect(codeGenerator._parseEvents(events)).not.toContain('await navigationPromise\\n')\n  })\n\n  test('it generates the correct waitForSelector code before clicks', () => {\n    const events = [{ action: 'click', selector: 'a.link' }]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).toContain(\"await page.waitForSelector('a.link')\")\n    expect(result).toContain(\"await page.click('a.link')\")\n  })\n\n  test('it does not generate the waitForSelector code before clicks when turned off', () => {\n    const events = [{ action: 'click', selector: 'a.link' }]\n    const codeGenerator = new PuppeteerCodeGenerator({\n      waitForSelectorOnClick: false,\n    })\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).not.toContain(\"await page.waitForSelector('a.link')\")\n    expect(result).toContain(\"await page.click('a.link')\")\n  })\n\n  test('it uses the default page frame when events originate from frame 0', () => {\n    const events = [\n      {\n        action: 'click',\n        selector: 'a.link',\n        frameId: 0,\n        frameUrl: 'https://some.site.com',\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n    expect(result).toContain(\"await page.click('a.link')\")\n  })\n\n  test('it uses a different frame when events originate from an iframe', () => {\n    const events = [\n      {\n        action: 'click',\n        selector: 'a.link',\n        frameId: 123,\n        frameUrl: 'https://some.iframe.com',\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n    expect(result).toContain(\"await frame_123.click('a.link')\")\n  })\n\n  test('it adds a frame selection preamble when events originate from an iframe', () => {\n    const events = [\n      {\n        action: 'click',\n        selector: 'a.link',\n        frameId: 123,\n        frameUrl: 'https://some.iframe.com',\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n    expect(result).toContain('let frames = await page.frames()')\n    expect(result).toContain(\n      \"const frame_123 = frames.find(f => f.url() === 'https://some.iframe.com'\"\n    )\n  })\n\n  test('it generates the correct current page screenshot code', () => {\n    const events = [{ action: headlessActions.SCREENSHOT }]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).toContain(\"await page.screenshot({ path: 'screenshot_1.png' })\")\n  })\n\n  test('it generates the correct clipped page screenshot code', () => {\n    const events = [\n      {\n        action: headlessActions.SCREENSHOT,\n        value: { x: '10px', y: '300px', width: '800px', height: '600px' },\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).toContain(\n      \"await page.screenshot({ path: 'screenshot_1.png', clip: { x: 10, y: 300, width: 800, height: 600 } })\"\n    )\n  })\n\n  test('it generates the correct escaped value', () => {\n    const events = [\n      {\n        action: 'keydown',\n        keyCode: 9,\n        selector: 'input.value',\n        value: \"hello');console.log('world\",\n      },\n    ]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).toContain(\"await page.type('input.value', 'hello\\\\');console.log(\\\\'world')\")\n  })\n\n  test('it generates the correct escaped value with backslash', () => {\n    const events = [{ action: 'click', selector: 'button.\\\\hello\\\\' }]\n    const codeGenerator = new PuppeteerCodeGenerator()\n    const result = codeGenerator._parseEvents(events)\n\n    expect(result).toContain(\"await page.click('button.\\\\\\\\hello\\\\\\\\')\")\n  })\n})\n"
  },
  {
    "path": "src/modules/code-generator/base-generator.js",
    "content": "import Block from '@/modules/code-generator/block'\nimport { headlessActions, eventsToRecord } from '@/modules/code-generator/constants'\n\nexport const defaults = {\n  wrapAsync: false,\n  headless: true,\n  waitForNavigation: true,\n  waitForSelectorOnClick: true,\n  blankLinesBetweenBlocks: true,\n  dataAttribute: '',\n  showPlaywrightFirst: true,\n  keyCode: 9,\n}\n\nexport default class BaseGenerator {\n  constructor(options) {\n    this._options = Object.assign(defaults, options)\n    this._blocks = []\n    this._frame = 'page'\n    this._frameId = 0\n    this._allFrames = {}\n    this._screenshotCounter = 0\n\n    this._hasNavigation = false\n  }\n\n  generate() {\n    throw new Error('Not implemented.')\n  }\n\n  _getHeader() {\n    let hdr = this._options.wrapAsync ? this._wrappedHeader : this._header\n    hdr = this._options.headless ? hdr : hdr?.replace('launch()', 'launch({ headless: false })')\n    return hdr\n  }\n\n  _getFooter() {\n    return this._options.wrapAsync ? this._wrappedFooter : this._footer\n  }\n\n  _parseEvents(events) {\n    let result = ''\n\n    if (!events) return result\n\n    for (let i = 0; i < events.length; i++) {\n      const { action, selector, value, href, keyCode, tagName, frameId, frameUrl } = events[i]\n      const escapedSelector = selector ? selector?.replace(/\\\\/g, '\\\\\\\\') : selector\n\n      // we need to keep a handle on what frames events originate from\n      this._setFrames(frameId, frameUrl)\n\n      switch (action) {\n        case 'keydown':\n          if (keyCode === this._options.keyCode) {\n            this._blocks.push(this._handleKeyDown(escapedSelector, value, keyCode))\n          }\n          break\n        case 'click':\n          this._blocks.push(this._handleClick(escapedSelector, events))\n          break\n        case 'change':\n          if (tagName === 'SELECT') {\n            this._blocks.push(this._handleChange(escapedSelector, value))\n          }\n          break\n        case headlessActions.GOTO:\n          this._blocks.push(this._handleGoto(href, frameId))\n          break\n        case headlessActions.VIEWPORT:\n          this._blocks.push(this._handleViewport(value.width, value.height))\n          break\n        case headlessActions.NAVIGATION:\n          this._blocks.push(this._handleWaitForNavigation())\n          this._hasNavigation = true\n          break\n        case headlessActions.SCREENSHOT:\n          this._blocks.push(this._handleScreenshot(value))\n          break\n      }\n    }\n\n    if (this._hasNavigation && this._options.waitForNavigation) {\n      const block = new Block(this._frameId, {\n        type: headlessActions.NAVIGATION_PROMISE,\n        value: 'const navigationPromise = page.waitForNavigation()',\n      })\n      this._blocks.unshift(block)\n    }\n\n    this._postProcess()\n\n    const indent = this._options.wrapAsync ? '  ' : ''\n    const newLine = `\\n`\n\n    for (let block of this._blocks) {\n      const lines = block.getLines()\n      for (let line of lines) {\n        result += indent + line.value + newLine\n      }\n    }\n\n    return result\n  }\n\n  _setFrames(frameId, frameUrl) {\n    if (frameId && frameId !== 0) {\n      this._frameId = frameId\n      this._frame = `frame_${frameId}`\n      this._allFrames[frameId] = frameUrl\n    } else {\n      this._frameId = 0\n      this._frame = 'page'\n    }\n  }\n\n  _postProcess() {\n    // when events are recorded from different frames, we want to add a frame setter near the code that uses that frame\n    if (Object.keys(this._allFrames).length > 0) {\n      this._postProcessSetFrames()\n    }\n\n    if (this._options.blankLinesBetweenBlocks && this._blocks.length > 0) {\n      this._postProcessAddBlankLines()\n    }\n  }\n\n  _handleKeyDown(selector, value) {\n    const block = new Block(this._frameId)\n    block.addLine({\n      type: eventsToRecord.KEYDOWN,\n      value: `await ${this._frame}.type('${selector}', '${this._escapeUserInput(value)}')`,\n    })\n    return block\n  }\n\n  _handleClick(selector) {\n    const block = new Block(this._frameId)\n    if (this._options.waitForSelectorOnClick) {\n      block.addLine({\n        type: eventsToRecord.CLICK,\n        value: `await ${this._frame}.waitForSelector('${selector}')`,\n      })\n    }\n    block.addLine({\n      type: eventsToRecord.CLICK,\n      value: `await ${this._frame}.click('${selector}')`,\n    })\n    return block\n  }\n\n  _handleChange(selector, value) {\n    return new Block(this._frameId, {\n      type: eventsToRecord.CHANGE,\n      value: `await ${this._frame}.select('${selector}', '${value}')`,\n    })\n  }\n\n  _handleGoto(href) {\n    return new Block(this._frameId, {\n      type: headlessActions.GOTO,\n      value: `await ${this._frame}.goto('${href}')`,\n    })\n  }\n\n  _handleViewport() {\n    throw new Error('Not implemented.')\n  }\n\n  _handleScreenshot(value) {\n    this._screenshotCounter += 1\n\n    if (value) {\n      return new Block(this._frameId, {\n        type: headlessActions.SCREENSHOT,\n        value: `const element${this._screenshotCounter} = await page.$('${value}')\nawait element${this._screenshotCounter}.screenshot({ path: 'screenshot_${this._screenshotCounter}.png' })`,\n      })\n    }\n\n    return new Block(this._frameId, {\n      type: headlessActions.SCREENSHOT,\n      value: `await ${this._frame}.screenshot({ path: 'screenshot_${this._screenshotCounter}.png', fullPage: true })`,\n    })\n  }\n\n  _handleWaitForNavigation() {\n    const block = new Block(this._frameId)\n    if (this._options.waitForNavigation) {\n      block.addLine({\n        type: headlessActions.NAVIGATION,\n        value: `await navigationPromise`,\n      })\n    }\n    return block\n  }\n\n  _postProcessSetFrames() {\n    for (let [i, block] of this._blocks.entries()) {\n      const lines = block.getLines()\n      for (let line of lines) {\n        if (line.frameId && Object.keys(this._allFrames).includes(line.frameId.toString())) {\n          const declaration = `const frame_${line.frameId} = frames.find(f => f.url() === '${\n            this._allFrames[line.frameId]\n          }')`\n          this._blocks[i].addLineToTop({\n            type: headlessActions.FRAME_SET,\n            value: declaration,\n          })\n          this._blocks[i].addLineToTop({\n            type: headlessActions.FRAME_SET,\n            value: 'let frames = await page.frames()',\n          })\n          delete this._allFrames[line.frameId]\n          break\n        }\n      }\n    }\n  }\n\n  _postProcessAddBlankLines() {\n    let i = 0\n    while (i <= this._blocks.length) {\n      const blankLine = new Block()\n      blankLine.addLine({ type: null, value: '' })\n      this._blocks.splice(i, 0, blankLine)\n      i += 2\n    }\n  }\n\n  _escapeUserInput(value) {\n    return value?.replace(/\\\\/g, '\\\\\\\\')?.replace(/'/g, \"\\\\'\")\n  }\n}\n"
  },
  {
    "path": "src/modules/code-generator/block.js",
    "content": "export default class Block {\n  constructor(frameId, line) {\n    this._lines = []\n    this._frameId = frameId\n\n    if (line) {\n      line.frameId = this._frameId\n      this._lines.push(line)\n    }\n  }\n\n  addLineToTop(line) {\n    line.frameId = this._frameId\n    this._lines.unshift(line)\n  }\n\n  addLine(line) {\n    line.frameId = this._frameId\n    this._lines.push(line)\n  }\n\n  getLines() {\n    return this._lines\n  }\n}\n"
  },
  {
    "path": "src/modules/code-generator/constants.js",
    "content": "export const headlessActions = {\n  GOTO: 'GOTO',\n  VIEWPORT: 'VIEWPORT',\n  WAITFORSELECTOR: 'WAITFORSELECTOR',\n  NAVIGATION: 'NAVIGATION',\n  NAVIGATION_PROMISE: 'NAVIGATION_PROMISE',\n  FRAME_SET: 'FRAME_SET',\n  SCREENSHOT: 'SCREENSHOT',\n}\n\nexport const eventsToRecord = {\n  CLICK: 'click',\n  DBLCLICK: 'dblclick',\n  CHANGE: 'change',\n  KEYDOWN: 'keydown',\n  SELECT: 'select',\n  SUBMIT: 'submit',\n  LOAD: 'load',\n  UNLOAD: 'unload',\n}\n\nexport const headlessTypes = {\n  PUPPETEER: 'puppeteer',\n  PLAYWRIGHT: 'playwright',\n}\n"
  },
  {
    "path": "src/modules/code-generator/index.js",
    "content": "import PuppeteerCodeGenerator from '@/modules/code-generator/puppeteer'\nimport PlaywrightCodeGenerator from '@/modules/code-generator/playwright'\n\nexport default class CodeGenerator {\n  constructor(options = {}) {\n    this.puppeteerGenerator = new PuppeteerCodeGenerator(options)\n    this.playwrightGenerator = new PlaywrightCodeGenerator(options)\n  }\n\n  generate(recording) {\n    return {\n      puppeteer: this.puppeteerGenerator.generate(recording),\n      playwright: this.playwrightGenerator.generate(recording),\n    }\n  }\n}\n"
  },
  {
    "path": "src/modules/code-generator/playwright.js",
    "content": "import Block from '@/modules/code-generator/block'\nimport { headlessActions } from '@/modules/code-generator/constants'\nimport BaseGenerator from '@/modules/code-generator/base-generator'\n\nconst importPlaywright = `const { chromium } = require('playwright');\\n`\n\nconst header = `const browser = await chromium.launch()\nconst page = await browser.newPage()`\n\nconst footer = `await browser.close()`\n\nconst wrappedHeader = `(async () => {\n  ${header}\\n`\n\nconst wrappedFooter = `  ${footer}\n})()`\n\nexport default class PlaywrightCodeGenerator extends BaseGenerator {\n  constructor(options) {\n    super(options)\n    this._header = header\n    this._footer = footer\n    this._wrappedHeader = wrappedHeader\n    this._wrappedFooter = wrappedFooter\n  }\n\n  generate(events) {\n    return importPlaywright + this._getHeader() + this._parseEvents(events) + this._getFooter()\n  }\n\n  _handleViewport(width, height) {\n    return new Block(this._frameId, {\n      type: headlessActions.VIEWPORT,\n      value: `await ${this._frame}.setViewportSize({ width: ${width}, height: ${height} })`,\n    })\n  }\n\n  _handleChange(selector, value) {\n    return new Block(this._frameId, {\n      type: headlessActions.CHANGE,\n      value: `await ${this._frame}.selectOption('${selector}', '${value}')`,\n    })\n  }\n}\n"
  },
  {
    "path": "src/modules/code-generator/puppeteer.js",
    "content": "import Block from '@/modules/code-generator/block'\nimport { headlessActions } from '@/modules/code-generator/constants'\nimport BaseGenerator from '@/modules/code-generator/base-generator'\n\nconst importPuppeteer = `const puppeteer = require('puppeteer');\\n`\n\nconst header = `const browser = await puppeteer.launch()\nconst page = await browser.newPage()`\n\nconst footer = `await browser.close()`\n\nconst wrappedHeader = `(async () => {\n  const browser = await puppeteer.launch()\n  const page = await browser.newPage()\\n`\n\nconst wrappedFooter = `  await browser.close()\n})()`\n\nexport default class PuppeteerCodeGenerator extends BaseGenerator {\n  constructor(options) {\n    super(options)\n    this._header = header\n    this._footer = footer\n    this._wrappedHeader = wrappedHeader\n    this._wrappedFooter = wrappedFooter\n  }\n\n  generate(events) {\n    return importPuppeteer + this._getHeader() + this._parseEvents(events) + this._getFooter()\n  }\n\n  _handleViewport(width, height) {\n    return new Block(this._frameId, {\n      type: headlessActions.VIEWPORT,\n      value: `await ${this._frame}.setViewport({ width: ${width}, height: ${height} })`,\n    })\n  }\n}\n"
  },
  {
    "path": "src/modules/overlay/Overlay.vue",
    "content": "<template>\n  <nav\n    v-show=\"!screenshotMode\"\n    :class=\"{\n      'hr-event-recorded': hasRecorded && !isPaused && !isStopped,\n      dark: darkMode,\n      hide: !show,\n    }\"\n  >\n    <template v-if=\"isStopped\">\n      <div class=\"hr-success-message\">\n        <h3>Recording finished!</h3>\n        <p>You can copy the code to clipboard right away!</p>\n      </div>\n      <div class=\"hr-success-bar\">\n        <button @click=\"copy\" class=\"hr-btn-large\" style=\"width: 151px;\">\n          <img\n            v-show=\"!isCopying\"\n            width=\"16\"\n            height=\"16\"\n            :src=\"getIcon('duplicate')\"\n            alt=\"copy to clipboard\"\n          />\n          <span v-show=\"!isCopying\">Copy to clipboard</span>\n          <span v-show=\"isCopying\">Copied!</span>\n        </button>\n        <button @click=\"restart\" class=\"hr-btn-large\">\n          <img width=\"16\" height=\"16\" :src=\"getIcon('sync')\" alt=\"restart recording\" />\n          Restart Recording\n        </button>\n        <button @click=\"close\" class=\"btn-close\">\n          &times;\n        </button>\n      </div>\n    </template>\n    <template v-else>\n      <div class=\"hr-rec\" v-show=\"!isPaused\">\n        <span class=\"hr-red-dot\"></span>\n        REC\n      </div>\n      <span class=\"hr-shortcut\">\n        alt + k to hide\n      </span>\n      <button\n        class=\"hr-btn\"\n        title=\"stop\"\n        @click=\"stop\"\n        v-tippy=\"{ content: 'Stop Recording', appendTo: 'parent' }\"\n      >\n        <div class=\"hr-stop-square\"></div>\n      </button>\n      <button\n        class=\"hr-btn\"\n        title=\"pause\"\n        @click=\"pause\"\n        v-tippy=\"{ content: isPaused ? 'Resume Recording' : 'Pause Recording', appendTo: 'parent' }\"\n      >\n        <img v-show=\"isPaused\" width=\"27\" height=\"27\" :src=\"getIcon('play')\" alt=\"play\" />\n        <img v-show=\"!isPaused\" width=\"27\" height=\"27\" :src=\"getIcon('pause')\" alt=\"pause\" />\n      </button>\n      <div class=\"hr-separator\"></div>\n      <button\n        :disabled=\"isPaused\"\n        class=\"hr-btn-big\"\n        @click.prevent=\"fullScreenshot\"\n        v-tippy=\"{ content: 'Full Screenshot (alt+shift+F)', appendTo: 'parent' }\"\n      >\n        <img width=\"27\" height=\"27\" :src=\"getIcon('screen')\" alt=\"full page sreenshot\" />\n      </button>\n      <button\n        :disabled=\"isPaused\"\n        class=\"hr-btn-big\"\n        @click.prevent=\"clippedScreenshot\"\n        v-tippy=\"{ content: 'Element Screenshot (alt+shift+E)', appendTo: 'parent' }\"\n      >\n        <img width=\"27\" height=\"27\" :src=\"getIcon('clip')\" alt=\"clipped sreenshot\" />\n      </button>\n      <div class=\"hr-separator\"></div>\n      <span class=\"hr-current-selector\">\n        {{ currentSelector }}\n      </span>\n    </template>\n  </nav>\n</template>\n\n<script>\nimport { directive } from 'vue-tippy'\nimport 'tippy.js/dist/tippy.css'\n\nimport { mapState, mapMutations } from 'vuex'\n\nexport default {\n  name: 'Overlay',\n  directives: { tippy: directive },\n\n  data() {\n    return {\n      currentSelector: '',\n      show: true,\n    }\n  },\n\n  computed: {\n    ...mapState([\n      'isPaused',\n      'isStopped',\n      'screenshotMode',\n      'darkMode',\n      'hasRecorded',\n      'isCopying',\n      'recording',\n    ]),\n  },\n\n  mounted() {\n    window.document.body.addEventListener('keyup', this.keyupListener, false)\n  },\n\n  beforeUnmount() {\n    window.document.body.removeEventListener('keyup', this.keyupListener, false)\n  },\n\n  methods: {\n    ...mapMutations(['copy', 'stop', 'close', 'restart']),\n\n    getIcon(icon) {\n      return browser.runtime.getURL(`icons/${this.darkMode ? 'dark' : 'light'}/${icon}.svg`)\n    },\n\n    toggle() {\n      this.show = !this.show\n    },\n\n    pause() {\n      this.isPaused ? this.$store.commit('unpause') : this.$store.commit('pause')\n    },\n\n    fullScreenshot() {\n      this.$store.commit('startScreenshotMode', false)\n    },\n\n    clippedScreenshot() {\n      this.$store.commit('startScreenshotMode', true)\n    },\n\n    keyupListener(e) {\n      if (!e.altKey) {\n        return\n      }\n\n      if (e.key === 'k') {\n        this.toggle()\n      }\n\n      if (e.key === 'F') {\n        this.fullScreenshot()\n      }\n\n      if (e.key === 'E') {\n        this.clippedScreenshot()\n      }\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n@import '../../assets/animations.css';\n\n$namespace: 'hr';\n\n#headless-recorder-overlay {\n  .#{$namespace}-button-open {\n    position: fixed;\n    bottom: 10px;\n    left: 0;\n    right: 0;\n  }\n\n  button {\n    border: none;\n    margin: 0;\n    padding: 0;\n\n    overflow: visible;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin-right: 10px;\n  }\n\n  nav {\n    font-family: sans-serif;\n    box-sizing: border-box;\n    animation-name: slideup;\n    border: solid 2px #f9fafc;\n    animation-duration: 0.3s;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in-out;\n    display: flex;\n    align-items: center;\n    z-index: 2147483647;\n    position: fixed;\n    bottom: 10px;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    font-size: 12px;\n    color: #1f2d3d;\n    padding: 20px 16px;\n    transition: all 0.1s ease;\n    width: 828px;\n    height: 72px;\n    background: #f9fafc;\n    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);\n    border-radius: 6px;\n\n    &.#{$namespace}-event-recorded {\n      border: solid 2px #45c8f1 !important;\n      transition: all 0.1s linear;\n    }\n\n    button {\n      &.#{$namespace}-btn-big {\n        padding: 5px 15px;\n        background: #eff2f7;\n        border-radius: 3px;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n\n      &.#{$namespace}-btn {\n        padding: 5px 0;\n      }\n\n      &.#{$namespace}-btn-large {\n        border-radius: 3px;\n        background: #eff2f7;\n        padding: 9px 17px 9px 8px;\n        color: #1f2d3d;\n        font-weight: 600;\n        margin-right: 16px;\n\n        &:last-of-type {\n          margin-right: 0;\n        }\n\n        &:hover {\n          background: #e0e6ed;\n        }\n\n        img {\n          margin-right: 8px;\n        }\n      }\n\n      &.#{$namespace}-btn-close {\n        font-size: 18px;\n        color: #161616;\n        margin-right: 0;\n      }\n    }\n\n    .#{$namespace}-shortcut {\n      color: #8492a6;\n      margin-right: 0;\n      font-family: sans-serif;\n      position: absolute;\n      top: 4px;\n      right: 4px;\n    }\n\n    .#{$namespace}-rec {\n      font-family: sans-serif;\n      animation: pulse 2s infinite;\n      font-size: 12px;\n      position: absolute;\n      top: 4px;\n      left: 4px;\n      font-weight: 600;\n      color: #ff4949;\n      text-transform: uppercase;\n\n      .#{$namespace}-red-dot {\n        display: inline-block;\n        border-radius: 50%;\n        width: 9px;\n        height: 9px;\n        background: #ff4949;\n      }\n    }\n\n    .#{$namespace}-separator {\n      width: 1px;\n      height: 32px;\n      background: #e0e6ed;\n      margin-right: 0.8rem;\n    }\n\n    .#{$namespace}-stop-square {\n      width: 24px;\n      height: 24px;\n      border-radius: 3px;\n      background-color: #1f2d3d;\n    }\n\n    .#{$namespace}-current-selector {\n      font-weight: 500;\n      font-size: 10px;\n      line-height: 20px;\n      font-family: monospace;\n    }\n\n    .#{$namespace}-success-bar {\n      display: flex;\n      width: 60%;\n      justify-content: flex-end;\n    }\n\n    .#{$namespace}-success-message {\n      width: 40%;\n\n      h3 {\n        font-size: 14px;\n        font-weight: 600;\n        margin: 0;\n        color: #1f2d3d;\n      }\n\n      p {\n        font-size: 12px;\n        margin: 0;\n        color: #3c4858;\n      }\n    }\n\n    .tippy-box {\n      box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);\n      margin-top: -45px;\n      color: #1f2d3d;\n      background: #f9fafc;\n      border-radius: 4px;\n    }\n\n    .tippy-arrow {\n      color: #f9fafc;\n    }\n  }\n\n  nav.dark {\n    background: #161616;\n    border: solid 2px #161616;\n    color: #f9fafc;\n\n    button {\n      &.#{$namespace}-btn-big {\n        padding: 5px 15px;\n        background: #2e2e2e;\n        border-radius: 3px;\n      }\n\n      &.#{$namespace}-btn-large {\n        background: #1f2d3d;\n        color: #f9fafc;\n\n        &:hover {\n          background: #474747;\n        }\n      }\n\n      &.#{$namespace}-btn-close,\n      &.#{$namespace}-btn-label,\n      &.#{$namespace}-btn-up {\n        color: #fff;\n      }\n\n      &.#{$namespace}-btn-up {\n        background: #161616;\n      }\n    }\n\n    .#{$namespace}-success-message {\n      h3 {\n        color: #fff;\n      }\n\n      p {\n        color: #e0e6ed;\n      }\n    }\n\n    .#{$namespace}-separator {\n      background: #2e2e2e;\n    }\n\n    .#{$namespace}-stop-square {\n      background-color: #f9fafc;\n    }\n\n    .tippy-box {\n      color: #f9fafc;\n      background: #161616;\n    }\n\n    .tippy-arrow {\n      color: #161616;\n    }\n  }\n\n  nav.hide {\n    transform: translateY(82px) !important;\n  }\n}\n</style>\n"
  },
  {
    "path": "src/modules/overlay/Selector.vue",
    "content": "<template>\n  <div class=\"overlay\">\n    <div :class=\"selectorClass\" ref=\"selector\"></div>\n  </div>\n</template>\n\n<script>\nimport { mapState } from 'vuex'\n\nexport default {\n  data() {\n    return {\n      overlay: null,\n      selector: null,\n      element: null,\n      scrolling: false,\n      dimensions: {},\n    }\n  },\n\n  computed: {\n    ...mapState(['screenshotClippedMode', 'screenshotMode', 'isStopped']),\n\n    selectorClass() {\n      if (this.isStopped) {\n        return ''\n      }\n\n      if (!this.screenshotMode || this.screenshotClippedMode) {\n        return this.scrolling ? 'hide selector' : 'selector'\n      }\n\n      return ''\n    },\n  },\n\n  methods: {\n    move(e, skippedSelectors = []) {\n      if (this.element === e.target) {\n        return\n      }\n\n      this.element = e.target\n\n      if (skippedSelectors.includes(this.element.id)) {\n        return\n      }\n\n      this.dimensions.top = -window.scrollY\n      this.dimensions.left = -window.scrollX\n\n      let elem = e.target\n\n      while (elem && elem !== document.body) {\n        this.dimensions.top += elem.offsetTop\n        this.dimensions.left += elem.offsetLeft\n        elem = elem.offsetParent\n      }\n\n      this.dimensions.width = this.element.offsetWidth + 2\n      this.dimensions.height = this.element.offsetHeight + 2\n\n      this.$refs.selector.style.top = this.dimensions.top - 2 + 'px'\n      this.$refs.selector.style.left = this.dimensions.left - 2 + 'px'\n      this.$refs.selector.style.width = this.dimensions.width + 'px'\n      this.$refs.selector.style.height = this.dimensions.height + 'px'\n    },\n\n    // TODO: Integrate shooter with selector\n    click(e) {\n      setTimeout(() => {\n        let clip = null\n\n        if (this.$refs.selector) {\n          clip = {\n            x: this.$refs.selector.style.left,\n            y: this.$refs.selector.style.top,\n            width: this.$refs.selector.style.width,\n            height: this.$refs.selector.style.height,\n          }\n        }\n\n        this.$emit('click', { clip, raw: e })\n      }, 100)\n    },\n  },\n}\n</script>\n\n<style scoped>\n.overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 2147483646;\n}\n\n.selector {\n  padding: 1px;\n  position: fixed;\n  background: rgba(255, 73, 73, 0.1);\n  border: 2px dashed rgba(255, 73, 73, 0.7);\n}\n\n.hide {\n  display: none;\n}\n</style>\n"
  },
  {
    "path": "src/modules/overlay/constants.js",
    "content": "export const overlaySelectors = {\n  OVERLAY_ID: 'headless-recorder-overlay',\n  SELECTOR_ID: 'headless-recorder-selector',\n  CURRENT_SELECTOR_CLASS: 'headless-recorder-selected-element',\n  CURSOR_CAMERA_CLASS: 'headless-recorder-camera-cursor',\n  FLASH_CLASS: 'headless-recorder-flash',\n}\n\nexport const overlayActions = {\n  COPY: 'COPY',\n  STOP: 'STOP',\n  CLOSE: 'CLOSE',\n  PAUSE: 'PAUSE',\n  UNPAUSE: 'UNPAUSE',\n  RESTART: 'RESTART',\n  FULL_SCREENSHOT: 'FULL_SCREENSHOT',\n  CLIPPED_SCREENSHOT: 'CLIPPED_SCREENSHOT',\n  ABORT_SCREENSHOT: 'ABORT_SCREENSHOT',\n\n  TOGGLE_SCREENSHOT_MODE: 'TOGGLE_SCREENSHOT_MODE',\n  TOGGLE_SCREENSHOT_CLIPPED_MODE: 'TOGGLE_SCREENSHOT_CLIPPED_MODE',\n  CLOSE_SCREENSHOT_MODE: 'CLOSE_SCREENSHOT_MODE',\n  TOGGLE_OVERLAY: 'TOGGLE_OVERLAY',\n}\n"
  },
  {
    "path": "src/modules/overlay/index.js",
    "content": "import { createApp } from 'vue'\n\nimport getSelector from '@/services/selector'\nimport SelectorApp from '@/modules/overlay/Selector.vue'\nimport OverlayApp from '@/modules/overlay/Overlay.vue'\nimport { overlaySelectors } from '@/modules/overlay/constants'\n\nexport default class Overlay {\n  constructor({ store }) {\n    this.overlayApp = null\n    this.selectorApp = null\n\n    this.overlayContainer = null\n    this.selectorContainer = null\n\n    this.mouseOverEvent = null\n    this.scrollEvent = null\n    this.isScrolling = false\n\n    this.store = store\n  }\n\n  mount({ clear = false, pause = false } = {}) {\n    if (this.overlayContainer) {\n      return\n    }\n\n    this.overlayContainer = document.createElement('div')\n    this.overlayContainer.id = overlaySelectors.OVERLAY_ID\n    document.body.appendChild(this.overlayContainer)\n\n    this.selectorContainer = document.createElement('div')\n    this.selectorContainer.id = overlaySelectors.SELECTOR_ID\n    document.body.appendChild(this.selectorContainer)\n\n    if (clear) {\n      this.store.commit('clear')\n    }\n    if (pause) {\n      this.store.commit('pause')\n    }\n\n    this.selectorApp = createApp(SelectorApp)\n      .use(this.store)\n      .mount('#' + overlaySelectors.SELECTOR_ID)\n\n    this.overlayApp = createApp(OverlayApp)\n      .use(this.store)\n      .mount('#' + overlaySelectors.OVERLAY_ID)\n\n    this.mouseOverEvent = e => {\n      const selector = getSelector(e, { dataAttribute: this.store.state.dataAttribute })\n      this.overlayApp.currentSelector = selector.includes('#' + overlaySelectors.OVERLAY_ID)\n        ? ''\n        : selector\n\n      if (\n        this.overlayApp.currentSelector &&\n        (!this.store.state.screenshotMode || this.store.state.screenshotClippedMode)\n      ) {\n        this.selectorApp.move(e, [overlaySelectors.OVERLAY_ID])\n      }\n    }\n\n    // Hide selector while the user is scrolling\n    this.scrollEvent = () => {\n      this.selectorApp.scrolling = true\n      window.clearTimeout(this.isScrolling)\n      this.isScrolling = setTimeout(() => (this.selectorApp.scrolling = false), 66)\n    }\n\n    window.document.addEventListener('mouseover', this.mouseOverEvent)\n    window.addEventListener('scroll', this.scrollEvent, false)\n  }\n\n  unmount() {\n    if (!this.overlayContainer) {\n      return\n    }\n\n    document.body.removeChild(this.overlayContainer)\n    document.body.removeChild(this.selectorContainer)\n\n    this.overlayContainer = null\n    this.overlayApp = null\n    this.selectorContainer = null\n    this.selectorApp = null\n\n    window.document.removeEventListener('mouseover', this.mouseOverEvent)\n    window.removeEventListener('scroll', this.scrollEvent, false)\n  }\n}\n"
  },
  {
    "path": "src/modules/recorder/index.js",
    "content": "import getSelector from '@/services/selector'\nimport { recordingControls } from '@/services/constants'\nimport { overlaySelectors } from '@/modules/overlay/constants'\nimport { eventsToRecord } from '@/modules/code-generator/constants'\n\nexport default class Recorder {\n  constructor({ store }) {\n    // this._boundedMessageListener = null\n    this._eventLog = []\n    this._previousEvent = null\n\n    this._isTopFrame = window.location === window.parent.location\n    this._isRecordingClicks = true\n\n    this.store = store\n  }\n\n  init(cb) {\n    const events = Object.values(eventsToRecord)\n\n    if (!window.pptRecorderAddedControlListeners) {\n      this._addAllListeners(events)\n      cb && cb()\n      window.pptRecorderAddedControlListeners = true\n    }\n\n    if (!window.document.pptRecorderAddedControlListeners && chrome.runtime?.onMessage) {\n      window.document.pptRecorderAddedControlListeners = true\n    }\n\n    if (this._isTopFrame) {\n      this._sendMessage({ control: recordingControls.EVENT_RECORDER_STARTED })\n      this._sendMessage({ control: recordingControls.GET_CURRENT_URL, href: window.location.href })\n      this._sendMessage({\n        control: recordingControls.GET_VIEWPORT_SIZE,\n        coordinates: { width: window.innerWidth, height: window.innerHeight },\n      })\n    }\n  }\n\n  _addAllListeners(events) {\n    const boundedRecordEvent = this._recordEvent.bind(this)\n    events.forEach(type => window.addEventListener(type, boundedRecordEvent, true))\n  }\n\n  _sendMessage(msg) {\n    // filter messages based on enabled / disabled features\n    if (msg.action === 'click' && !this._isRecordingClicks) {\n      return\n    }\n\n    try {\n      chrome.runtime && chrome?.runtime?.onMessage\n        ? chrome.runtime.sendMessage(msg)\n        : this._eventLog.push(msg)\n    } catch (err) {\n      console.debug('caught error', err)\n    }\n  }\n\n  _recordEvent(e) {\n    if (this._previousEvent && this._previousEvent.timeStamp === e.timeStamp) {\n      return\n    }\n    this._previousEvent = e\n\n    // we explicitly catch any errors and swallow them, as none node-type events are also ingested.\n    // for these events we cannot generate selectors, which is OK\n    try {\n      const selector = getSelector(e, { dataAttribute: this.store.state.dataAttribute })\n\n      if (selector.includes('#' + overlaySelectors.OVERLAY_ID)) {\n        return\n      }\n\n      this.store.commit('showRecorded')\n\n      this._sendMessage({\n        selector,\n        value: e.target.value,\n        tagName: e.target.tagName,\n        action: e.type,\n        keyCode: e.keyCode ? e.keyCode : null,\n        href: e.target.href ? e.target.href : null,\n        coordinates: Recorder._getCoordinates(e),\n      })\n    } catch (err) {\n      console.error(err)\n    }\n  }\n\n  _getEventLog() {\n    return this._eventLog\n  }\n\n  _clearEventLog() {\n    this._eventLog = []\n  }\n\n  disableClickRecording() {\n    this._isRecordingClicks = false\n  }\n\n  enableClickRecording() {\n    this._isRecordingClicks = true\n  }\n\n  static _getCoordinates(evt) {\n    const eventsWithCoordinates = {\n      mouseup: true,\n      mousedown: true,\n      mousemove: true,\n      mouseover: true,\n    }\n\n    return eventsWithCoordinates[evt.type] ? { x: evt.clientX, y: evt.clientY } : null\n  }\n}\n"
  },
  {
    "path": "src/modules/shooter/index.js",
    "content": "import EventEmitter from 'events'\nimport getSelector from '@/services/selector'\nimport { overlayActions, overlaySelectors } from '@/modules/overlay/constants'\n\nconst BORDER_THICKNESS = 2\nclass Shooter extends EventEmitter {\n  constructor({ isClipped = false, store } = {}) {\n    super()\n\n    this.store = store\n    this.isClipped = isClipped\n\n    this._overlay = null\n    this._selector = null\n    this._element = null\n    this._dimensions = {}\n    this.currentSelctor = ''\n\n    this._boundeMouseMove = this.mousemove.bind(this)\n    this._boundeMouseOver = this.mouseover.bind(this)\n    this._boundeMouseUp = this.mouseup.bind(this)\n    this._boundedKeyUp = this.keyup.bind(this)\n  }\n\n  mouseover(e) {\n    this.currentSelctor = getSelector(e, { dataAttribute: this.store.state.dataAttribute }).replace(\n      '.' + overlaySelectors.CURSOR_CAMERA_CLASS,\n      'body'\n    )\n  }\n\n  startScreenshotMode() {\n    if (!this._overlay) {\n      this._overlay = window.document.createElement('div')\n      this._overlay.id = 'headless-recorder-shooter'\n      this._overlay.style.position = 'fixed'\n      this._overlay.style.top = '0px'\n      this._overlay.style.left = '0px'\n      this._overlay.style.width = '100%'\n      this._overlay.style.height = '100%'\n      this._overlay.style.pointerEvents = 'none'\n      this._overlay.style.zIndex = 2147483646\n\n      if (this.isClipped) {\n        this._selector = window.document.createElement('div')\n        this._selector.id = 'headless-recorder-shooter-outline'\n        this._selector.style.position = 'fixed'\n        this._overlay.appendChild(this._selector)\n      } else {\n        this._overlay.style.border = `${BORDER_THICKNESS}px dashed rgba(255, 73, 73, 0.7)`\n        this._overlay.style.background = 'rgba(255, 73, 73, 0.1)'\n      }\n    }\n\n    if (!this._overlay.parentNode) {\n      window.document.body.appendChild(this._overlay)\n\n      window.document.body.addEventListener('mousemove', this._boundeMouseMove, false)\n      window.document.body.addEventListener('click', this._boundeMouseUp, false)\n      window.document.body.addEventListener('keyup', this._boundedKeyUp, false)\n      window.document.addEventListener('mouseover', this._boundeMouseOver, false)\n    }\n  }\n\n  stopScreenshotMode() {\n    if (this._overlay) {\n      window.document.body.removeChild(this._overlay)\n    }\n    this._overlay = this._selector = this._element = null\n    this._dimensions = {}\n  }\n\n  showScreenshotEffect() {\n    window.document.body.classList.add(overlaySelectors.FLASH_CLASS)\n    window.document.body.classList.remove(overlaySelectors.CURSOR_CAMERA_CLASS)\n    setTimeout(() => window.document.body.classList.remove(overlaySelectors.FLASH_CLASS), 1000)\n  }\n\n  addCameraIcon() {\n    window.document.body.classList.add(overlaySelectors.CURSOR_CAMERA_CLASS)\n  }\n\n  removeCameraIcon() {\n    window.document.body.classList.remove(overlaySelectors.CURSOR_CAMERA_CLASS)\n  }\n\n  mousemove(e) {\n    if (this._element !== e.target) {\n      this._element = e.target\n\n      this._dimensions.top = -window.scrollY\n      this._dimensions.left = -window.scrollX\n\n      let elem = e.target\n\n      while (elem && elem !== window.document.body) {\n        this._dimensions.top += elem.offsetTop\n        this._dimensions.left += elem.offsetLeft\n        elem = elem.offsetParent\n      }\n      this._dimensions.width = this._element.offsetWidth\n      this._dimensions.height = this._element.offsetHeight\n\n      if (this._selector) {\n        this._selector.style.top = this._dimensions.top - BORDER_THICKNESS + 'px'\n        this._selector.style.left = this._dimensions.left - BORDER_THICKNESS + 'px'\n        this._selector.style.width = this._dimensions.width + 'px'\n        this._selector.style.height = this._dimensions.height + 'px'\n      }\n    }\n  }\n\n  mouseup(e) {\n    setTimeout(() => {\n      this.cleanup()\n      const payload = { raw: e }\n\n      if (this.isClipped) {\n        payload.selector = this.currentSelctor\n      }\n\n      this.emit('click', payload)\n    }, 100)\n  }\n\n  keyup(e) {\n    if (e.code !== 'Escape') {\n      return\n    }\n\n    this.cleanup()\n    this.removeCameraIcon()\n    chrome.runtime.sendMessage({ control: overlayActions.ABORT_SCREENSHOT })\n  }\n\n  cleanup() {\n    window.document.body.removeEventListener('mousemove', this._boundeMouseMove, false)\n    window.document.body.removeEventListener('click', this._boundeMouseUp, false)\n    window.document.body.removeEventListener('keyup', this._boundedKeyUp, false)\n    window.document.removeEventListener('mouseover', this._boundeMouseOver, false)\n\n    window.document.body.removeChild(this._overlay)\n    this._overlay = null\n  }\n}\n\nexport default Shooter\n"
  },
  {
    "path": "src/options/OptionsApp.vue",
    "content": "<template>\n  <main class=\"bg-gray-lightest flex py-9 w-full h-screen overflow-auto dark:bg-black\">\n    <div class=\"flex flex-col w-1/4 pt-12 pr-6\">\n      <a href=\"https://www.checklyhq.com/docs/headless-recorder/\" target=\"_blank\">Docs</a>\n      <a href=\"https://github.com/checkly/headless-recorder\" target=\"_blank\">GitHub</a>\n      <a href=\"https://github.com/checkly/headless-recorder/blob/main/CHANGELOG.md\"\n        >Release notes</a\n      >\n      <a\n        href=\"https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda\"\n        target=\"_blank\"\n        >Chrome Web Store</a\n      >\n    </div>\n    <div class=\"flex flex-col w-1/2\">\n      <header class=\"flex flex-row justify-between items-center mb-3.5\">\n        <div class=\"flex items-baseline\">\n          <h1 class=\"text-blue text-2xl font-bold mr-1\">\n            Headless Recorder\n          </h1>\n          <span class=\"text-gray-dark dark:text-gray-light text-sm\">v{{ version }}</span>\n        </div>\n        <span\n          role=\"alert\"\n          class=\"text-gray-darkest dark:text-white text-base font-semibold\"\n          v-show=\"saving\"\n          >Saving...</span\n        >\n      </header>\n\n      <section>\n        <h2>Recorder</h2>\n        <label for=\"custom-data-attribute\">Custom data attribute</label>\n        <div class=\"mb-6\">\n          <input\n            id=\"custom-data-attribute\"\n            class=\"w-full placeholder-gray-darkish bg-gray-lighter h-7 rounded px-2 mb-2 text-sm\"\n            type=\"text\"\n            v-model.trim=\"options.code.dataAttribute\"\n            @change=\"save\"\n            placeholder=\"your custom data-* attribute\"\n          />\n          <p>\n            Define an attribute that we'll attempt to use when selecting the elements, i.e\n            \"data-custom\". This is handy when React or Vue based apps generate random class names.\n          </p>\n          <p>\n            <span role=\"img\" aria-label=\"siren\">🚨</span>\n            <span class=\"ml-1 font-bold text-black-shady dark:text-white\"\n              >When <span class=\"italic\">\"custom data attribute\"</span>&nbsp; is set, it will take\n              precedence from over any other selector (even ID)\n            </span>\n          </p>\n        </div>\n        <div>\n          <label>Set key code</label>\n          <div class=\"mb-2\">\n            <Button @click=\"listenForKeyCodePress\" class=\"font-semibold text-white text-sm\">\n              {{ recordingKeyCodePress ? 'Capturing...' : 'Record Key Stroke' }}\n            </Button>\n            <span class=\"text-gray-dark dark:text-gray-light text-sm ml-3\">\n              {{ options.code.keyCode }}\n            </span>\n          </div>\n          <p>\n            What key will be used for capturing input changes. The value here is the key code. This\n            will not handle multiple keys.\n          </p>\n        </div>\n      </section>\n\n      <section>\n        <h2>Generator</h2>\n        <Toggle v-model=\"options.code.wrapAsync\">\n          Wrap code in async function\n        </Toggle>\n        <Toggle v-model=\"options.code.headless\">\n          Set <code>headless</code> in playwright/puppeteer launch options\n        </Toggle>\n        <Toggle v-model=\"options.code.waitForNavigation\">\n          Add <code>waitForNavigation</code> lines on navigation\n        </Toggle>\n        <Toggle v-model=\"options.code.waitForSelectorOnClick\">\n          Add <code>waitForSelector</code> lines before every\n          <code>page.click()</code>\n        </Toggle>\n        <Toggle v-model=\"options.code.blankLinesBetweenBlocks\">\n          Add blank lines between code blocks\n        </Toggle>\n        <Toggle v-model=\"options.code.showPlaywrightFirst\">\n          Show Playwright tab first\n        </Toggle>\n      </section>\n\n      <section>\n        <h2 class=\"\">Extension</h2>\n        <Toggle v-model=\"options.extension.darkMode\">\n          Use Dark Mode {{ options.extension.darkMode }}\n        </Toggle>\n        <Toggle v-model=\"options.extension.telemetry\">\n          Allow recording of usage telemetry\n        </Toggle>\n        <p>\n          We only record clicks for basic product development, no website content or input data.\n          Data is never, ever shared with 3rd parties.\n        </p>\n      </section>\n    </div>\n  </main>\n</template>\n\n<script>\nimport { version } from '../../package.json'\n\nimport storage from '@/services/storage'\nimport { isDarkMode } from '@/services/constants'\nimport { defaults as code } from '@/modules/code-generator/base-generator'\nimport { merge } from 'lodash'\n\nimport Button from '@/components/Button'\nimport Toggle from '@/components/Toggle'\n\nconst defaultOptions = {\n  code,\n  extension: {\n    telemetry: true,\n    darkMode: isDarkMode(),\n  },\n}\n\nexport default {\n  name: 'OptionsApp',\n  components: { Toggle, Button },\n\n  data() {\n    return {\n      version,\n      loading: true,\n      saving: false,\n      options: defaultOptions,\n      recordingKeyCodePress: false,\n    }\n  },\n\n  watch: {\n    options: {\n      handler() {\n        this.save()\n      },\n      deep: true,\n    },\n\n    'options.extension.darkMode': {\n      handler(newVal) {\n        document.body.classList[newVal ? 'add' : 'remove']('dark')\n      },\n      immediate: true,\n    },\n  },\n\n  mounted() {\n    this.load()\n    chrome.storage.onChanged.addListener(({ options = null }) => {\n      if (options && options.newValue.extension.darkMode !== this.options.extension.darkMode) {\n        this.options.extension.darkMode = options.newValue.extension.darkMode\n      }\n    })\n  },\n\n  methods: {\n    async save() {\n      this.saving = true\n      await storage.set({ options: this.options })\n\n      setTimeout(() => (this.saving = false), 500)\n    },\n\n    async load() {\n      const { options } = await storage.get('options')\n      merge(defaultOptions, options)\n      this.options = Object.assign({}, this.options, defaultOptions)\n\n      this.loading = false\n    },\n\n    listenForKeyCodePress() {\n      this.recordingKeyCodePress = true\n\n      const keyDownFunction = e => {\n        this.recordingKeyCodePress = false\n        this.updateKeyCodeWithNumber(e)\n        window.removeEventListener('keydown', keyDownFunction, false)\n        e.preventDefault()\n      }\n\n      window.addEventListener('keydown', keyDownFunction, false)\n    },\n\n    updateKeyCodeWithNumber(evt) {\n      this.options.code.keyCode = parseInt(evt.keyCode, 10)\n      this.save()\n    },\n  },\n}\n</script>\n\n<style scoped>\nbody {\n  background: #f9fafc;\n  height: 100vh;\n}\n\nbody.dark {\n  background: #161616;\n}\n\ncode {\n  @apply font-semibold;\n}\n\na {\n  @apply text-blue underline text-sm text-right;\n}\n\nh2 {\n  @apply text-gray-darkish text-xl font-semibold mb-5 dark:text-gray-light;\n}\n\nlabel {\n  color: #000;\n  @apply font-semibold text-sm mb-2 block dark:text-gray-lightest;\n}\n\nsection {\n  @apply bg-white border-gray-light border border-solid rounded-md p-4 pb-10 mb-6 dark:bg-black-shady dark:border-gray-dark;\n}\n\np {\n  @apply text-gray-darkish text-xs mb-2 dark:text-white;\n}\n</style>\n"
  },
  {
    "path": "src/options/__tests__/App.spec.js",
    "content": "import { mount } from '@vue/test-utils'\nimport App from '../OptionsApp'\n\nfunction createChromeLocalStorageMock(options) {\n  let ops = options || {}\n  return {\n    options,\n    storage: {\n      local: {\n        get: (key, cb) => {\n          return cb(ops)\n        },\n        set: (options, cb) => {\n          ops = options\n          cb()\n        },\n      },\n    },\n  }\n}\n\ndescribe('App.vue', () => {\n  beforeEach(() => {\n    window.chrome = null\n  })\n\n  test('it has the correct pristine / empty state', () => {\n    window.chrome = createChromeLocalStorageMock()\n    const wrapper = mount(App)\n    expect(wrapper.element).toMatchSnapshot()\n  })\n\n  test('it loads the default options', () => {\n    window.chrome = createChromeLocalStorageMock()\n    const wrapper = mount(App)\n    expect(wrapper.vm.$data.options.code.wrapAsync).toBeTruthy()\n  })\n\n  test('it has the default key code for capturing inputs as 9 (Tab)', () => {\n    window.chrome = createChromeLocalStorageMock()\n    const wrapper = mount(App)\n    expect(wrapper.vm.$data.options.code.keyCode).toBe(9)\n  })\n\n  test('clicking the button will listen for the next keydown and update the key code option', () => {\n    const options = { code: { keyCode: 9 } }\n    window.chrome = createChromeLocalStorageMock(options)\n    const wrapper = mount(App)\n\n    return wrapper.vm\n      .$nextTick()\n      .then(() => {\n        wrapper.find('button').element.click()\n        const event = new KeyboardEvent('keydown', { keyCode: 16 })\n        window.dispatchEvent(event)\n        return wrapper.vm.$nextTick()\n      })\n      .then(() => {\n        expect(wrapper.vm.$data.options.code.keyCode).toBe(16)\n      })\n  })\n\n  test(\"it stores and loads the user's edited options\", () => {\n    const options = { code: { wrapAsync: true } }\n    window.chrome = createChromeLocalStorageMock(options)\n    const wrapper = mount(App)\n\n    return wrapper.vm\n      .$nextTick()\n      .then(() => {\n        const checkBox = wrapper.find('#options-code-wrapAsync')\n        checkBox.trigger('click')\n        expect(wrapper.find('.saving-badge').text()).toEqual('Saving...')\n        return wrapper.vm.$nextTick()\n      })\n      .then(() => {\n        // we need to simulate a page reload\n        wrapper.vm.load()\n        return wrapper.vm.$nextTick()\n      })\n      .then(() => {\n        const checkBox = wrapper.find('#options-code-wrapAsync')\n        return expect(checkBox.element.checked).toBeFalsy()\n      })\n  })\n})\n"
  },
  {
    "path": "src/options/__tests__/__snapshots__/App.spec.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`App.vue it has the correct pristine / empty state 1`] = `\n<div\n  class=\"options\"\n>\n  <div\n    class=\"container\"\n  >\n    <div\n      class=\"header\"\n    >\n       Headless Recorder Options \n      <small\n        class=\"saving-badge text-muted\"\n        style=\"display: none;\"\n      >\n         Saving... \n      </small>\n    </div>\n    <!--v-if-->\n    <div\n      class=\"footer\"\n    >\n       sponsored by \n      <a\n        href=\"https://checklyhq.com\"\n        target=\"_blank\"\n      >\n        <img\n          alt=\"\"\n          src=\"\"\n        />\n      </a>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "src/options/main.js",
    "content": "import { createApp } from 'vue'\nimport App from './OptionsApp.vue'\n\nimport '@/assets/tailwind.css'\n\ncreateApp(App).mount('#app')\n"
  },
  {
    "path": "src/popup/PopupApp.vue",
    "content": "<template>\n  <div class=\"bg-gray-lightest dark:bg-black flex flex-col overflow-hidden\">\n    <Header @options=\"openOptions\" @help=\"goHelp\" @dark=\"toggleDarkMode\" />\n\n    <Home v-if=\"!showResultsTab && !isRecording\" @start=\"toggleRecord\" />\n\n    <Recording\n      @stop=\"toggleRecord\"\n      @pause=\"togglePause\"\n      @restart=\"restart(true)\"\n      :is-recording=\"isRecording\"\n      :is-paused=\"isPaused\"\n      :dark-mode=\"options?.extension?.darkMode\"\n      v-show=\"!showResultsTab && isRecording\"\n    />\n\n    <Results\n      :puppeteer=\"code\"\n      :playwright=\"codeForPlaywright\"\n      :options=\"options\"\n      v-if=\"showResultsTab\"\n      v-on:update:tab=\"currentResultTab = $event\"\n    />\n\n    <!-- TODO: Move this into its own component -->\n    <div\n      data-test-id=\"results-footer\"\n      class=\"flex py-2 px-3 justify-between bg-black-shady\"\n      v-show=\"showResultsTab\"\n    >\n      <Button dark class=\"mr-2\" @click=\"restart\" v-show=\"code\">\n        <img src=\"/icons/dark/sync.svg\" class=\"mr-1\" alt=\"restart recording\" />\n        Restart\n      </Button>\n      <Button dark class=\"mr-2 w-34\" @click=\"copyCode\" v-show=\"code\">\n        <img\n          v-show=\"!isCopying\"\n          src=\"/icons/dark/duplicate.svg\"\n          class=\"mr-1\"\n          alt=\"copy code to clipboard\"\n        />\n        <span v-show=\"!isCopying\">Copy to clipboard</span>\n        <span v-show=\"isCopying\">Copied!</span>\n      </Button>\n      <Button @click=\"run\" v-show=\"code\">\n        <img src=\"/icons/light/zap.svg\" class=\"mr-1\" alt=\"thunder\" />\n        Run on Checkly\n      </Button>\n    </div>\n\n    <Footer v-if=\"!isRecording && !showResultsTab\" />\n  </div>\n</template>\n\n<script>\nimport browser from '@/services/browser'\nimport storage from '@/services/storage'\nimport analytics from '@/services/analytics'\nimport { popupActions, isDarkMode } from '@/services/constants'\n\nimport CodeGenerator from '@/modules/code-generator'\n\nimport Home from '@/views/Home.vue'\nimport Results from '@/views/Results.vue'\nimport Recording from '@/views/Recording.vue'\n\nimport Button from '@/components/Button.vue'\nimport Footer from '@/components/Footer.vue'\nimport Header from '@/components/Header.vue'\n\nlet bus\n\nconst defaultOptions = {\n  extension: {\n    darkMode: isDarkMode(),\n  },\n  code: {},\n}\n\nexport default {\n  name: 'PopupApp',\n  components: {\n    Results,\n    Recording,\n    Home,\n    Header,\n    Footer,\n    Button,\n  },\n\n  data() {\n    return {\n      isLoggedIn: false,\n      showResultsTab: false,\n      isRecording: false,\n      isPaused: false,\n      isCopying: false,\n      currentResultTab: null,\n\n      liveEvents: [],\n      recording: [],\n\n      code: '',\n      codeForPlaywright: '',\n      options: defaultOptions,\n    }\n  },\n\n  watch: {\n    'options.extension.darkMode': {\n      handler(newVal) {\n        document.body.classList[newVal ? 'add' : 'remove']('dark')\n      },\n      immediate: true,\n    },\n  },\n\n  async mounted() {\n    this.loadState()\n    bus = browser.getBackgroundBus()\n    this.isLoggedIn = await browser.getChecklyCookie()\n  },\n\n  methods: {\n    toggleRecord(close = true) {\n      if (this.isRecording) {\n        this.stop()\n      } else {\n        close && window.close()\n        this.start()\n      }\n\n      this.isRecording = !this.isRecording\n      this.storeState()\n    },\n\n    togglePause(stop = false) {\n      bus.postMessage({ action: this.isPaused ? popupActions.UN_PAUSE : popupActions.PAUSE, stop })\n      this.isPaused = !this.isPaused\n\n      this.storeState()\n    },\n\n    start() {\n      analytics.trackEvent({ options: this.options, event: 'Start' })\n      this.cleanUp()\n      bus.postMessage({ action: popupActions.START })\n    },\n\n    async stop() {\n      analytics.trackEvent({ options: this.options, event: 'Stop' })\n      bus.postMessage({ action: popupActions.STOP })\n\n      await this.generateCode()\n      this.storeState()\n    },\n\n    restart(stop = false) {\n      this.cleanUp()\n      bus.postMessage({ action: popupActions.CLEAN_UP, value: stop })\n    },\n\n    cleanUp() {\n      this.recording = this.liveEvents = []\n      this.code = ''\n      this.codeForPlaywright = ''\n      this.showResultsTab = this.isRecording = this.isPaused = false\n      this.storeState()\n    },\n\n    async generateCode() {\n      const { recording, options = { code: {} } } = await storage.get(['recording', 'options'])\n      const generator = new CodeGenerator(options.code)\n      const { puppeteer, playwright } = generator.generate(recording)\n\n      this.recording = recording\n      this.code = puppeteer\n      this.codeForPlaywright = playwright\n      this.showResultsTab = true\n    },\n\n    openOptions() {\n      analytics.trackEvent({ options: this.options, event: 'Options' })\n      browser.openOptionsPage()\n    },\n\n    async loadState() {\n      const {\n        controls = {},\n        code = '',\n        options,\n        codeForPlaywright = '',\n        recording,\n        clear,\n        pause,\n        restart,\n      } = await storage.get([\n        'controls',\n        'code',\n        'options',\n        'codeForPlaywright',\n        'recording',\n        'clear',\n        'pause',\n        'restart',\n      ])\n\n      this.isRecording = controls.isRecording\n      this.isPaused = controls.isPaused\n      this.options = options || defaultOptions\n\n      this.code = code\n      this.codeForPlaywright = codeForPlaywright\n\n      if (this.isRecording) {\n        this.liveEvents = recording\n\n        if (clear) {\n          this.toggleRecord()\n          storage.remove(['clear'])\n        }\n\n        if (pause) {\n          this.togglePause(true)\n          storage.remove(['pause'])\n        }\n\n        if (restart) {\n          this.cleanUp()\n          this.toggleRecord(false)\n          storage.remove(['restart'])\n        }\n      } else if (this.code) {\n        this.generateCode()\n      }\n    },\n\n    storeState() {\n      storage.set({\n        code: this.code,\n        codeForPlaywright: this.codeForPlaywright,\n        controls: { isRecording: this.isRecording, isPaused: this.isPaused },\n      })\n    },\n\n    async copyCode() {\n      this.isCopying = true\n      await browser.copyToClipboard(this.getCode())\n      setTimeout(() => (this.isCopying = false), 500)\n    },\n\n    goHelp() {\n      browser.openHelpPage()\n    },\n\n    toggleDarkMode() {\n      this.options.extension.darkMode = !this.options.extension.darkMode\n      storage.set({ options: this.options })\n    },\n\n    getCode() {\n      return this.currentResultTab === 'puppeteer' ? this.code : this.codeForPlaywright\n    },\n\n    run() {\n      browser.openChecklyRunner({\n        code: this.getCode(),\n        runner: this.currentResultTab,\n        isLoggedIn: this.isLoggedIn,\n      })\n    },\n  },\n}\n</script>\n\n<style>\nhtml {\n  width: 386px;\n  height: 535px;\n}\n\nbutton:focus-visible {\n  outline: none;\n  box-shadow: 0 0 2px 2px #51a7e8;\n}\n\nbutton:focus {\n  outline: 0;\n}\n</style>\n"
  },
  {
    "path": "src/popup/__tests__/App.spec.js",
    "content": "import { shallowMount } from '@vue/test-utils'\nimport App from '../PopupApp'\n\nconst chrome = {\n  storage: {\n    local: {\n      get: jest.fn(),\n    },\n  },\n  extension: {\n    connect: jest.fn(),\n  },\n}\n\ndescribe('App.vue', () => {\n  test('it has the correct pristine / empty state', () => {\n    window.chrome = chrome\n    const wrapper = shallowMount(App)\n    expect(wrapper.element).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/popup/__tests__/__snapshots__/App.spec.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`App.vue it has the correct pristine / empty state 1`] = `\n<div\n  class=\"recorder\"\n  id=\"headless-recorder\"\n>\n  <div\n    class=\"header\"\n  >\n    <a\n      href=\"#\"\n    >\n       Headless recorder \n      <span\n        class=\"text-muted\"\n      >\n        <small>\n          1.0.0\n        </small>\n      </span>\n    </a>\n    <div\n      class=\"left\"\n    >\n      <div\n        class=\"recording-badge\"\n        style=\"display: none;\"\n      >\n        <span\n          class=\"red-dot\"\n        />\n         recording\n      </div>\n      <button\n        class=\"header-button\"\n      >\n        <img\n          alt=\"help\"\n          src=\"\"\n        />\n      </button>\n      <button\n        class=\"header-button\"\n      >\n        <img\n          alt=\"settings\"\n          src=\"\"\n        />\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"main\"\n  >\n    <div\n      class=\"tabs\"\n    >\n      <recording-tab-stub\n        code=\"\"\n        is-recording=\"false\"\n        live-events=\"\"\n      />\n      <div\n        class=\"recording-footer\"\n      >\n        <button\n          class=\"btn btn-sm btn-primary\"\n        >\n          Record\n        </button>\n        <button\n          class=\"btn btn-sm btn-primary btn-outline-primary\"\n          style=\"display: none;\"\n        >\n          Pause\n        </button>\n        <a\n          href=\"#\"\n          style=\"display: none;\"\n        >\n          view code\n        </a>\n        <checkly-badge-stub />\n      </div>\n      <!--v-if-->\n      <div\n        class=\"results-footer\"\n        style=\"display: none;\"\n      >\n        <button\n          class=\"btn btn-sm btn-primary\"\n          style=\"display: none;\"\n        >\n           Restart \n        </button>\n        <a\n          href=\"#\"\n          style=\"display: none;\"\n        >\n          copy to clipboard\n        </a>\n      </div>\n    </div>\n    <help-tab-stub\n      style=\"display: none;\"\n    />\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "src/popup/main.js",
    "content": "import { createApp } from 'vue'\nimport VueHighlightJS from 'vue3-highlightjs'\n\nimport '@/assets/code.css'\nimport '@/assets/tailwind.css'\n\nimport App from './PopupApp.vue'\n\ncreateApp(App)\n  .use(VueHighlightJS)\n  .mount('#app')\n"
  },
  {
    "path": "src/services/__tests__/analytics.spec.js",
    "content": "import analytics from '../analytics'\n\nObject.defineProperty(window, '_gaq', {\n  writable: true,\n  value: {\n    push: jest.fn(),\n  },\n})\n\ndescribe('trackPageView', () => {\n  beforeEach(() => {\n    window._gaq.push.mockClear()\n  })\n\n  it('has telemetry enabled', () => {\n    const options = {\n      extension: {\n        telemetry: true,\n      },\n    }\n\n    analytics.trackPageView(options)\n    expect(window._gaq.push.mock.calls.length).toBe(1)\n  })\n\n  it('does not have telemetry enabled', () => {\n    const options = {\n      extension: {\n        telemetry: false,\n      },\n    }\n\n    analytics.trackPageView(options)\n    expect(window._gaq.push.mock.calls.length).toBe(0)\n  })\n})"
  },
  {
    "path": "src/services/__tests__/badge.spec.js",
    "content": "import badge from '../badge'\n\nglobal.chrome = {\n  browserAction: {\n    setIcon: jest.fn(),\n    setBadgeText: jest.fn(text => (inputText.data = text)),\n    setBadgeBackgroundColor: jest.fn(),\n  },\n}\n\nconst inputText = {\n  data: '',\n}\n\nbeforeEach(() => {\n  chrome.browserAction.setIcon.mockClear()\n  chrome.browserAction.setBadgeBackgroundColor.mockClear()\n})\n\ndescribe('start', () => {\n  it('sets recording icon', () => {\n    badge.start()\n    expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('pause', () => {\n  it('sets pause icon', () => {\n    badge.pause()\n    expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('setText', () => {\n  it('sets selected text on the badge', () => {\n    badge.setText('data')\n    expect(inputText.data.text).toBe('data')\n  })\n})\n\ndescribe('reset', () => {\n  it('reset text to empty string', () => {\n    badge.reset()\n    badge.setText('')\n    expect(inputText.data.text).toBe('')\n  })\n})\n\ndescribe('wait', () => {\n  it('changes text to wait', () => {\n    badge.wait()\n    badge.setText('wait')\n    expect(chrome.browserAction.setBadgeBackgroundColor.mock.calls.length).toBe(1)\n    expect(inputText.data.text).toBe('wait')\n  })\n})\n\ndescribe('stop', () => {\n  it('stops recording and sets result text', () => {\n    badge.stop('data')\n    expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)\n    expect(chrome.browserAction.setBadgeBackgroundColor.mock.calls.length).toBe(1)\n    expect(inputText.data.text).toBe('data')\n  })\n})\n"
  },
  {
    "path": "src/services/__tests__/browser.spec.js",
    "content": "import browser from '../browser'\n\nconst activeTab = { id: 1, active: true }\n\nconst copyText = {\n  data: '',\n}\n\nconst cookies = [\n    {\n      name: 'checkly'\n    }\n  ]\n\n\nwindow.chrome = {\n  tabs: {\n    create: jest.fn(),\n    query: jest.fn((options, cb) => (cb([activeTab]))),\n    executeScript: jest.fn((options, cb) => (cb(options))),\n    sendMessage: jest.fn(),\n  },\n  extension: {\n    connect: jest.fn(),\n  },\n  runtime: {\n    openOptionsPage: jest.fn()\n  },\n  cookies: {\n    getAll: jest.fn((options, cb) => (cb(cookies)))\n}}\n\nglobal.navigator.permissions = {\n  query: jest\n    .fn()\n    .mockImplementationOnce(() => Promise.resolve({ state: 'granted' })),\n};\n\nglobal.navigator.clipboard = {\n  writeText: jest.fn(text => (copyText.data = text))\n};\n\nbeforeEach(() => {\n  window?.chrome?.tabs.create.mockClear()\n  window?.chrome?.extension.connect.mockClear()\n  window?.chrome?.runtime.openOptionsPage.mockClear()\n  window?.chrome?.tabs.query.mockClear()\n})\n\ndescribe('getActiveTab', () => {\n  it('returns the active tab', async () => {\n    const activeTab = await browser.getActiveTab()\n    expect(activeTab).toBe(activeTab)\n    expect(window.chrome.tabs.query.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('copyToClipboard', () => {\n  it('copies text to clipboard', async () => {\n    await browser.copyToClipboard('data')\n    expect(window.navigator.clipboard.writeText.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('injectContentScript', () => {\n  it('executes content script', async () => {\n    await browser.injectContentScript()\n    expect(window.chrome.tabs.executeScript.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('getChecklyCookie', () => {\n  it('returns checkly cookie', async () => {\n    await browser.getChecklyCookie()\n    expect(window.chrome.cookies.getAll.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('openChecklyRunner', () => {\n  it('is not logged in', () => {\n    browser.openChecklyRunner({code: 1, runner: 2, isLoggedIn: false})\n    expect(window.chrome.tabs.create.mock.calls.length).toBe(1)\n  })\n\n  it('is logged in', () => {\n    browser.openChecklyRunner({code: 1, runner: 2, isLoggedIn: true})\n    expect(window.chrome.tabs.create.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('getBackgroundBus', () => {\n  it('gets backgorund bus', async () => {\n    browser.getBackgroundBus()\n    expect(window.chrome.extension.connect.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('openOptionsPage', () => {\n  it('calls function that opens options page', async () => {\n    browser.openOptionsPage()\n    expect(window.chrome.runtime.openOptionsPage.mock.calls.length).toBe(1)\n  })\n})\n\ndescribe('openHelpPage', () => {\n  it('calls function that creates new tab and opens help page', async () => {\n    browser.openHelpPage()\n    expect(window.chrome.tabs.create.mock.calls.length).toBe(1)\n  })\n})\n\n\n"
  },
  {
    "path": "src/services/__tests__/constants.spec.js",
    "content": "import { isDarkMode } from '../constants'\n\nfunction setMatchMediaMock(matches) {\n  Object.defineProperty(window, 'matchMedia', {\n    writable: true,\n    value: jest.fn(() => ({ matches })),\n  })\n}\n\ndescribe('isDarkMode()', () => {\n  beforeEach(() => {\n    window?.matchMedia?.mockClear()\n  })\n\n  it('has darkMode enabled', () => {\n    setMatchMediaMock(true)\n    expect(isDarkMode()).toBe(true)\n  })\n\n  it('has darkMode disabled', () => {\n    setMatchMediaMock(false)\n    expect(isDarkMode()).toBe(false)\n  })\n\n  it('does not have matchMedia browser API', () => {\n    window.matchMedia = null\n    expect(isDarkMode()).toBe(false)\n  })\n})\n"
  },
  {
    "path": "src/services/__tests__/storage.spec.js",
    "content": "import storage from '../storage'\n\nconst store = {\n  token: 'xxx',\n  name: 'lionel',\n}\n\nbeforeEach(() => {\n  window.chrome = {\n    storage: {\n      local: {\n        get: jest.fn((keys, cb) => {\n          if (typeof keys === 'string') {\n            return cb(store[keys])\n          }\n  \n          const results = []\n          if (Array.isArray(keys)) {\n            keys.forEach(key => {\n              results.push(store[key])\n            })\n    \n            return cb(results)\n          }\n        }),\n        remove: jest.fn((keys, cb) => {\n            delete store[keys];\n            return cb(store)\n        }),\n        set: jest.fn((props, cb) => {\n          const newStore = { ...store, ...props }\n          return cb(newStore)\n      }),\n      },\n    },\n  }\n\n  window.chrome.storage.local.get.mockClear()\n  window.chrome.storage.local.set.mockClear()\n  window.chrome.storage.local.remove.mockClear()\n})\n\ndescribe('get', () => {\n  it('return a single value', async () => {\n    const token = await storage.get('token')\n    expect(token).toBe(store.token)\n    expect(window.chrome.storage.local.get.mock.calls.length).toBe(1)\n  })\n\n  it('return multiple values', async () => {\n    const [token, name] = await storage.get(['token', 'name'])\n    expect(token).toBe(store.token)\n    expect(name).toBe(store.name)\n    expect(window.chrome.storage.local.get.mock.calls.length).toBe(1)\n  })\n\n  it('return undefined when value not found', async () => {\n    const nothing = await storage.get('nothing')\n    expect(nothing).toBe(undefined)\n  })\n\n  it('does not have browser storage available', async () => {\n    try {\n      window.chrome.storage = null\n      await storage.get('token');\n    } catch (e) {\n      expect(e).toEqual('Browser storage not available');\n    }\n  })\n})\n\ndescribe('remove', () => {\n  it('removes a value', async () => {\n    const store = await storage.remove('token')\n    expect(store.token).toBe(undefined)\n    expect(window.chrome.storage.local.remove.mock.calls.length).toBe(1)\n  })\n\n  it('does not have browser storage available', async () => {\n    try {\n      window.chrome.storage = null\n      await storage.remove('token');\n    } catch (e) {\n      expect(e).toEqual('Browser storage not available');\n    }\n  })\n})\n\ndescribe('set', () => {\n  it('set a new value or values', async () => {\n    const newStore = await storage.set({age: 1, country: 2})\n    expect(newStore.age).toBe(1)\n    expect(newStore.country).toBe(2)\n    expect(window.chrome.storage.local.set.mock.calls.length).toBe(1)\n  })\n\n  it('does not have browser storage available', async () => {\n    try {\n      window.chrome.storage = null\n      await storage.set({age: 1, country: 2});\n    } catch (e) {\n      expect(e).toEqual('Browser storage not available');\n    }\n  })\n})\n"
  },
  {
    "path": "src/services/analytics.js",
    "content": "export default {\n  trackEvent({ event, options }) {\n    if (options?.extension?.telemetry) {\n      window?._gaq?.push(['_trackEvent', event, 'clicked'])\n    }\n  },\n\n  trackPageView(options) {\n    if (options?.extension?.telemetry) {\n      window?._gaq?.push(['_trackPageview'])\n    }\n  },\n}\n"
  },
  {
    "path": "src/services/badge.js",
    "content": "const DEFAULT_COLOR = '#45C8F1'\nconst RECORDING_COLOR = '#FF0000'\n\nconst DEFAULT_LOGO = './images/logo.png'\nconst RECORDING_LOGO = './images/logo-red.png'\nconst PAUSE_LOGO = './images/logo-yellow.png'\n\nexport default {\n  stop(text) {\n    chrome.browserAction.setIcon({ path: DEFAULT_LOGO })\n    chrome.browserAction.setBadgeBackgroundColor({ color: DEFAULT_COLOR })\n    this.setText(text)\n  },\n\n  reset() {\n    this.setText('')\n  },\n\n  setText(text) {\n    chrome.browserAction.setBadgeText({ text })\n  },\n\n  pause() {\n    chrome.browserAction.setIcon({ path: PAUSE_LOGO })\n  },\n\n  start() {\n    chrome.browserAction.setIcon({ path: RECORDING_LOGO })\n  },\n\n  wait() {\n    chrome.browserAction.setBadgeBackgroundColor({ color: RECORDING_COLOR })\n    this.setText('wait')\n  },\n}\n"
  },
  {
    "path": "src/services/browser.js",
    "content": "const CONTENT_SCRIPT_PATH = 'js/content-script.js'\nconst RUN_URL = 'https://app.checklyhq.com/checks/new/browser'\nconst DOCS_URL = 'https://www.checklyhq.com/docs/headless-recorder'\nconst SIGNUP_URL =\n  'https://www.checklyhq.com/product/synthetic-monitoring/?utm_source=Chrome+Extension&utm_medium=Headless+Recorder+Chrome+Extension&utm_campaign=Headless+Recorder&utm_id=Open+Source'\n\nexport default {\n  getActiveTab() {\n    return new Promise(function(resolve) {\n      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => resolve(tab))\n    })\n  },\n\n  async sendTabMessage({ action, value, clean } = {}) {\n    const tab = await this.getActiveTab()\n    chrome.tabs.sendMessage(tab.id, { action, value, clean })\n  },\n\n  injectContentScript() {\n    return new Promise(function(resolve) {\n      chrome.tabs.executeScript({ file: CONTENT_SCRIPT_PATH, allFrames: false }, res =>\n        resolve(res)\n      )\n    })\n  },\n\n  copyToClipboard(text) {\n    return navigator.permissions.query({ name: 'clipboard-write' })\n      .then(result => {\n      if (result.state !== 'granted' && result.state !== 'prompt') {\n        return Promise.reject()\n      }\n\n      navigator.clipboard.writeText(text)\n    })\n  },\n\n  getChecklyCookie() {\n    return new Promise(function(resolve) {\n      chrome.cookies.getAll({}, res =>\n        resolve(res.find(cookie => cookie.name.startsWith('checkly_has_account')))\n      )\n    })\n  },\n\n  getBackgroundBus() {\n    return chrome.extension.connect({ name: 'recordControls' })\n  },\n\n  openOptionsPage() {\n    chrome.runtime.openOptionsPage?.()\n  },\n\n  openHelpPage() {\n    chrome.tabs.create({ url: DOCS_URL })\n  },\n\n  openChecklyRunner({ code, runner, isLoggedIn }) {\n    if (!isLoggedIn) {\n      chrome.tabs.create({ url: SIGNUP_URL })\n      return\n    }\n\n    const script = encodeURIComponent(btoa(code))\n    const url = `${RUN_URL}?framework=${runner}&script=${script}`\n    chrome.tabs.create({ url })\n  },\n}\n"
  },
  {
    "path": "src/services/constants.js",
    "content": "export const recordingControls = {\n  EVENT_RECORDER_STARTED: 'EVENT_RECORDER_STARTED',\n  GET_VIEWPORT_SIZE: 'GET_VIEWPORT_SIZE',\n  GET_CURRENT_URL: 'GET_CURRENT_URL',\n  GET_SCREENSHOT: 'GET_SCREENSHOT',\n}\n\nexport const popupActions = {\n  START: 'START',\n  STOP: 'STOP',\n  CLEAN_UP: 'CLEAN_UP',\n  PAUSE: 'PAUSE',\n  UN_PAUSE: 'UN_PAUSE',\n}\n\nexport const isDarkMode = () =>\n  window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false\n"
  },
  {
    "path": "src/services/selector.js",
    "content": "import { finder } from '@medv/finder/finder.js'\n\nexport default function selector(e, { dataAttribute } = {}) {\n  if (dataAttribute && e.target.getAttribute(dataAttribute)) {\n    return `[${dataAttribute}=\"${e.target.getAttribute(dataAttribute)}\"]`\n  }\n\n  if (e.target.id) {\n    return `#${e.target.id}`\n  }\n\n  return finder(e.target, {\n    seedMinLength: 5,\n    optimizedMinLength: e.target.id ? 2 : 10,\n    attr: name => name === dataAttribute,\n  })\n}\n"
  },
  {
    "path": "src/services/storage.js",
    "content": "export default {\n  get(keys) {\n    if (!chrome.storage || !chrome.storage.local) {\n      return Promise.reject('Browser storage not available')\n    }\n\n    return new Promise(resolve => chrome.storage.local.get(keys, props => resolve(props)))\n  },\n\n  set(props) {\n    if (!chrome.storage || !chrome.storage.local) {\n      return Promise.reject('Browser storage not available')\n    }\n\n    return new Promise(resolve => chrome.storage.local.set(props, res => resolve(res)))\n  },\n\n  remove(keys) {\n    if (!chrome.storage || !chrome.storage.local) {\n      return Promise.reject('Browser storage not available')\n    }\n\n    return new Promise(resolve => chrome.storage.local.remove(keys, res => resolve(res)))\n  },\n}\n"
  },
  {
    "path": "src/store/index.js",
    "content": "import { createStore } from 'vuex'\n\nimport { overlayActions } from '@/modules/overlay/constants'\n\nfunction clearState(state) {\n  state.isClosed = false\n  state.isPaused = false\n  state.isStopped = false\n  state.screenshotMode = false\n  state.screenshotClippedMode = false\n\n  state.recording = []\n}\n\nconst store = createStore({\n  state() {\n    return {\n      isCopying: false,\n      isClosed: false,\n      isPaused: false,\n      isStopped: false,\n      darkMode: false,\n      screenshotMode: false,\n      screenshotClippedMode: false,\n      hasRecorded: false,\n\n      dataAttribute: '',\n      takeScreenshot: false,\n\n      recording: [],\n    }\n  },\n\n  mutations: {\n    showRecorded(state) {\n      state.hasRecorded = true\n      setTimeout(() => (state.hasRecorded = false), 250)\n    },\n\n    showCopy(state) {\n      state.isCopying = true\n      setTimeout(() => (state.isCopying = false), 500)\n    },\n\n    takeScreenshot(state) {\n      state.takeScreenshot = true\n    },\n\n    setDataAttribute(state, dataAttribute) {\n      state.dataAttribute = dataAttribute\n    },\n\n    setDarkMode(state, darkMode) {\n      state.darkMode = darkMode\n    },\n\n    setRecording(state, recording) {\n      state.recording = recording\n    },\n\n    unpause(state) {\n      state.isPaused = false\n      chrome.runtime.sendMessage({ control: overlayActions.UNPAUSE })\n    },\n\n    pause(state) {\n      state.isPaused = true\n      chrome.runtime.sendMessage({ control: overlayActions.PAUSE })\n    },\n\n    close(state) {\n      state.isClosed = true\n      chrome.runtime.sendMessage({ control: overlayActions.CLOSE })\n    },\n\n    restart(state) {\n      clearState(state)\n      chrome.runtime.sendMessage({ control: overlayActions.RESTART })\n    },\n\n    clear(state) {\n      clearState(state)\n    },\n\n    stop(state) {\n      state.isStopped = true\n      chrome.runtime.sendMessage({ control: overlayActions.STOP })\n    },\n\n    copy() {\n      chrome.runtime.sendMessage({ control: overlayActions.COPY })\n    },\n\n    toggleScreenshotMode(state) {\n      state.screenshotMode = !state.screenshotMode\n    },\n\n    startScreenshotMode(state, isClipped = false) {\n      chrome.runtime.sendMessage({\n        control: isClipped ? overlayActions.CLIPPED_SCREENSHOT : overlayActions.FULL_SCREENSHOT,\n      })\n\n      state.screenshotClippedMode = isClipped\n      state.screenshotMode = true\n    },\n\n    stopScreenshotMode(state) {\n      state.screenshotMode = false\n    },\n  },\n})\n\n// TODO: load state from local storage\nchrome.storage.onChanged.addListener(({ options = null, recording = null }) => {\n  if (options) {\n    store.commit('setDarkMode', options.newValue.extension.darkMode)\n  }\n\n  if (recording) {\n    store.commit('setRecording', recording.newValue)\n  }\n})\n\nexport default store\n"
  },
  {
    "path": "src/views/Home.vue",
    "content": "<template>\n  <div class=\"flex flex-col items-center rounded-md pt-10 h-100\">\n    <h3 class=\"text-gray-darkest text-xl font-semibold mb-3 dark:text-gray-lightest\">\n      No recorded events yet\n    </h3>\n    <p class=\"text-gray-dark text-xs mb-5 text-center w-44 dark:text-gray-light\">\n      Record browser events by clicking record button\n    </p>\n    <RoundButton :small=\"false\" @click=\"$emit('start')\" class=\"p-10 mt-12\">\n      <div class=\"bg-red w-21 h-21 rounded-full\"></div>\n    </RoundButton>\n  </div>\n</template>\n\n<script>\nimport RoundButton from '@/components/RoundButton'\n\nexport default {\n  components: { RoundButton },\n}\n</script>\n"
  },
  {
    "path": "src/views/Recording.vue",
    "content": "<template>\n  <section class=\"flex flex-col items-center rounded-md pt-8 h-full\">\n    <RecordingLabel class=\"w-1/3\" :is-paused=\"isPaused\" :v-show=\"isRecording\" />\n    <p class=\"text-gray-dark text-sm text-center w-72 dark:text-gray-light\">\n      Headless recorder currently recording your browser events.\n    </p>\n    <RoundButton big @click=\"$emit('stop')\" class=\"p-12 mt-10\">\n      <div class=\"bg-gray-darkest rounded h-16 w-16 dark:bg-white\"></div>\n    </RoundButton>\n\n    <div class=\"flex mt-13 mb-8 items-center justify-center\">\n      <div class=\"flex flex-col items-center justify-center mr-10\">\n        <RoundButton\n          medium\n          @click=\"$emit('pause')\"\n          class=\"flex flex-col items-center justify-center\"\n        >\n          <img\n            :src=\"`/icons/${darkMode ? 'dark' : 'light'}/play.svg`\"\n            v-show=\"isPaused\"\n            class=\"w-10 h-10\"\n            alt=\"resume recording\"\n          />\n          <img\n            :src=\"`/icons/${darkMode ? 'dark' : 'light'}/pause.svg`\"\n            v-show=\"!isPaused\"\n            class=\"w-10 h-10\"\n            alt=\"pause recording\"\n          />\n        </RoundButton>\n        <span class=\"mt-2 text-sm font-semibold text-gray-new\">{{\n          isPaused ? 'RESUME' : 'PAUSE'\n        }}</span>\n      </div>\n      <div class=\"flex flex-col items-center justify-center\">\n        <RoundButton\n          medium\n          @click=\"$emit('restart')\"\n          class=\"flex flex-col items-center justify-center\"\n        >\n          <img\n            :src=\"`/icons/${darkMode ? 'dark' : 'light'}/sync.svg`\"\n            class=\"w-10 h-10\"\n            alt=\"restart recording\"\n          />\n        </RoundButton>\n        <span class=\"mt-2 text-sm font-semibold text-gray-new\">RESTART</span>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nimport RoundButton from '@/components/RoundButton'\nimport RecordingLabel from '@/components/RecordingLabel'\n\nexport default {\n  components: { RoundButton, RecordingLabel },\n\n  props: {\n    darkMode: { type: Boolean, default: false },\n    isRecording: { type: Boolean, default: false },\n    isPaused: { type: Boolean, default: false },\n  },\n}\n</script>\n"
  },
  {
    "path": "src/views/Results.vue",
    "content": "<template>\n  <div\n    data-test-id=\"results-tab\"\n    class=\"flex flex-col bg-blue-light overflow-hidden mt-4 h-100 dark:bg-black\"\n  >\n    <div class=\"flex flex-row\">\n      <button\n        v-for=\"tab in tabs\"\n        :key=\"tab\"\n        class=\"w-1/2 p-2 font-semibold text-xs capitalize rounded-t\"\n        :class=\"\n          activeTab === tab\n            ? 'bg-black text-gray-lightest dark:bg-black-shady'\n            : 'text-gray-dark dark:text-gray'\n        \"\n        @click.prevent=\"changeTab(tab)\"\n      >\n        {{ tab }}\n      </button>\n    </div>\n\n    <div class=\"sc p-2 bg-black dark:bg-black-shady\">\n      <pre\n        v-if=\"code\"\n        v-highlightjs=\"code\"\n        class=\"overflow-auto bg-black dark:bg-black-shady h-100\"\n      >\n      <code ref=\"code\" class=\"javascript bg-black dark:bg-black-shady px-2 break-word whitespace-pre-wrap overflow-x-hidden\"></code>\n      </pre>\n      <pre v-else>\n        <code>No code yet...</code>\n      </pre>\n    </div>\n  </div>\n</template>\n<script>\nimport { headlessTypes } from '@/modules/code-generator/constants'\n\nexport default {\n  name: 'ResultsTab',\n\n  props: {\n    puppeteer: {\n      type: String,\n      default: '',\n    },\n    playwright: {\n      type: String,\n      default: '',\n    },\n    options: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data() {\n    return {\n      activeTab: headlessTypes.PLAYWRIGHT,\n      tabs: [headlessTypes.PLAYWRIGHT, headlessTypes.PUPPETEER],\n    }\n  },\n\n  computed: {\n    code() {\n      return this.activeTab === headlessTypes.PUPPETEER ? this.puppeteer : this.playwright\n    },\n  },\n\n  mounted() {\n    if (!this.options?.code?.showPlaywrightFirst) {\n      this.activeTab = headlessTypes.PUPPETEER\n      this.tabs = this.tabs.reverse()\n    }\n\n    this.$emit('update:tab', this.activeTab)\n  },\n\n  methods: {\n    changeTab(tab) {\n      this.activeTab = tab\n      this.$emit('update:tab', tab)\n    },\n  },\n}\n</script>\n\n<style scoped>\npre::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n  margin-right: 10px;\n  padding: 10px;\n  background: transparent;\n}\n\npre::-webkit-scrollbar-thumb {\n  margin-right: 10px;\n  padding: 10px;\n  background: #e0e6ed;\n  border-radius: 0.5rem;\n}\n\npre::-webkit-scrollbar-corner {\n  background: yellow;\n}\n</style>\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "const colors = require('tailwindcss/colors')\n\nmodule.exports = {\n  purge: { content: ['./public/**/*.html', './src/**/*.vue'] },\n  presets: [],\n  darkMode: 'class', // or 'media' or 'class'\n  theme: {\n    screens: {\n      sm: '640px',\n      md: '768px',\n      lg: '1024px',\n      xl: '1280px',\n      '2xl': '1536px',\n    },\n    colors: {\n      transparent: 'transparent',\n      current: 'currentColor',\n\n      gray: {\n        hover: '#474747',\n        lightest: '#F9FAFC',\n        lighter: '#EFF2F7',\n        light: '#E0E6ED',\n        DEFAULT: '#8492A6',\n        dark: '#3C4858',\n        darkish: '#677281',\n        darkest: '#1F2D3D',\n        new: '#697280',\n      },\n\n      blue: {\n        lightest: '#EEF8FF',\n        light: '#F0F8FF',\n        DEFAULT: '#45C8F1',\n        dark: '#18c2f8',\n      },\n\n      red: {\n        DEFAULT: '#FF4949',\n      },\n\n      pink: {\n        DEFAULT: '#FF659D',\n      },\n\n      black: {\n        light: '#2E2E2E',\n        dark: '#000',\n        DEFAULT: '#161616',\n        shady: '#1F1F1F',\n      },\n\n      yellow: {\n        DEFAULT: '#ffc82c',\n      },\n\n      white: colors.white,\n      green: colors.emerald,\n      indigo: colors.indigo,\n      purple: colors.violet,\n    },\n    spacing: {\n      px: '1px',\n      0: '0px',\n      0.5: '0.125rem',\n      1: '0.25rem',\n      1.5: '0.375rem',\n      2: '0.5rem',\n      2.5: '0.625rem',\n      3: '0.75rem',\n      3.5: '0.875rem',\n      4: '1rem',\n      5: '1.25rem',\n      6: '1.5rem',\n      7: '1.75rem',\n      8: '2rem',\n      9: '2.25rem',\n      10: '2.5rem',\n      11: '2.75rem',\n      12: '3rem',\n      13: '3.188rem',\n      14: '3.5rem',\n      16: '4rem',\n      20: '5rem',\n      21: '5.375rem',\n      24: '6rem',\n      28: '7rem',\n      32: '8rem',\n      34: '8.6rem',\n      36: '9rem',\n      40: '10rem',\n      44: '11rem',\n      48: '12rem',\n      52: '13rem',\n      56: '14rem',\n      60: '15rem',\n      64: '16rem',\n      72: '18rem',\n      80: '20rem',\n      96: '24rem',\n    },\n    animation: {\n      none: 'none',\n      spin: 'spin 1s linear infinite',\n      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n      bounce: 'bounce 1s infinite',\n    },\n    backdropBlur: theme => theme('blur'),\n    backdropBrightness: theme => theme('brightness'),\n    backdropContrast: theme => theme('contrast'),\n    backdropGrayscale: theme => theme('grayscale'),\n    backdropHueRotate: theme => theme('hueRotate'),\n    backdropInvert: theme => theme('invert'),\n    backdropOpacity: theme => theme('opacity'),\n    backdropSaturate: theme => theme('saturate'),\n    backdropSepia: theme => theme('sepia'),\n    backgroundColor: theme => theme('colors'),\n    backgroundImage: {\n      none: 'none',\n      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',\n      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',\n      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',\n      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',\n      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',\n      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',\n      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',\n      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',\n    },\n    backgroundOpacity: theme => theme('opacity'),\n    backgroundPosition: {\n      bottom: 'bottom',\n      center: 'center',\n      left: 'left',\n      'left-bottom': 'left bottom',\n      'left-top': 'left top',\n      right: 'right',\n      'right-bottom': 'right bottom',\n      'right-top': 'right top',\n      top: 'top',\n    },\n    backgroundSize: {\n      auto: 'auto',\n      cover: 'cover',\n      contain: 'contain',\n    },\n    blur: {\n      0: '0',\n      sm: '4px',\n      DEFAULT: '8px',\n      md: '12px',\n      lg: '16px',\n      xl: '24px',\n      '2xl': '40px',\n      '3xl': '64px',\n    },\n    brightness: {\n      0: '0',\n      50: '.5',\n      75: '.75',\n      90: '.9',\n      95: '.95',\n      100: '1',\n      105: '1.05',\n      110: '1.1',\n      125: '1.25',\n      150: '1.5',\n      200: '2',\n    },\n    borderColor: theme => ({\n      ...theme('colors'),\n      DEFAULT: theme('colors.gray.200', 'currentColor'),\n    }),\n    borderOpacity: theme => theme('opacity'),\n    borderRadius: {\n      none: '0px',\n      sm: '0.188rem',\n      DEFAULT: '0.25rem',\n      md: '0.375rem',\n      lg: '0.5rem',\n      xl: '0.75rem',\n      '2xl': '1rem',\n      '3xl': '1.5rem',\n      full: '9999px',\n    },\n    borderWidth: {\n      DEFAULT: '1px',\n      0: '0px',\n      2: '2px',\n      4: '4px',\n      8: '8px',\n    },\n    boxShadow: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n      none: 'none',\n    },\n    contrast: {\n      0: '0',\n      50: '.5',\n      75: '.75',\n      100: '1',\n      125: '1.25',\n      150: '1.5',\n      200: '2',\n    },\n    container: {},\n    cursor: {\n      auto: 'auto',\n      default: 'default',\n      pointer: 'pointer',\n      wait: 'wait',\n      text: 'text',\n      move: 'move',\n      help: 'help',\n      'not-allowed': 'not-allowed',\n    },\n    divideColor: theme => theme('borderColor'),\n    divideOpacity: theme => theme('borderOpacity'),\n    divideWidth: theme => theme('borderWidth'),\n    dropShadow: {\n      sm: '0 1px 1px rgba(0,0,0,0.05)',\n      DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],\n      md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],\n      lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],\n      xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],\n      '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',\n      none: '0 0 #0000',\n    },\n    fill: { current: 'currentColor' },\n    grayscale: {\n      0: '0',\n      DEFAULT: '100%',\n    },\n    hueRotate: {\n      '-180': '-180deg',\n      '-90': '-90deg',\n      '-60': '-60deg',\n      '-30': '-30deg',\n      '-15': '-15deg',\n      0: '0deg',\n      15: '15deg',\n      30: '30deg',\n      60: '60deg',\n      90: '90deg',\n      180: '180deg',\n    },\n    invert: {\n      0: '0',\n      DEFAULT: '100%',\n    },\n    flex: {\n      1: '1 1 0%',\n      auto: '1 1 auto',\n      initial: '0 1 auto',\n      none: 'none',\n    },\n    flexGrow: {\n      0: '0',\n      DEFAULT: '1',\n    },\n    flexShrink: {\n      0: '0',\n      DEFAULT: '1',\n    },\n    fontFamily: {\n      sans: [\n        'Inter',\n        'ui-sans-serif',\n        'system-ui',\n        '-apple-system',\n        'BlinkMacSystemFont',\n        '\"Segoe UI\"',\n        'Roboto',\n        '\"Helvetica Neue\"',\n        'Arial',\n        '\"Noto Sans\"',\n        'sans-serif',\n        '\"Apple Color Emoji\"',\n        '\"Segoe UI Emoji\"',\n        '\"Segoe UI Symbol\"',\n        '\"Noto Color Emoji\"',\n      ],\n      serif: ['ui-serif', 'Georgia', 'Cambria', '\"Times New Roman\"', 'Times', 'serif'],\n      mono: [\n        'ui-monospace',\n        'SFMono-Regular',\n        'Menlo',\n        'Monaco',\n        'Consolas',\n        '\"Liberation Mono\"',\n        '\"Courier New\"',\n        'monospace',\n      ],\n    },\n    fontSize: {\n      xs: ['0.75rem', { lineHeight: '1rem' }],\n      sm: ['0.875rem', { lineHeight: '1.25rem' }],\n      base: ['1rem', { lineHeight: '1.5rem' }],\n      lg: ['1.125rem', { lineHeight: '1.75rem' }],\n      xl: ['1.25rem', { lineHeight: '1.75rem' }],\n      '2xl': ['1.5rem', { lineHeight: '2rem' }],\n      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],\n      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],\n      '5xl': ['3rem', { lineHeight: '1' }],\n      '6xl': ['3.75rem', { lineHeight: '1' }],\n      '7xl': ['4.5rem', { lineHeight: '1' }],\n      '8xl': ['6rem', { lineHeight: '1' }],\n      '9xl': ['8rem', { lineHeight: '1' }],\n    },\n    fontWeight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    gap: theme => theme('spacing'),\n    gradientColorStops: theme => theme('colors'),\n    gridAutoColumns: {\n      auto: 'auto',\n      min: 'min-content',\n      max: 'max-content',\n      fr: 'minmax(0, 1fr)',\n    },\n    gridAutoRows: {\n      auto: 'auto',\n      min: 'min-content',\n      max: 'max-content',\n      fr: 'minmax(0, 1fr)',\n    },\n    gridColumn: {\n      auto: 'auto',\n      'span-1': 'span 1 / span 1',\n      'span-2': 'span 2 / span 2',\n      'span-3': 'span 3 / span 3',\n      'span-4': 'span 4 / span 4',\n      'span-5': 'span 5 / span 5',\n      'span-6': 'span 6 / span 6',\n      'span-7': 'span 7 / span 7',\n      'span-8': 'span 8 / span 8',\n      'span-9': 'span 9 / span 9',\n      'span-10': 'span 10 / span 10',\n      'span-11': 'span 11 / span 11',\n      'span-12': 'span 12 / span 12',\n      'span-full': '1 / -1',\n    },\n    gridColumnEnd: {\n      auto: 'auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n      13: '13',\n    },\n    gridColumnStart: {\n      auto: 'auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n      13: '13',\n    },\n    gridRow: {\n      auto: 'auto',\n      'span-1': 'span 1 / span 1',\n      'span-2': 'span 2 / span 2',\n      'span-3': 'span 3 / span 3',\n      'span-4': 'span 4 / span 4',\n      'span-5': 'span 5 / span 5',\n      'span-6': 'span 6 / span 6',\n      'span-full': '1 / -1',\n    },\n    gridRowStart: {\n      auto: 'auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n    },\n    gridRowEnd: {\n      auto: 'auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n    },\n    gridTemplateColumns: {\n      none: 'none',\n      1: 'repeat(1, minmax(0, 1fr))',\n      2: 'repeat(2, minmax(0, 1fr))',\n      3: 'repeat(3, minmax(0, 1fr))',\n      4: 'repeat(4, minmax(0, 1fr))',\n      5: 'repeat(5, minmax(0, 1fr))',\n      6: 'repeat(6, minmax(0, 1fr))',\n      7: 'repeat(7, minmax(0, 1fr))',\n      8: 'repeat(8, minmax(0, 1fr))',\n      9: 'repeat(9, minmax(0, 1fr))',\n      10: 'repeat(10, minmax(0, 1fr))',\n      11: 'repeat(11, minmax(0, 1fr))',\n      12: 'repeat(12, minmax(0, 1fr))',\n    },\n    gridTemplateRows: {\n      none: 'none',\n      1: 'repeat(1, minmax(0, 1fr))',\n      2: 'repeat(2, minmax(0, 1fr))',\n      3: 'repeat(3, minmax(0, 1fr))',\n      4: 'repeat(4, minmax(0, 1fr))',\n      5: 'repeat(5, minmax(0, 1fr))',\n      6: 'repeat(6, minmax(0, 1fr))',\n    },\n    height: theme => ({\n      auto: 'auto',\n      ...theme('spacing'),\n      '100': '27rem',\n      '1/2': '50%',\n      '1/3': '33.333333%',\n      '2/3': '66.666667%',\n      '1/4': '25%',\n      '2/4': '50%',\n      '3/4': '75%',\n      '1/5': '20%',\n      '2/5': '40%',\n      '3/5': '60%',\n      '4/5': '80%',\n      '1/6': '16.666667%',\n      '2/6': '33.333333%',\n      '3/6': '50%',\n      '4/6': '66.666667%',\n      '5/6': '83.333333%',\n      full: '100%',\n      screen: '100vh',\n    }),\n    inset: (theme, { negative }) => ({\n      auto: 'auto',\n      ...theme('spacing'),\n      ...negative(theme('spacing')),\n      '1/2': '50%',\n      '1/3': '33.333333%',\n      '2/3': '66.666667%',\n      '1/4': '25%',\n      '2/4': '50%',\n      '3/4': '75%',\n      full: '100%',\n      '-1/2': '-50%',\n      '-1/3': '-33.333333%',\n      '-2/3': '-66.666667%',\n      '-1/4': '-25%',\n      '-2/4': '-50%',\n      '-3/4': '-75%',\n      '-full': '-100%',\n    }),\n    keyframes: {\n      spin: {\n        to: {\n          transform: 'rotate(360deg)',\n        },\n      },\n      ping: {\n        '75%, 100%': {\n          transform: 'scale(2)',\n          opacity: '0',\n        },\n      },\n      pulse: {\n        '50%': {\n          opacity: '.5',\n        },\n      },\n      bounce: {\n        '0%, 100%': {\n          transform: 'translateY(-25%)',\n          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n        },\n        '50%': {\n          transform: 'none',\n          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n        },\n      },\n    },\n    letterSpacing: {\n      tighter: '-0.05em',\n      tight: '-0.025em',\n      normal: '0em',\n      wide: '0.025em',\n      wider: '0.05em',\n      widest: '0.1em',\n    },\n    lineHeight: {\n      none: '1',\n      tight: '1.25',\n      snug: '1.375',\n      normal: '1.5',\n      relaxed: '1.625',\n      loose: '2',\n      3: '.75rem',\n      4: '1rem',\n      5: '1.25rem',\n      6: '1.5rem',\n      7: '1.75rem',\n      8: '2rem',\n      9: '2.25rem',\n      10: '2.5rem',\n    },\n    listStyleType: {\n      none: 'none',\n      disc: 'disc',\n      decimal: 'decimal',\n    },\n    margin: (theme, { negative }) => ({\n      auto: 'auto',\n      ...theme('spacing'),\n      ...negative(theme('spacing')),\n    }),\n    maxHeight: theme => ({\n      ...theme('spacing'),\n      full: '100%',\n      screen: '100vh',\n    }),\n    maxWidth: (theme, { breakpoints }) => ({\n      none: 'none',\n      0: '0rem',\n      xs: '20rem',\n      sm: '24rem',\n      md: '28rem',\n      lg: '32rem',\n      xl: '36rem',\n      '2xl': '42rem',\n      '3xl': '48rem',\n      '4xl': '56rem',\n      '5xl': '64rem',\n      '6xl': '72rem',\n      '7xl': '80rem',\n      full: '100%',\n      min: 'min-content',\n      max: 'max-content',\n      prose: '65ch',\n      ...breakpoints(theme('screens')),\n    }),\n    minHeight: {\n      0: '0px',\n      full: '100%',\n      screen: '100vh',\n    },\n    minWidth: {\n      0: '0px',\n      full: '100%',\n      min: 'min-content',\n      max: 'max-content',\n    },\n    objectPosition: {\n      bottom: 'bottom',\n      center: 'center',\n      left: 'left',\n      'left-bottom': 'left bottom',\n      'left-top': 'left top',\n      right: 'right',\n      'right-bottom': 'right bottom',\n      'right-top': 'right top',\n      top: 'top',\n    },\n    opacity: {\n      0: '0',\n      5: '0.05',\n      10: '0.1',\n      20: '0.2',\n      25: '0.25',\n      30: '0.3',\n      40: '0.4',\n      50: '0.5',\n      60: '0.6',\n      70: '0.7',\n      75: '0.75',\n      80: '0.8',\n      90: '0.9',\n      95: '0.95',\n      100: '1',\n    },\n    order: {\n      first: '-9999',\n      last: '9999',\n      none: '0',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n    },\n    outline: {\n      none: ['2px solid transparent', '2px'],\n      white: ['2px dotted white', '2px'],\n      black: ['2px dotted black', '2px'],\n    },\n    padding: theme => theme('spacing'),\n    placeholderColor: theme => theme('colors'),\n    placeholderOpacity: theme => theme('opacity'),\n    ringColor: theme => ({\n      DEFAULT: theme('colors.blue.500', '#3b82f6'),\n      ...theme('colors'),\n    }),\n    ringOffsetColor: theme => theme('colors'),\n    ringOffsetWidth: {\n      0: '0px',\n      1: '1px',\n      2: '2px',\n      4: '4px',\n      8: '8px',\n    },\n    ringOpacity: theme => ({\n      DEFAULT: '0.5',\n      ...theme('opacity'),\n    }),\n    ringWidth: {\n      DEFAULT: '3px',\n      0: '0px',\n      1: '1px',\n      2: '2px',\n      4: '4px',\n      8: '8px',\n    },\n    rotate: {\n      '-180': '-180deg',\n      '-90': '-90deg',\n      '-45': '-45deg',\n      '-12': '-12deg',\n      '-6': '-6deg',\n      '-3': '-3deg',\n      '-2': '-2deg',\n      '-1': '-1deg',\n      0: '0deg',\n      1: '1deg',\n      2: '2deg',\n      3: '3deg',\n      6: '6deg',\n      12: '12deg',\n      45: '45deg',\n      90: '90deg',\n      180: '180deg',\n    },\n    saturate: {\n      0: '0',\n      50: '.5',\n      100: '1',\n      150: '1.5',\n      200: '2',\n    },\n    scale: {\n      0: '0',\n      50: '.5',\n      75: '.75',\n      90: '.9',\n      95: '.95',\n      100: '1',\n      105: '1.05',\n      110: '1.1',\n      125: '1.25',\n      150: '1.5',\n    },\n    sepia: {\n      0: '0',\n      DEFAULT: '100%',\n    },\n    skew: {\n      '-12': '-12deg',\n      '-6': '-6deg',\n      '-3': '-3deg',\n      '-2': '-2deg',\n      '-1': '-1deg',\n      0: '0deg',\n      1: '1deg',\n      2: '2deg',\n      3: '3deg',\n      6: '6deg',\n      12: '12deg',\n    },\n    space: (theme, { negative }) => ({\n      ...theme('spacing'),\n      ...negative(theme('spacing')),\n    }),\n    stroke: {\n      current: 'currentColor',\n    },\n    strokeWidth: {\n      0: '0',\n      1: '1',\n      2: '2',\n    },\n    textColor: theme => theme('colors'),\n    textOpacity: theme => theme('opacity'),\n    transformOrigin: {\n      center: 'center',\n      top: 'top',\n      'top-right': 'top right',\n      right: 'right',\n      'bottom-right': 'bottom right',\n      bottom: 'bottom',\n      'bottom-left': 'bottom left',\n      left: 'left',\n      'top-left': 'top left',\n    },\n    transitionDelay: {\n      75: '75ms',\n      100: '100ms',\n      150: '150ms',\n      200: '200ms',\n      300: '300ms',\n      500: '500ms',\n      700: '700ms',\n      1000: '1000ms',\n    },\n    transitionDuration: {\n      DEFAULT: '150ms',\n      75: '75ms',\n      100: '100ms',\n      150: '150ms',\n      200: '200ms',\n      300: '300ms',\n      500: '500ms',\n      700: '700ms',\n      1000: '1000ms',\n    },\n    transitionProperty: {\n      none: 'none',\n      all: 'all',\n      DEFAULT:\n        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n      colors: 'background-color, border-color, color, fill, stroke',\n      opacity: 'opacity',\n      shadow: 'box-shadow',\n      transform: 'transform',\n    },\n    transitionTimingFunction: {\n      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      linear: 'linear',\n      in: 'cubic-bezier(0.4, 0, 1, 1)',\n      out: 'cubic-bezier(0, 0, 0.2, 1)',\n      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n    },\n    translate: (theme, { negative }) => ({\n      ...theme('spacing'),\n      ...negative(theme('spacing')),\n      '1/2': '50%',\n      '1/3': '33.333333%',\n      '2/3': '66.666667%',\n      '1/4': '25%',\n      '2/4': '50%',\n      '3/4': '75%',\n      full: '100%',\n      '-1/2': '-50%',\n      '-1/3': '-33.333333%',\n      '-2/3': '-66.666667%',\n      '-1/4': '-25%',\n      '-2/4': '-50%',\n      '-3/4': '-75%',\n      '-full': '-100%',\n    }),\n    width: theme => ({\n      auto: 'auto',\n      ...theme('spacing'),\n      '1/2': '50%',\n      '1/3': '33.333333%',\n      '2/3': '66.666667%',\n      '1/4': '25%',\n      '2/4': '50%',\n      '3/4': '75%',\n      '1/5': '20%',\n      '2/5': '40%',\n      '3/5': '60%',\n      '4/5': '80%',\n      '1/6': '16.666667%',\n      '2/6': '33.333333%',\n      '3/6': '50%',\n      '4/6': '66.666667%',\n      '5/6': '83.333333%',\n      '1/12': '8.333333%',\n      '2/12': '16.666667%',\n      '3/12': '25%',\n      '4/12': '33.333333%',\n      '5/12': '41.666667%',\n      '6/12': '50%',\n      '7/12': '58.333333%',\n      '8/12': '66.666667%',\n      '9/12': '75%',\n      '10/12': '83.333333%',\n      '11/12': '91.666667%',\n      full: '100%',\n      screen: '100vw',\n      min: 'min-content',\n      max: 'max-content',\n    }),\n    zIndex: {\n      auto: 'auto',\n      0: '0',\n      10: '10',\n      20: '20',\n      30: '30',\n      40: '40',\n      50: '50',\n    },\n  },\n  variantOrder: [\n    'first',\n    'last',\n    'odd',\n    'even',\n    'visited',\n    'checked',\n    'group-hover',\n    'group-focus',\n    'focus-within',\n    'hover',\n    'focus',\n    'focus-visible',\n    'active',\n    'disabled',\n  ],\n  variants: {\n    accessibility: ['responsive', 'focus-within', 'focus'],\n    alignContent: ['responsive'],\n    alignItems: ['responsive'],\n    alignSelf: ['responsive'],\n    animation: ['responsive'],\n    appearance: ['responsive'],\n    backdropBlur: ['responsive'],\n    backdropBrightness: ['responsive'],\n    backdropContrast: ['responsive'],\n    backdropDropShadow: ['responsive'],\n    backdropFilter: ['responsive'],\n    backdropGrayscale: ['responsive'],\n    backdropHueRotate: ['responsive'],\n    backdropInvert: ['responsive'],\n    backdropSaturate: ['responsive'],\n    backdropSepia: ['responsive'],\n    backgroundAttachment: ['responsive'],\n    backgroundBlendMode: ['responsive'],\n    backgroundClip: ['responsive'],\n    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    backgroundImage: ['responsive'],\n    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    backgroundPosition: ['responsive'],\n    backgroundRepeat: ['responsive'],\n    backgroundSize: ['responsive'],\n    blur: ['responsive'],\n    borderCollapse: ['responsive'],\n    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    borderRadius: ['responsive'],\n    borderStyle: ['responsive'],\n    borderWidth: ['responsive'],\n    boxDecorationBreak: ['responsive'],\n    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],\n    boxSizing: ['responsive'],\n    brightness: ['responsive'],\n    clear: ['responsive'],\n    container: ['responsive'],\n    contrast: ['responsive'],\n    cursor: ['responsive'],\n    display: ['responsive'],\n    divideColor: ['responsive', 'dark'],\n    divideOpacity: ['responsive', 'dark'],\n    divideStyle: ['responsive'],\n    divideWidth: ['responsive'],\n    dropShadow: ['responsive'],\n    fill: ['responsive'],\n    filter: ['responsive'],\n    flex: ['responsive'],\n    flexDirection: ['responsive'],\n    flexGrow: ['responsive'],\n    flexShrink: ['responsive'],\n    flexWrap: ['responsive'],\n    float: ['responsive'],\n    fontFamily: ['responsive'],\n    fontSize: ['responsive'],\n    fontSmoothing: ['responsive'],\n    fontStyle: ['responsive'],\n    fontVariantNumeric: ['responsive'],\n    fontWeight: ['responsive'],\n    gap: ['responsive'],\n    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],\n    grayscale: ['responsive'],\n    gridAutoColumns: ['responsive'],\n    gridAutoFlow: ['responsive'],\n    gridAutoRows: ['responsive'],\n    gridColumn: ['responsive'],\n    gridColumnEnd: ['responsive'],\n    gridColumnStart: ['responsive'],\n    gridRow: ['responsive'],\n    gridRowEnd: ['responsive'],\n    gridRowStart: ['responsive'],\n    gridTemplateColumns: ['responsive'],\n    gridTemplateRows: ['responsive'],\n    height: ['responsive'],\n    hueRotate: ['responsive'],\n    inset: ['responsive'],\n    invert: ['responsive'],\n    isolation: ['responsive'],\n    justifyContent: ['responsive'],\n    justifyItems: ['responsive'],\n    justifySelf: ['responsive'],\n    letterSpacing: ['responsive'],\n    lineHeight: ['responsive'],\n    listStylePosition: ['responsive'],\n    listStyleType: ['responsive'],\n    margin: ['responsive'],\n    maxHeight: ['responsive'],\n    maxWidth: ['responsive'],\n    minHeight: ['responsive'],\n    minWidth: ['responsive'],\n    mixBlendMode: ['responsive'],\n    objectFit: ['responsive'],\n    objectPosition: ['responsive'],\n    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],\n    order: ['responsive'],\n    outline: ['responsive', 'focus-within', 'focus'],\n    overflow: ['responsive'],\n    overscrollBehavior: ['responsive'],\n    padding: ['responsive'],\n    placeContent: ['responsive'],\n    placeItems: ['responsive'],\n    placeSelf: ['responsive'],\n    placeholderColor: ['responsive', 'dark', 'focus'],\n    placeholderOpacity: ['responsive', 'dark', 'focus'],\n    pointerEvents: ['responsive'],\n    position: ['responsive'],\n    resize: ['responsive'],\n    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],\n    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],\n    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],\n    ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],\n    ringWidth: ['responsive', 'focus-within', 'focus'],\n    rotate: ['responsive', 'hover', 'focus'],\n    saturate: ['responsive'],\n    scale: ['responsive', 'hover', 'focus'],\n    sepia: ['responsive'],\n    skew: ['responsive', 'hover', 'focus'],\n    space: ['responsive'],\n    stroke: ['responsive'],\n    strokeWidth: ['responsive'],\n    tableLayout: ['responsive'],\n    textAlign: ['responsive'],\n    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],\n    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],\n    textOverflow: ['responsive'],\n    textTransform: ['responsive'],\n    transform: ['responsive'],\n    transformOrigin: ['responsive'],\n    transitionDelay: ['responsive'],\n    transitionDuration: ['responsive'],\n    transitionProperty: ['responsive'],\n    transitionTimingFunction: ['responsive'],\n    translate: ['responsive', 'hover', 'focus'],\n    userSelect: ['responsive'],\n    verticalAlign: ['responsive'],\n    visibility: ['responsive'],\n    whitespace: ['responsive'],\n    width: ['responsive'],\n    wordBreak: ['responsive'],\n    zIndex: ['responsive', 'focus-within', 'focus'],\n  },\n  plugins: [],\n}\n"
  },
  {
    "path": "vue.config.js",
    "content": "module.exports = {\n  css: {\n    extract: false,\n  },\n\n  pages: {\n    popup: {\n      template: 'public/browser-extension.html',\n      entry: './src/popup/main.js',\n      title: 'Popup',\n    },\n    options: {\n      template: 'public/browser-extension.html',\n      entry: './src/options/main.js',\n      title: 'Options',\n    },\n  },\n  pluginOptions: {\n    browserExtension: {\n      componentOptions: {\n        background: {\n          entry: 'src/background/index.js',\n        },\n        contentScripts: {\n          entries: {\n            'content-script': ['src/content-scripts/index.js'],\n          },\n        },\n      },\n    },\n  },\n}\n"
  }
]