Repository: checkly/headless-recorder
Branch: main
Commit: 4fb93c125f40
Files: 88
Total size: 165.5 KB
Directory structure:
gitextract_qm3mcne8/
├── .browserslistrc
├── .eslintrc.js
├── .github/
│ ├── auto_assign.yml
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ └── workflows/
│ ├── codeql-analysis.yml
│ └── lint-build-test.yml
├── .gitignore
├── .npmrc
├── .prettierrc.js
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── PRIVACY_POLICY.md
├── README.md
├── babel.config.js
├── dependabot.yml
├── jest.config.js
├── jest.setup.js
├── jsconfig.json
├── package.json
├── postcss.config.js
├── public/
│ ├── _locales/
│ │ └── en/
│ │ └── messages.json
│ └── browser-extension.html
├── src/
│ ├── __tests__/
│ │ ├── build.spec.js
│ │ └── helpers.js
│ ├── assets/
│ │ ├── animations.css
│ │ ├── code.css
│ │ └── tailwind.css
│ ├── background/
│ │ └── index.js
│ ├── components/
│ │ ├── Button.vue
│ │ ├── Footer.vue
│ │ ├── Header.vue
│ │ ├── RecordingLabel.vue
│ │ ├── RoundButton.vue
│ │ ├── Toggle.vue
│ │ └── __tests__/
│ │ ├── RecordingTab.spec.js
│ │ ├── ResultsTab.spec.js
│ │ └── __snapshots__/
│ │ ├── RecordingTab.spec.js.snap
│ │ └── ResultsTab.spec.js.snap
│ ├── content-scripts/
│ │ ├── __tests__/
│ │ │ ├── attributes.spec.js
│ │ │ ├── fixtures/
│ │ │ │ ├── attributes.html
│ │ │ │ └── forms.html
│ │ │ ├── forms.spec.js
│ │ │ ├── helpers.js
│ │ │ └── screenshot-controller.spec.js
│ │ ├── controller.js
│ │ └── index.js
│ ├── manifest.json
│ ├── modules/
│ │ ├── code-generator/
│ │ │ ├── __tests__/
│ │ │ │ ├── playwright-code-generator.spec.js
│ │ │ │ └── puppeteer-code-generator.spec.js
│ │ │ ├── base-generator.js
│ │ │ ├── block.js
│ │ │ ├── constants.js
│ │ │ ├── index.js
│ │ │ ├── playwright.js
│ │ │ └── puppeteer.js
│ │ ├── overlay/
│ │ │ ├── Overlay.vue
│ │ │ ├── Selector.vue
│ │ │ ├── constants.js
│ │ │ └── index.js
│ │ ├── recorder/
│ │ │ └── index.js
│ │ └── shooter/
│ │ └── index.js
│ ├── options/
│ │ ├── OptionsApp.vue
│ │ ├── __tests__/
│ │ │ ├── App.spec.js
│ │ │ └── __snapshots__/
│ │ │ └── App.spec.js.snap
│ │ └── main.js
│ ├── popup/
│ │ ├── PopupApp.vue
│ │ ├── __tests__/
│ │ │ ├── App.spec.js
│ │ │ └── __snapshots__/
│ │ │ └── App.spec.js.snap
│ │ └── main.js
│ ├── services/
│ │ ├── __tests__/
│ │ │ ├── analytics.spec.js
│ │ │ ├── badge.spec.js
│ │ │ ├── browser.spec.js
│ │ │ ├── constants.spec.js
│ │ │ └── storage.spec.js
│ │ ├── analytics.js
│ │ ├── badge.js
│ │ ├── browser.js
│ │ ├── constants.js
│ │ ├── selector.js
│ │ └── storage.js
│ ├── store/
│ │ └── index.js
│ └── views/
│ ├── Home.vue
│ ├── Recording.vue
│ └── Results.vue
├── tailwind.config.js
└── vue.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
> 1%
last 2 versions
not dead
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
env: {
node: true,
webextensions: true,
},
extends: [
'plugin:vuejs-accessibility/recommended',
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/prettier',
],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vuejs-accessibility/label-has-for': 'off',
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
jest: true,
},
},
],
}
================================================
FILE: .github/auto_assign.yml
================================================
addReviewers: true
addAssignees: author
reviewers:
- pilimartinez
- ianaya89
skipKeywords:
- wip
numberOfReviewers: 1
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
# Runs at 9am CET only on weekdays
schedule:
time: "13:00"
interval: "daily"
timezone: Europe/Berlin
open-pull-requests-limit: 3
labels:
- "dependencies"
================================================
FILE: .github/pull_request_template.md
================================================
# Pull Request Template
## Description
Please include a summary of the change or which issue is fixed. Also, include relevant motivation and context.
Remember, as mentioned in the [contribution guidelines](https://github.com/checkly/puppeteer-recorder/blob/main/CONTRIBUTING.md) that
PR's should be as atomic as possible 1 feature === 1 PR. 1 bugfix === 1 PR.
## Type of change
Please delete options that are not relevant.
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
## How Has This Been Tested?
Please describe the tests that you ran to verify your changes.
## Checklist:
- [ ] My code follows the style guidelines of this project. `npm run lint` passes with no errors.
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes. `npm run test` passes with no errors.
================================================
FILE: .github/workflows/codeql-analysis.yml
================================================
name: "CodeQL"
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
schedule:
- cron: '38 6 * * 5'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
steps:
- name: Checkout repository
uses: actions/checkout@v2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
================================================
FILE: .github/workflows/lint-build-test.yml
================================================
name: Lint & Build & Test
on:
push:
branches: [ main ]
pull_request:
types: [ opened, synchronize ]
jobs:
dependencies:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install
- uses: actions/cache@v1
id: cache-dependencies
with:
path: '.'
key: ${{ github.sha }}
ci:
runs-on: ubuntu-latest
needs: dependencies
steps:
- uses: actions/cache@v1
id: restore-dependencies
with:
path: '.'
key: ${{ github.sha }}
- name: Lint
run: npm run lint
- name: Build
run: npm run build
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Vue Browser Extension Output
*.pem
*.pub
*.zip
/artifacts
================================================
FILE: .npmrc
================================================
save-exact=true
================================================
FILE: .prettierrc.js
================================================
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: false,
singleQuote: true,
printWidth: 100,
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.0.0] - 2021-07-08
### Added
- New visual identity by [@nucro](https://twitter.com/nucro).
- In page overlay to handle recording and take screenshots
- Visual feedback when taking screenshots
- New code structure organized in modules and services
- Dark mode support
- Migrate to Vue 3 and dependencies update
- Migrate CSS to Tailwind (except for Overlay components)
- Selector preview while recording
- Restart button while recording
- Allow run scripts directly on Checkly 🦝
- First draft of Vuex shared store
### Changed
- Make Playwright default tab
- Use non-async wrap as default
- Full page screenshots use `fullPage` property
- Replace clipped screenshots with element screenshots
- Improve selector generation giving relevance to `ID` and `data-attributes` [#64](https://github.com/checkly/headless-recorder/issues/64)
- General bug fixing
- Improve code reusability and events management
### Removed
- Screenshots context menu
- Events recording list
Headless Recorder
> 🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.
tab after you finish typing in an `input` element. 👈
3. Click on links, inputs and other elements.
4. Wait for full page load on each navigation.
**The icon will switch from
Delightful Active Monitoring for Developers From Checkly with ♥️
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
}
================================================
FILE: dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
time: "09:00"
interval: "daily"
timezone: Europe/Berlin
open-pull-requests-limit: 3
labels:
- "dependencies"
reviewers:
- "ianaya89"
================================================
FILE: jest.config.js
================================================
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest',
"^.+\\.js$": "babel-jest",
},
setupFilesAfterEnv: ['./jest.setup.js'],
moduleFileExtensions: ["js", "json", "vue"],
}
================================================
FILE: jest.setup.js
================================================
import '@testing-library/jest-dom'
================================================
FILE: jsconfig.json
================================================
{
"include": [
"./src/**/*"
]
}
================================================
FILE: package.json
================================================
{
"name": "headless-recorder",
"version": "1.1.0",
"scripts": {
"serve": "vue-cli-service build --mode development --watch",
"build": "vue-cli-service build",
"test": "npm run test:unit",
"test:unit": "vue-cli-service test:unit __tests__/.*.spec.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@headlessui/vue": "1.2.0",
"@medv/finder": "2.0.0",
"@tailwindcss/postcss7-compat": "2.0.2",
"@vueuse/core": "4.0.8",
"autoprefixer": "9",
"core-js": "3.6.5",
"css-selector-generator": "3.0.1",
"lodash": "4.17.21",
"pinia": "2.0.0-beta.3",
"postcss": "7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@2.0.2",
"vue": "3.0.6",
"vue-tippy": "6.0.0-alpha.30",
"vue3-highlightjs": "1.0.5",
"vuex": "4.0.2"
},
"devDependencies": {
"@testing-library/jest-dom": "5.12.0",
"@vue/cli-plugin-babel": "4.5.0",
"@vue/cli-plugin-eslint": "4.5.0",
"@vue/cli-plugin-unit-jest": "4.5.12",
"@vue/cli-service": "4.5.0",
"@vue/compiler-sfc": "3.0.0",
"@vue/eslint-config-prettier": "6.0.0",
"@vue/test-utils": "2.0.0-rc.6",
"@vue/vue3-jest": "27.0.0-alpha.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"eslint": "6.7.2",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-vue": "7.0.0",
"eslint-plugin-vuejs-accessibility": "0.6.2",
"jest": "27.5.1",
"jest-vue-preprocessor": "1.7.1",
"node-sass": "5.0.0",
"playwright": "1.10.0",
"prettier": "1.19.1",
"puppeteer": "9.0.0",
"sass-loader": "10.1.1",
"typescript": "3.9.3",
"vue-cli-plugin-browser-extension": "0.25.1",
"vue-cli-plugin-tailwind": "2.0.6",
"vue-jest": "3.0.7"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: public/_locales/en/messages.json
================================================
{
"extName": {
"message": "headless-recorder-v2",
"description": ""
}
}
================================================
FILE: public/browser-extension.html
================================================
<%= htmlWebpackPlugin.options.title %>
================================================
FILE: src/__tests__/build.spec.js
================================================
import puppeteer from 'puppeteer'
import { launchPuppeteerWithExtension } from './helpers'
describe('install', () => {
test('it installs the extension', async () => {
const browser = await launchPuppeteerWithExtension(puppeteer)
expect(browser).toBeTruthy()
browser.close()
}, 5000)
})
================================================
FILE: src/__tests__/helpers.js
================================================
import path from 'path'
import { scripts } from '../../package.json'
const util = require('util')
const exec = util.promisify(require('child_process').exec)
const extensionPath = path.join(__dirname, '../../dist')
export const launchPuppeteerWithExtension = function(puppeteer) {
const options = {
headless: false,
ignoreHTTPSErrors: true,
devtools: true,
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
'--no-sandbox',
'--disable-setuid-sandbox',
],
}
if (process.env.CI) {
options.executablePath = process.env.PUPPETEER_EXEC_PATH // Set by docker on github actions
}
return puppeteer.launch(options)
}
export const runBuild = function() {
return exec(scripts.build)
}
================================================
FILE: src/assets/animations.css
================================================
@keyframes flash {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideup {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes pop {
0% {
transform: scale(1);
}
0% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.headless-recorder-flash {
animation-name: flash;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
.headless-recorder-camera-cursor {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACMSURBVHgBzZDrDUBAEITnVEIHVIoKUAkd0MHphCXrstm4R/jBJF9yu5d9DfAXWWJT2DfFqVjDj0NGNd6QoEwVSC61RMEDKmLAzSQfHZETI8czx40cFGpQcpHMjdzkjA3Ct/r+XT5DWDkxqdzCmzmFTqi5yazW75HowWVkKTaq5X/Mg6gOD1Y814rPtQPiEFi9rPKoQQAAAABJRU5ErkJggg=='),
auto !important;
}
================================================
FILE: src/assets/code.css
================================================
.hljs-line {
color: '#ADAACC';
margin-right: 8px;
}
/* Comment */
.hljs-comment,
.hljs-quote {
color: #d4d0ab;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #C792EA;
}
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #7DD8C7;
}
.hljs-number {
color: #FF628C;
}
/* Yellow */
.hljs-attribute {
color: #ffd700;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #ECC48D;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #00e0e0;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #C792EA;
}
.hljs {
display: block;
overflow-x: auto;
background: #2b2b2b;
color: #f8f8f2;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}
================================================
FILE: src/assets/tailwind.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: src/background/index.js
================================================
import badge from '@/services/badge'
import browser from '@/services/browser'
import storage from '@/services/storage'
import { popupActions, recordingControls } from '@/services/constants'
import { overlayActions } from '@/modules/overlay/constants'
import { headlessActions } from '@/modules/code-generator/constants'
import CodeGenerator from '@/modules/code-generator'
class Background {
constructor() {
this._recording = []
this._boundedMessageHandler = null
this._boundedNavigationHandler = null
this._boundedWaitHandler = null
this.overlayHandler = null
this._badgeState = ''
this._isPaused = false
this._menuId = 'PUPPETEER_RECORDER_CONTEXT_MENU'
this._boundedMenuHandler = null
// Some events are sent double on page navigations to simplify the event recorder.
// We keep some simple state to disregard events if needed.
this._hasGoto = false
this._hasViewPort = false
}
init() {
chrome.extension.onConnect.addListener(port => {
port.onMessage.addListener(msg => this.handlePopupMessage(msg))
})
}
async start() {
await this.cleanUp()
this._badgeState = ''
this._hasGoto = false
this._hasViewPort = false
await browser.injectContentScript()
this.toggleOverlay({ open: true, clear: true })
this._boundedMessageHandler = this.handleMessage.bind(this)
this._boundedNavigationHandler = this.handleNavigation.bind(this)
this._boundedWaitHandler = () => badge.wait()
this.overlayHandler = this.handleOverlayMessage.bind(this)
// chrome.contextMenus.create({
// id: this._menuId,
// title: 'Headless Recorder',
// contexts: ['all'],
// })
// chrome.contextMenus.create({
// id: this._menuId + 'SELECTOR',
// title: 'Copy Selector',
// parentId: this._menuId,
// contexts: ['all'],
// })
// this._boundedMenuHandler = this.handleMenuInteraction.bind(this)
// chrome.contextMenus.onClicked.addListener(this._boundedMenuHandler)
chrome.runtime.onMessage.addListener(this._boundedMessageHandler)
chrome.runtime.onMessage.addListener(this.overlayHandler)
chrome.webNavigation.onCompleted.addListener(this._boundedNavigationHandler)
chrome.webNavigation.onBeforeNavigate.addListener(this._boundedWaitHandler)
badge.start()
}
stop() {
this._badgeState = this._recording.length > 0 ? '1' : ''
chrome.runtime.onMessage.removeListener(this._boundedMessageHandler)
chrome.webNavigation.onCompleted.removeListener(this._boundedNavigationHandler)
chrome.webNavigation.onBeforeNavigate.removeListener(this._boundedWaitHandler)
// chrome.contextMenus.onClicked.removeListener(this._boundedMenuHandler)
badge.stop(this._badgeState)
storage.set({ recording: this._recording })
}
pause() {
badge.pause()
this._isPaused = true
}
unPause() {
badge.start()
this._isPaused = false
}
cleanUp() {
this._recording = []
this._isPaused = false
badge.reset()
return new Promise(function(resolve) {
chrome.storage.local.remove('recording', () => resolve())
})
}
recordCurrentUrl(href) {
if (!this._hasGoto) {
this.handleMessage({
selector: undefined,
value: undefined,
action: headlessActions.GOTO,
href,
})
this._hasGoto = true
}
}
recordCurrentViewportSize(value) {
if (!this._hasViewPort) {
this.handleMessage({
selector: undefined,
value,
action: headlessActions.VIEWPORT,
})
this._hasViewPort = true
}
}
recordNavigation() {
this.handleMessage({
selector: undefined,
value: undefined,
action: headlessActions.NAVIGATION,
})
}
recordScreenshot(value) {
this.handleMessage({
selector: undefined,
value,
action: headlessActions.SCREENSHOT,
})
}
// handleMenuInteraction(info, tab) {
// }
handleMessage(msg, sender) {
if (msg.control) {
return this.handleRecordingMessage(msg, sender)
}
if (msg.type === 'SIGN_CONNECT') {
return
}
// NOTE: To account for clicks etc. we need to record the frameId
// and url to later target the frame in playback
msg.frameId = sender ? sender.frameId : null
msg.frameUrl = sender ? sender.url : null
if (!this._isPaused) {
this._recording.push(msg)
storage.set({ recording: this._recording })
}
}
async handleOverlayMessage({ control }) {
if (!control) {
return
}
if (control === overlayActions.RESTART) {
chrome.storage.local.set({ restart: true })
chrome.storage.local.set({ clear: false })
chrome.runtime.onMessage.removeListener(this.overlayHandler)
this.stop()
this.cleanUp()
this.start()
}
if (control === overlayActions.CLOSE) {
this.toggleOverlay()
chrome.runtime.onMessage.removeListener(this.overlayHandler)
}
if (control === overlayActions.COPY) {
const { options = {} } = await storage.get('options')
const generator = new CodeGenerator(options)
const code = generator.generate(this._recording)
browser.sendTabMessage({
action: 'CODE',
value: options?.code?.showPlaywrightFirst ? code.playwright : code.puppeteer,
})
}
if (control === overlayActions.STOP) {
chrome.storage.local.set({ clear: true })
chrome.storage.local.set({ pause: false })
chrome.storage.local.set({ restart: false })
this.stop()
}
if (control === overlayActions.UNPAUSE) {
chrome.storage.local.set({ pause: false })
this.unPause()
}
if (control === overlayActions.PAUSE) {
chrome.storage.local.set({ pause: true })
this.pause()
}
// TODO: the next 3 events do not need to be listened in background
// content script controller, should be able to handle that directly from overlay
if (control === overlayActions.CLIPPED_SCREENSHOT) {
browser.sendTabMessage({ action: overlayActions.TOGGLE_SCREENSHOT_CLIPPED_MODE })
}
if (control === overlayActions.FULL_SCREENSHOT) {
browser.sendTabMessage({ action: overlayActions.TOGGLE_SCREENSHOT_MODE })
}
if (control === overlayActions.ABORT_SCREENSHOT) {
browser.sendTabMessage({ action: overlayActions.CLOSE_SCREENSHOT_MODE })
}
}
handleRecordingMessage({ control, href, value, coordinates }) {
if (control === recordingControls.EVENT_RECORDER_STARTED) {
badge.setText(this._badgeState)
}
if (control === recordingControls.GET_VIEWPORT_SIZE) {
this.recordCurrentViewportSize(coordinates)
}
if (control === recordingControls.GET_CURRENT_URL) {
this.recordCurrentUrl(href)
}
if (control === recordingControls.GET_SCREENSHOT) {
this.recordScreenshot(value)
}
}
handlePopupMessage(msg) {
if (!msg.action) {
return
}
if (msg.action === popupActions.START) {
this.start()
}
if (msg.action === popupActions.STOP) {
browser.sendTabMessage({ action: popupActions.STOP })
this.stop()
}
if (msg.action === popupActions.CLEAN_UP) {
chrome.runtime.onMessage.removeListener(this.overlayHandler)
msg.value && this.stop()
this.toggleOverlay()
this.cleanUp()
}
if (msg.action === popupActions.PAUSE) {
if (!msg.stop) {
browser.sendTabMessage({ action: popupActions.PAUSE })
}
this.pause()
}
if (msg.action === popupActions.UN_PAUSE) {
if (!msg.stop) {
browser.sendTabMessage({ action: popupActions.UN_PAUSE })
}
this.unPause()
}
}
async handleNavigation({ frameId }) {
await browser.injectContentScript()
this.toggleOverlay({ open: true, pause: this._isPaused })
if (frameId === 0) {
this.recordNavigation()
}
}
// TODO: Use a better naming convention for this arguments
toggleOverlay({ open = false, clear = false, pause = false } = {}) {
browser.sendTabMessage({ action: overlayActions.TOGGLE_OVERLAY, value: { open, clear, pause } })
}
}
window.headlessRecorder = new Background()
window.headlessRecorder.init()
================================================
FILE: src/components/Button.vue
================================================
================================================
FILE: src/components/Footer.vue
================================================
Version {{ version }}
================================================
FILE: src/components/Header.vue
================================================
================================================
FILE: src/components/RecordingLabel.vue
================================================
{{ text }}
================================================
FILE: src/components/RoundButton.vue
================================================
================================================
FILE: src/components/Toggle.vue
================================================
================================================
FILE: src/components/__tests__/RecordingTab.spec.js
================================================
import { mount } from '@vue/test-utils'
import RecordingTab from '../RecordingTab'
describe('RecordingTab.vue', () => {
test('it has the correct pristine / empty state', () => {
const wrapper = mount(RecordingTab)
expect(wrapper.element).toMatchSnapshot()
})
test('it has the correct waiting for events state', () => {
const wrapper = mount(RecordingTab, { props: { isRecording: true } })
expect(wrapper.element).toMatchSnapshot()
expect(wrapper.find('.event-list').element).toBeEmpty()
})
test('it has the correct recording Puppeteer custom events state', () => {
const wrapper = mount(RecordingTab, {
props: {
isRecording: true,
liveEvents: [
{
action: 'goto*',
href: 'http://example.com',
},
{
action: 'viewport*',
selector: undefined,
value: { width: 1280, height: 800 },
},
{
action: 'navigation*',
selector: undefined,
},
],
},
})
expect(wrapper.element).toMatchSnapshot()
expect(wrapper.find('.event-list').element).not.toBeEmpty()
})
test('it has the correct recording DOM events state', () => {
const wrapper = mount(RecordingTab, {
props: {
isRecording: true,
liveEvents: [
{
action: 'click',
selector: '.main > a.link',
href: 'http://example.com',
},
],
},
})
expect(wrapper.element).toMatchSnapshot()
expect(wrapper.find('.event-list').element).not.toBeEmpty()
})
})
================================================
FILE: src/components/__tests__/ResultsTab.spec.js
================================================
import { mount } from '@vue/test-utils'
import VueHighlightJS from 'vue3-highlightjs'
import ResultsTab from '../ResultsTab'
describe('RecordingTab.vue', () => {
test('it has the correct pristine / empty state', () => {
const wrapper = mount(ResultsTab)
expect(wrapper.element).toMatchSnapshot()
expect(wrapper.find('code.javascript').exists()).toBe(false)
})
test('it show a code box when there is code', () => {
const wrapper = mount(ResultsTab, {
global: {
plugins: [VueHighlightJS],
},
props: { puppeteer: `await page.click('.class')` },
})
expect(wrapper.element).toMatchSnapshot()
expect(wrapper.find('code.javascript').exists()).toBe(true)
})
test('it render tabs for puppeteer & playwright', () => {
const wrapper = mount(ResultsTab)
expect(wrapper.findAll('.tabs__action').length).toEqual(2)
})
test('it render playwright first when option is present', async () => {
const wrapper = await mount(ResultsTab, {
props: {
options: {
code: {
showPlaywrightFirst: true,
},
},
},
})
expect(wrapper.find('.tabs__action').text()).toEqual('🎭playwright')
})
})
================================================
FILE: src/components/__tests__/__snapshots__/RecordingTab.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `
No recorded events yet
Click record to begin
`;
exports[`RecordingTab.vue it has the correct recording DOM events state 1`] = `
No recorded events yet
Click record to begin
`;
exports[`RecordingTab.vue it has the correct recording Puppeteer custom events state 1`] = `
No recorded events yet
Click record to begin
Waiting for events
1.
2.
viewport*
width: 1280, height: 800
3.
`;
exports[`RecordingTab.vue it has the correct waiting for events state 1`] = `
No recorded events yet
Click record to begin
`;
================================================
FILE: src/components/__tests__/__snapshots__/ResultsTab.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `
puppeteer
🎭
playwright
`;
exports[`RecordingTab.vue it show a code box when there is code 1`] = `
puppeteer
🎭
playwright
await
page.click(
'.class'
)
`;
================================================
FILE: src/content-scripts/__tests__/attributes.spec.js
================================================
import puppeteer from 'puppeteer'
import { launchPuppeteerWithExtension } from '@/__tests__/helpers'
import { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'
let server
let port
let browser
let page
describe('attributes', () => {
beforeAll(async done => {
const buildDir = '../../../dist'
const fixture = './fixtures/attributes.html'
{
const { server: _s, port: _p } = await startServer(buildDir, fixture)
server = _s
port = _p
}
return done()
}, 20000)
afterAll(done => {
server.close(() => {
return done()
})
})
beforeEach(async () => {
browser = await launchPuppeteerWithExtension(puppeteer)
page = await browser.newPage()
await page.goto(`http://localhost:${port}/`)
await cleanEventLog(page)
})
afterEach(async () => {
browser.close()
})
test('it should load the content', async () => {
const content = await page.$('#content-root')
expect(content).toBeTruthy()
})
test('it should use data attributes throughout selector', async () => {
await page.evaluate('window.eventRecorder._dataAttribute = "data-qa"')
await page.click('span')
const event = (await waitForAndGetEvents(page, 1))[0]
expect(event.selector).toEqual(
'body > #content-root > [data-qa="article-wrapper"] > [data-qa="article-body"] > span'
)
})
test('it should use data attributes throughout selector even when id is set', async () => {
await page.evaluate('window.eventRecorder._dataAttribute = "data-qa"')
await page.click('#link')
const event = (await waitForAndGetEvents(page, 1))[0]
expect(event.selector).toEqual('[data-qa="link"]')
})
test('it should use id throughout selector when data attributes is not set', async () => {
await page.evaluate('window.eventRecorder._dataAttribute = null')
await page.click('#link')
const event = (await waitForAndGetEvents(page, 1))[0]
expect(event.selector).toEqual('#link')
})
})
================================================
FILE: src/content-scripts/__tests__/fixtures/attributes.html
================================================
forms
================================================
FILE: src/content-scripts/__tests__/fixtures/forms.html
================================================
forms
================================================
FILE: src/content-scripts/__tests__/forms.spec.js
================================================
import puppeteer from 'puppeteer'
import _ from 'lodash'
import { launchPuppeteerWithExtension } from '@/__tests__/helpers'
import { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'
let server
let port
let browser
let page
describe('forms', () => {
beforeAll(async done => {
const buildDir = '../../../dist'
const fixture = './fixtures/forms.html'
{
const { server: _s, port: _p } = await startServer(buildDir, fixture)
server = _s
port = _p
}
return done()
}, 20000)
afterAll(done => {
server.close(() => {
return done()
})
})
beforeEach(async () => {
browser = await launchPuppeteerWithExtension(puppeteer)
page = await browser.newPage()
await page.goto(`http://localhost:${port}/`)
await cleanEventLog(page)
})
afterEach(async () => {
browser.close()
})
const tab = 1
const change = 1
test('it should load the form', async () => {
const form = await page.$('form')
expect(form).toBeTruthy()
})
test('it should record text input elements', async () => {
const string = 'I like turtles'
await page.type('input[type="text"]', string)
await page.keyboard.press('Tab')
const eventLog = await waitForAndGetEvents(page, string.length + tab + change)
const event = _.find(eventLog, e => {
return e.action === 'keydown' && e.keyCode === 9
})
expect(event.value).toEqual(string)
})
test('it should record textarea elements', async () => {
const string = 'I like turtles\n but also cats'
await page.type('textarea', string)
await page.keyboard.press('Tab')
const eventLog = await waitForAndGetEvents(page, string.length + tab + change)
const event = _.find(eventLog, e => {
return e.action === 'keydown' && e.keyCode === 9
})
expect(event.value).toEqual(string)
})
test('it should record radio input elements', async () => {
await page.click('#radioChoice1')
await page.click('#radioChoice3')
const eventLog = await waitForAndGetEvents(page, 2 + 2 * change)
expect(eventLog[0].value).toEqual('radioChoice1')
expect(eventLog[2].value).toEqual('radioChoice3')
})
test('it should record select and option elements', async () => {
await page.select('select', 'hamster')
const eventLog = await waitForAndGetEvents(page, 1)
expect(eventLog[0].value).toEqual('hamster')
expect(eventLog[0].tagName).toEqual('SELECT')
})
test('it should record checkbox input elements', async () => {
await page.click('#checkbox1')
await page.click('#checkbox2')
const eventLog = await waitForAndGetEvents(page, 2 + 2 * change)
expect(eventLog[0].value).toEqual('checkbox1')
expect(eventLog[2].value).toEqual('checkbox2')
})
})
================================================
FILE: src/content-scripts/__tests__/helpers.js
================================================
import express from 'express'
import path from 'path'
export const waitForAndGetEvents = async function(page, amount) {
await waitForRecorderEvents(page, amount)
return getEventLog(page)
}
export const waitForRecorderEvents = function(page, amount) {
return page.waitForFunction(`window.eventRecorder._getEventLog().length >= ${amount || 1}`)
}
export const getEventLog = function(page) {
return page.evaluate(() => {
return window.eventRecorder._getEventLog()
})
}
export const cleanEventLog = function(page) {
return page.evaluate(() => {
return window.eventRecorder._clearEventLog()
})
}
export const startServer = function(buildDir, file) {
return new Promise(resolve => {
const app = express()
app.use('/build', express.static(path.join(__dirname, buildDir)))
app.get('/', (req, res) => {
res.status(200).sendFile(file, { root: __dirname })
})
let server
let port
const retry = e => {
if (e.code === 'EADDRINUSE') {
setTimeout(() => connect, 1000)
}
}
const connect = () => {
port = 0 | (Math.random() * 1000 + 3000)
server = app.listen(port)
server.once('error', retry)
server.once('listening', () => {
return resolve({ server, port })
})
}
connect()
})
}
================================================
FILE: src/content-scripts/__tests__/screenshot-controller.spec.js
================================================
import UIController from '../shooter'
// this test NEEDS to come first because of shitty JSDOM.
// See https://github.com/facebook/jest/issues/1224
it('Registers mouse events', () => {
jest.useFakeTimers()
document.body.innerHTML =
'' + '
UserName
' + '
' + '
Recording finished!
You can copy the code to clipboard right away!
Copy to clipboard
Copied!
×
alt + k to hide
{{ currentSelector }}
================================================
FILE: src/modules/overlay/Selector.vue
================================================
================================================
FILE: src/modules/overlay/constants.js
================================================
export const overlaySelectors = {
OVERLAY_ID: 'headless-recorder-overlay',
SELECTOR_ID: 'headless-recorder-selector',
CURRENT_SELECTOR_CLASS: 'headless-recorder-selected-element',
CURSOR_CAMERA_CLASS: 'headless-recorder-camera-cursor',
FLASH_CLASS: 'headless-recorder-flash',
}
export const overlayActions = {
COPY: 'COPY',
STOP: 'STOP',
CLOSE: 'CLOSE',
PAUSE: 'PAUSE',
UNPAUSE: 'UNPAUSE',
RESTART: 'RESTART',
FULL_SCREENSHOT: 'FULL_SCREENSHOT',
CLIPPED_SCREENSHOT: 'CLIPPED_SCREENSHOT',
ABORT_SCREENSHOT: 'ABORT_SCREENSHOT',
TOGGLE_SCREENSHOT_MODE: 'TOGGLE_SCREENSHOT_MODE',
TOGGLE_SCREENSHOT_CLIPPED_MODE: 'TOGGLE_SCREENSHOT_CLIPPED_MODE',
CLOSE_SCREENSHOT_MODE: 'CLOSE_SCREENSHOT_MODE',
TOGGLE_OVERLAY: 'TOGGLE_OVERLAY',
}
================================================
FILE: src/modules/overlay/index.js
================================================
import { createApp } from 'vue'
import getSelector from '@/services/selector'
import SelectorApp from '@/modules/overlay/Selector.vue'
import OverlayApp from '@/modules/overlay/Overlay.vue'
import { overlaySelectors } from '@/modules/overlay/constants'
export default class Overlay {
constructor({ store }) {
this.overlayApp = null
this.selectorApp = null
this.overlayContainer = null
this.selectorContainer = null
this.mouseOverEvent = null
this.scrollEvent = null
this.isScrolling = false
this.store = store
}
mount({ clear = false, pause = false } = {}) {
if (this.overlayContainer) {
return
}
this.overlayContainer = document.createElement('div')
this.overlayContainer.id = overlaySelectors.OVERLAY_ID
document.body.appendChild(this.overlayContainer)
this.selectorContainer = document.createElement('div')
this.selectorContainer.id = overlaySelectors.SELECTOR_ID
document.body.appendChild(this.selectorContainer)
if (clear) {
this.store.commit('clear')
}
if (pause) {
this.store.commit('pause')
}
this.selectorApp = createApp(SelectorApp)
.use(this.store)
.mount('#' + overlaySelectors.SELECTOR_ID)
this.overlayApp = createApp(OverlayApp)
.use(this.store)
.mount('#' + overlaySelectors.OVERLAY_ID)
this.mouseOverEvent = e => {
const selector = getSelector(e, { dataAttribute: this.store.state.dataAttribute })
this.overlayApp.currentSelector = selector.includes('#' + overlaySelectors.OVERLAY_ID)
? ''
: selector
if (
this.overlayApp.currentSelector &&
(!this.store.state.screenshotMode || this.store.state.screenshotClippedMode)
) {
this.selectorApp.move(e, [overlaySelectors.OVERLAY_ID])
}
}
// Hide selector while the user is scrolling
this.scrollEvent = () => {
this.selectorApp.scrolling = true
window.clearTimeout(this.isScrolling)
this.isScrolling = setTimeout(() => (this.selectorApp.scrolling = false), 66)
}
window.document.addEventListener('mouseover', this.mouseOverEvent)
window.addEventListener('scroll', this.scrollEvent, false)
}
unmount() {
if (!this.overlayContainer) {
return
}
document.body.removeChild(this.overlayContainer)
document.body.removeChild(this.selectorContainer)
this.overlayContainer = null
this.overlayApp = null
this.selectorContainer = null
this.selectorApp = null
window.document.removeEventListener('mouseover', this.mouseOverEvent)
window.removeEventListener('scroll', this.scrollEvent, false)
}
}
================================================
FILE: src/modules/recorder/index.js
================================================
import getSelector from '@/services/selector'
import { recordingControls } from '@/services/constants'
import { overlaySelectors } from '@/modules/overlay/constants'
import { eventsToRecord } from '@/modules/code-generator/constants'
export default class Recorder {
constructor({ store }) {
// this._boundedMessageListener = null
this._eventLog = []
this._previousEvent = null
this._isTopFrame = window.location === window.parent.location
this._isRecordingClicks = true
this.store = store
}
init(cb) {
const events = Object.values(eventsToRecord)
if (!window.pptRecorderAddedControlListeners) {
this._addAllListeners(events)
cb && cb()
window.pptRecorderAddedControlListeners = true
}
if (!window.document.pptRecorderAddedControlListeners && chrome.runtime?.onMessage) {
window.document.pptRecorderAddedControlListeners = true
}
if (this._isTopFrame) {
this._sendMessage({ control: recordingControls.EVENT_RECORDER_STARTED })
this._sendMessage({ control: recordingControls.GET_CURRENT_URL, href: window.location.href })
this._sendMessage({
control: recordingControls.GET_VIEWPORT_SIZE,
coordinates: { width: window.innerWidth, height: window.innerHeight },
})
}
}
_addAllListeners(events) {
const boundedRecordEvent = this._recordEvent.bind(this)
events.forEach(type => window.addEventListener(type, boundedRecordEvent, true))
}
_sendMessage(msg) {
// filter messages based on enabled / disabled features
if (msg.action === 'click' && !this._isRecordingClicks) {
return
}
try {
chrome.runtime && chrome?.runtime?.onMessage
? chrome.runtime.sendMessage(msg)
: this._eventLog.push(msg)
} catch (err) {
console.debug('caught error', err)
}
}
_recordEvent(e) {
if (this._previousEvent && this._previousEvent.timeStamp === e.timeStamp) {
return
}
this._previousEvent = e
// we explicitly catch any errors and swallow them, as none node-type events are also ingested.
// for these events we cannot generate selectors, which is OK
try {
const selector = getSelector(e, { dataAttribute: this.store.state.dataAttribute })
if (selector.includes('#' + overlaySelectors.OVERLAY_ID)) {
return
}
this.store.commit('showRecorded')
this._sendMessage({
selector,
value: e.target.value,
tagName: e.target.tagName,
action: e.type,
keyCode: e.keyCode ? e.keyCode : null,
href: e.target.href ? e.target.href : null,
coordinates: Recorder._getCoordinates(e),
})
} catch (err) {
console.error(err)
}
}
_getEventLog() {
return this._eventLog
}
_clearEventLog() {
this._eventLog = []
}
disableClickRecording() {
this._isRecordingClicks = false
}
enableClickRecording() {
this._isRecordingClicks = true
}
static _getCoordinates(evt) {
const eventsWithCoordinates = {
mouseup: true,
mousedown: true,
mousemove: true,
mouseover: true,
}
return eventsWithCoordinates[evt.type] ? { x: evt.clientX, y: evt.clientY } : null
}
}
================================================
FILE: src/modules/shooter/index.js
================================================
import EventEmitter from 'events'
import getSelector from '@/services/selector'
import { overlayActions, overlaySelectors } from '@/modules/overlay/constants'
const BORDER_THICKNESS = 2
class Shooter extends EventEmitter {
constructor({ isClipped = false, store } = {}) {
super()
this.store = store
this.isClipped = isClipped
this._overlay = null
this._selector = null
this._element = null
this._dimensions = {}
this.currentSelctor = ''
this._boundeMouseMove = this.mousemove.bind(this)
this._boundeMouseOver = this.mouseover.bind(this)
this._boundeMouseUp = this.mouseup.bind(this)
this._boundedKeyUp = this.keyup.bind(this)
}
mouseover(e) {
this.currentSelctor = getSelector(e, { dataAttribute: this.store.state.dataAttribute }).replace(
'.' + overlaySelectors.CURSOR_CAMERA_CLASS,
'body'
)
}
startScreenshotMode() {
if (!this._overlay) {
this._overlay = window.document.createElement('div')
this._overlay.id = 'headless-recorder-shooter'
this._overlay.style.position = 'fixed'
this._overlay.style.top = '0px'
this._overlay.style.left = '0px'
this._overlay.style.width = '100%'
this._overlay.style.height = '100%'
this._overlay.style.pointerEvents = 'none'
this._overlay.style.zIndex = 2147483646
if (this.isClipped) {
this._selector = window.document.createElement('div')
this._selector.id = 'headless-recorder-shooter-outline'
this._selector.style.position = 'fixed'
this._overlay.appendChild(this._selector)
} else {
this._overlay.style.border = `${BORDER_THICKNESS}px dashed rgba(255, 73, 73, 0.7)`
this._overlay.style.background = 'rgba(255, 73, 73, 0.1)'
}
}
if (!this._overlay.parentNode) {
window.document.body.appendChild(this._overlay)
window.document.body.addEventListener('mousemove', this._boundeMouseMove, false)
window.document.body.addEventListener('click', this._boundeMouseUp, false)
window.document.body.addEventListener('keyup', this._boundedKeyUp, false)
window.document.addEventListener('mouseover', this._boundeMouseOver, false)
}
}
stopScreenshotMode() {
if (this._overlay) {
window.document.body.removeChild(this._overlay)
}
this._overlay = this._selector = this._element = null
this._dimensions = {}
}
showScreenshotEffect() {
window.document.body.classList.add(overlaySelectors.FLASH_CLASS)
window.document.body.classList.remove(overlaySelectors.CURSOR_CAMERA_CLASS)
setTimeout(() => window.document.body.classList.remove(overlaySelectors.FLASH_CLASS), 1000)
}
addCameraIcon() {
window.document.body.classList.add(overlaySelectors.CURSOR_CAMERA_CLASS)
}
removeCameraIcon() {
window.document.body.classList.remove(overlaySelectors.CURSOR_CAMERA_CLASS)
}
mousemove(e) {
if (this._element !== e.target) {
this._element = e.target
this._dimensions.top = -window.scrollY
this._dimensions.left = -window.scrollX
let elem = e.target
while (elem && elem !== window.document.body) {
this._dimensions.top += elem.offsetTop
this._dimensions.left += elem.offsetLeft
elem = elem.offsetParent
}
this._dimensions.width = this._element.offsetWidth
this._dimensions.height = this._element.offsetHeight
if (this._selector) {
this._selector.style.top = this._dimensions.top - BORDER_THICKNESS + 'px'
this._selector.style.left = this._dimensions.left - BORDER_THICKNESS + 'px'
this._selector.style.width = this._dimensions.width + 'px'
this._selector.style.height = this._dimensions.height + 'px'
}
}
}
mouseup(e) {
setTimeout(() => {
this.cleanup()
const payload = { raw: e }
if (this.isClipped) {
payload.selector = this.currentSelctor
}
this.emit('click', payload)
}, 100)
}
keyup(e) {
if (e.code !== 'Escape') {
return
}
this.cleanup()
this.removeCameraIcon()
chrome.runtime.sendMessage({ control: overlayActions.ABORT_SCREENSHOT })
}
cleanup() {
window.document.body.removeEventListener('mousemove', this._boundeMouseMove, false)
window.document.body.removeEventListener('click', this._boundeMouseUp, false)
window.document.body.removeEventListener('keyup', this._boundedKeyUp, false)
window.document.removeEventListener('mouseover', this._boundeMouseOver, false)
window.document.body.removeChild(this._overlay)
this._overlay = null
}
}
export default Shooter
================================================
FILE: src/options/OptionsApp.vue
================================================
Recorder
Custom data attribute
Set key code
{{ recordingKeyCodePress ? 'Capturing...' : 'Record Key Stroke' }}
{{ options.code.keyCode }}
What key will be used for capturing input changes. The value here is the key code. This
will not handle multiple keys.
Generator
Wrap code in async function
Set headless in playwright/puppeteer launch options
Add waitForNavigation lines on navigation
Add waitForSelector lines before every
page.click()
Add blank lines between code blocks
Show Playwright tab first
Extension
Use Dark Mode {{ options.extension.darkMode }}
Allow recording of usage telemetry
We only record clicks for basic product development, no website content or input data.
Data is never, ever shared with 3rd parties.
================================================
FILE: src/options/__tests__/App.spec.js
================================================
import { mount } from '@vue/test-utils'
import App from '../OptionsApp'
function createChromeLocalStorageMock(options) {
let ops = options || {}
return {
options,
storage: {
local: {
get: (key, cb) => {
return cb(ops)
},
set: (options, cb) => {
ops = options
cb()
},
},
},
}
}
describe('App.vue', () => {
beforeEach(() => {
window.chrome = null
})
test('it has the correct pristine / empty state', () => {
window.chrome = createChromeLocalStorageMock()
const wrapper = mount(App)
expect(wrapper.element).toMatchSnapshot()
})
test('it loads the default options', () => {
window.chrome = createChromeLocalStorageMock()
const wrapper = mount(App)
expect(wrapper.vm.$data.options.code.wrapAsync).toBeTruthy()
})
test('it has the default key code for capturing inputs as 9 (Tab)', () => {
window.chrome = createChromeLocalStorageMock()
const wrapper = mount(App)
expect(wrapper.vm.$data.options.code.keyCode).toBe(9)
})
test('clicking the button will listen for the next keydown and update the key code option', () => {
const options = { code: { keyCode: 9 } }
window.chrome = createChromeLocalStorageMock(options)
const wrapper = mount(App)
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.find('button').element.click()
const event = new KeyboardEvent('keydown', { keyCode: 16 })
window.dispatchEvent(event)
return wrapper.vm.$nextTick()
})
.then(() => {
expect(wrapper.vm.$data.options.code.keyCode).toBe(16)
})
})
test("it stores and loads the user's edited options", () => {
const options = { code: { wrapAsync: true } }
window.chrome = createChromeLocalStorageMock(options)
const wrapper = mount(App)
return wrapper.vm
.$nextTick()
.then(() => {
const checkBox = wrapper.find('#options-code-wrapAsync')
checkBox.trigger('click')
expect(wrapper.find('.saving-badge').text()).toEqual('Saving...')
return wrapper.vm.$nextTick()
})
.then(() => {
// we need to simulate a page reload
wrapper.vm.load()
return wrapper.vm.$nextTick()
})
.then(() => {
const checkBox = wrapper.find('#options-code-wrapAsync')
return expect(checkBox.element.checked).toBeFalsy()
})
})
})
================================================
FILE: src/options/__tests__/__snapshots__/App.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App.vue it has the correct pristine / empty state 1`] = `
`;
================================================
FILE: src/options/main.js
================================================
import { createApp } from 'vue'
import App from './OptionsApp.vue'
import '@/assets/tailwind.css'
createApp(App).mount('#app')
================================================
FILE: src/popup/PopupApp.vue
================================================
Copy to clipboard
Copied!
================================================
FILE: src/popup/__tests__/App.spec.js
================================================
import { shallowMount } from '@vue/test-utils'
import App from '../PopupApp'
const chrome = {
storage: {
local: {
get: jest.fn(),
},
},
extension: {
connect: jest.fn(),
},
}
describe('App.vue', () => {
test('it has the correct pristine / empty state', () => {
window.chrome = chrome
const wrapper = shallowMount(App)
expect(wrapper.element).toMatchSnapshot()
})
})
================================================
FILE: src/popup/__tests__/__snapshots__/App.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App.vue it has the correct pristine / empty state 1`] = `
`;
================================================
FILE: src/popup/main.js
================================================
import { createApp } from 'vue'
import VueHighlightJS from 'vue3-highlightjs'
import '@/assets/code.css'
import '@/assets/tailwind.css'
import App from './PopupApp.vue'
createApp(App)
.use(VueHighlightJS)
.mount('#app')
================================================
FILE: src/services/__tests__/analytics.spec.js
================================================
import analytics from '../analytics'
Object.defineProperty(window, '_gaq', {
writable: true,
value: {
push: jest.fn(),
},
})
describe('trackPageView', () => {
beforeEach(() => {
window._gaq.push.mockClear()
})
it('has telemetry enabled', () => {
const options = {
extension: {
telemetry: true,
},
}
analytics.trackPageView(options)
expect(window._gaq.push.mock.calls.length).toBe(1)
})
it('does not have telemetry enabled', () => {
const options = {
extension: {
telemetry: false,
},
}
analytics.trackPageView(options)
expect(window._gaq.push.mock.calls.length).toBe(0)
})
})
================================================
FILE: src/services/__tests__/badge.spec.js
================================================
import badge from '../badge'
global.chrome = {
browserAction: {
setIcon: jest.fn(),
setBadgeText: jest.fn(text => (inputText.data = text)),
setBadgeBackgroundColor: jest.fn(),
},
}
const inputText = {
data: '',
}
beforeEach(() => {
chrome.browserAction.setIcon.mockClear()
chrome.browserAction.setBadgeBackgroundColor.mockClear()
})
describe('start', () => {
it('sets recording icon', () => {
badge.start()
expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)
})
})
describe('pause', () => {
it('sets pause icon', () => {
badge.pause()
expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)
})
})
describe('setText', () => {
it('sets selected text on the badge', () => {
badge.setText('data')
expect(inputText.data.text).toBe('data')
})
})
describe('reset', () => {
it('reset text to empty string', () => {
badge.reset()
badge.setText('')
expect(inputText.data.text).toBe('')
})
})
describe('wait', () => {
it('changes text to wait', () => {
badge.wait()
badge.setText('wait')
expect(chrome.browserAction.setBadgeBackgroundColor.mock.calls.length).toBe(1)
expect(inputText.data.text).toBe('wait')
})
})
describe('stop', () => {
it('stops recording and sets result text', () => {
badge.stop('data')
expect(chrome.browserAction.setIcon.mock.calls.length).toBe(1)
expect(chrome.browserAction.setBadgeBackgroundColor.mock.calls.length).toBe(1)
expect(inputText.data.text).toBe('data')
})
})
================================================
FILE: src/services/__tests__/browser.spec.js
================================================
import browser from '../browser'
const activeTab = { id: 1, active: true }
const copyText = {
data: '',
}
const cookies = [
{
name: 'checkly'
}
]
window.chrome = {
tabs: {
create: jest.fn(),
query: jest.fn((options, cb) => (cb([activeTab]))),
executeScript: jest.fn((options, cb) => (cb(options))),
sendMessage: jest.fn(),
},
extension: {
connect: jest.fn(),
},
runtime: {
openOptionsPage: jest.fn()
},
cookies: {
getAll: jest.fn((options, cb) => (cb(cookies)))
}}
global.navigator.permissions = {
query: jest
.fn()
.mockImplementationOnce(() => Promise.resolve({ state: 'granted' })),
};
global.navigator.clipboard = {
writeText: jest.fn(text => (copyText.data = text))
};
beforeEach(() => {
window?.chrome?.tabs.create.mockClear()
window?.chrome?.extension.connect.mockClear()
window?.chrome?.runtime.openOptionsPage.mockClear()
window?.chrome?.tabs.query.mockClear()
})
describe('getActiveTab', () => {
it('returns the active tab', async () => {
const activeTab = await browser.getActiveTab()
expect(activeTab).toBe(activeTab)
expect(window.chrome.tabs.query.mock.calls.length).toBe(1)
})
})
describe('copyToClipboard', () => {
it('copies text to clipboard', async () => {
await browser.copyToClipboard('data')
expect(window.navigator.clipboard.writeText.mock.calls.length).toBe(1)
})
})
describe('injectContentScript', () => {
it('executes content script', async () => {
await browser.injectContentScript()
expect(window.chrome.tabs.executeScript.mock.calls.length).toBe(1)
})
})
describe('getChecklyCookie', () => {
it('returns checkly cookie', async () => {
await browser.getChecklyCookie()
expect(window.chrome.cookies.getAll.mock.calls.length).toBe(1)
})
})
describe('openChecklyRunner', () => {
it('is not logged in', () => {
browser.openChecklyRunner({code: 1, runner: 2, isLoggedIn: false})
expect(window.chrome.tabs.create.mock.calls.length).toBe(1)
})
it('is logged in', () => {
browser.openChecklyRunner({code: 1, runner: 2, isLoggedIn: true})
expect(window.chrome.tabs.create.mock.calls.length).toBe(1)
})
})
describe('getBackgroundBus', () => {
it('gets backgorund bus', async () => {
browser.getBackgroundBus()
expect(window.chrome.extension.connect.mock.calls.length).toBe(1)
})
})
describe('openOptionsPage', () => {
it('calls function that opens options page', async () => {
browser.openOptionsPage()
expect(window.chrome.runtime.openOptionsPage.mock.calls.length).toBe(1)
})
})
describe('openHelpPage', () => {
it('calls function that creates new tab and opens help page', async () => {
browser.openHelpPage()
expect(window.chrome.tabs.create.mock.calls.length).toBe(1)
})
})
================================================
FILE: src/services/__tests__/constants.spec.js
================================================
import { isDarkMode } from '../constants'
function setMatchMediaMock(matches) {
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn(() => ({ matches })),
})
}
describe('isDarkMode()', () => {
beforeEach(() => {
window?.matchMedia?.mockClear()
})
it('has darkMode enabled', () => {
setMatchMediaMock(true)
expect(isDarkMode()).toBe(true)
})
it('has darkMode disabled', () => {
setMatchMediaMock(false)
expect(isDarkMode()).toBe(false)
})
it('does not have matchMedia browser API', () => {
window.matchMedia = null
expect(isDarkMode()).toBe(false)
})
})
================================================
FILE: src/services/__tests__/storage.spec.js
================================================
import storage from '../storage'
const store = {
token: 'xxx',
name: 'lionel',
}
beforeEach(() => {
window.chrome = {
storage: {
local: {
get: jest.fn((keys, cb) => {
if (typeof keys === 'string') {
return cb(store[keys])
}
const results = []
if (Array.isArray(keys)) {
keys.forEach(key => {
results.push(store[key])
})
return cb(results)
}
}),
remove: jest.fn((keys, cb) => {
delete store[keys];
return cb(store)
}),
set: jest.fn((props, cb) => {
const newStore = { ...store, ...props }
return cb(newStore)
}),
},
},
}
window.chrome.storage.local.get.mockClear()
window.chrome.storage.local.set.mockClear()
window.chrome.storage.local.remove.mockClear()
})
describe('get', () => {
it('return a single value', async () => {
const token = await storage.get('token')
expect(token).toBe(store.token)
expect(window.chrome.storage.local.get.mock.calls.length).toBe(1)
})
it('return multiple values', async () => {
const [token, name] = await storage.get(['token', 'name'])
expect(token).toBe(store.token)
expect(name).toBe(store.name)
expect(window.chrome.storage.local.get.mock.calls.length).toBe(1)
})
it('return undefined when value not found', async () => {
const nothing = await storage.get('nothing')
expect(nothing).toBe(undefined)
})
it('does not have browser storage available', async () => {
try {
window.chrome.storage = null
await storage.get('token');
} catch (e) {
expect(e).toEqual('Browser storage not available');
}
})
})
describe('remove', () => {
it('removes a value', async () => {
const store = await storage.remove('token')
expect(store.token).toBe(undefined)
expect(window.chrome.storage.local.remove.mock.calls.length).toBe(1)
})
it('does not have browser storage available', async () => {
try {
window.chrome.storage = null
await storage.remove('token');
} catch (e) {
expect(e).toEqual('Browser storage not available');
}
})
})
describe('set', () => {
it('set a new value or values', async () => {
const newStore = await storage.set({age: 1, country: 2})
expect(newStore.age).toBe(1)
expect(newStore.country).toBe(2)
expect(window.chrome.storage.local.set.mock.calls.length).toBe(1)
})
it('does not have browser storage available', async () => {
try {
window.chrome.storage = null
await storage.set({age: 1, country: 2});
} catch (e) {
expect(e).toEqual('Browser storage not available');
}
})
})
================================================
FILE: src/services/analytics.js
================================================
export default {
trackEvent({ event, options }) {
if (options?.extension?.telemetry) {
window?._gaq?.push(['_trackEvent', event, 'clicked'])
}
},
trackPageView(options) {
if (options?.extension?.telemetry) {
window?._gaq?.push(['_trackPageview'])
}
},
}
================================================
FILE: src/services/badge.js
================================================
const DEFAULT_COLOR = '#45C8F1'
const RECORDING_COLOR = '#FF0000'
const DEFAULT_LOGO = './images/logo.png'
const RECORDING_LOGO = './images/logo-red.png'
const PAUSE_LOGO = './images/logo-yellow.png'
export default {
stop(text) {
chrome.browserAction.setIcon({ path: DEFAULT_LOGO })
chrome.browserAction.setBadgeBackgroundColor({ color: DEFAULT_COLOR })
this.setText(text)
},
reset() {
this.setText('')
},
setText(text) {
chrome.browserAction.setBadgeText({ text })
},
pause() {
chrome.browserAction.setIcon({ path: PAUSE_LOGO })
},
start() {
chrome.browserAction.setIcon({ path: RECORDING_LOGO })
},
wait() {
chrome.browserAction.setBadgeBackgroundColor({ color: RECORDING_COLOR })
this.setText('wait')
},
}
================================================
FILE: src/services/browser.js
================================================
const CONTENT_SCRIPT_PATH = 'js/content-script.js'
const RUN_URL = 'https://app.checklyhq.com/checks/new/browser'
const DOCS_URL = 'https://www.checklyhq.com/docs/headless-recorder'
const SIGNUP_URL =
'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'
export default {
getActiveTab() {
return new Promise(function(resolve) {
chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => resolve(tab))
})
},
async sendTabMessage({ action, value, clean } = {}) {
const tab = await this.getActiveTab()
chrome.tabs.sendMessage(tab.id, { action, value, clean })
},
injectContentScript() {
return new Promise(function(resolve) {
chrome.tabs.executeScript({ file: CONTENT_SCRIPT_PATH, allFrames: false }, res =>
resolve(res)
)
})
},
copyToClipboard(text) {
return navigator.permissions.query({ name: 'clipboard-write' })
.then(result => {
if (result.state !== 'granted' && result.state !== 'prompt') {
return Promise.reject()
}
navigator.clipboard.writeText(text)
})
},
getChecklyCookie() {
return new Promise(function(resolve) {
chrome.cookies.getAll({}, res =>
resolve(res.find(cookie => cookie.name.startsWith('checkly_has_account')))
)
})
},
getBackgroundBus() {
return chrome.extension.connect({ name: 'recordControls' })
},
openOptionsPage() {
chrome.runtime.openOptionsPage?.()
},
openHelpPage() {
chrome.tabs.create({ url: DOCS_URL })
},
openChecklyRunner({ code, runner, isLoggedIn }) {
if (!isLoggedIn) {
chrome.tabs.create({ url: SIGNUP_URL })
return
}
const script = encodeURIComponent(btoa(code))
const url = `${RUN_URL}?framework=${runner}&script=${script}`
chrome.tabs.create({ url })
},
}
================================================
FILE: src/services/constants.js
================================================
export const recordingControls = {
EVENT_RECORDER_STARTED: 'EVENT_RECORDER_STARTED',
GET_VIEWPORT_SIZE: 'GET_VIEWPORT_SIZE',
GET_CURRENT_URL: 'GET_CURRENT_URL',
GET_SCREENSHOT: 'GET_SCREENSHOT',
}
export const popupActions = {
START: 'START',
STOP: 'STOP',
CLEAN_UP: 'CLEAN_UP',
PAUSE: 'PAUSE',
UN_PAUSE: 'UN_PAUSE',
}
export const isDarkMode = () =>
window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false
================================================
FILE: src/services/selector.js
================================================
import { finder } from '@medv/finder/finder.js'
export default function selector(e, { dataAttribute } = {}) {
if (dataAttribute && e.target.getAttribute(dataAttribute)) {
return `[${dataAttribute}="${e.target.getAttribute(dataAttribute)}"]`
}
if (e.target.id) {
return `#${e.target.id}`
}
return finder(e.target, {
seedMinLength: 5,
optimizedMinLength: e.target.id ? 2 : 10,
attr: name => name === dataAttribute,
})
}
================================================
FILE: src/services/storage.js
================================================
export default {
get(keys) {
if (!chrome.storage || !chrome.storage.local) {
return Promise.reject('Browser storage not available')
}
return new Promise(resolve => chrome.storage.local.get(keys, props => resolve(props)))
},
set(props) {
if (!chrome.storage || !chrome.storage.local) {
return Promise.reject('Browser storage not available')
}
return new Promise(resolve => chrome.storage.local.set(props, res => resolve(res)))
},
remove(keys) {
if (!chrome.storage || !chrome.storage.local) {
return Promise.reject('Browser storage not available')
}
return new Promise(resolve => chrome.storage.local.remove(keys, res => resolve(res)))
},
}
================================================
FILE: src/store/index.js
================================================
import { createStore } from 'vuex'
import { overlayActions } from '@/modules/overlay/constants'
function clearState(state) {
state.isClosed = false
state.isPaused = false
state.isStopped = false
state.screenshotMode = false
state.screenshotClippedMode = false
state.recording = []
}
const store = createStore({
state() {
return {
isCopying: false,
isClosed: false,
isPaused: false,
isStopped: false,
darkMode: false,
screenshotMode: false,
screenshotClippedMode: false,
hasRecorded: false,
dataAttribute: '',
takeScreenshot: false,
recording: [],
}
},
mutations: {
showRecorded(state) {
state.hasRecorded = true
setTimeout(() => (state.hasRecorded = false), 250)
},
showCopy(state) {
state.isCopying = true
setTimeout(() => (state.isCopying = false), 500)
},
takeScreenshot(state) {
state.takeScreenshot = true
},
setDataAttribute(state, dataAttribute) {
state.dataAttribute = dataAttribute
},
setDarkMode(state, darkMode) {
state.darkMode = darkMode
},
setRecording(state, recording) {
state.recording = recording
},
unpause(state) {
state.isPaused = false
chrome.runtime.sendMessage({ control: overlayActions.UNPAUSE })
},
pause(state) {
state.isPaused = true
chrome.runtime.sendMessage({ control: overlayActions.PAUSE })
},
close(state) {
state.isClosed = true
chrome.runtime.sendMessage({ control: overlayActions.CLOSE })
},
restart(state) {
clearState(state)
chrome.runtime.sendMessage({ control: overlayActions.RESTART })
},
clear(state) {
clearState(state)
},
stop(state) {
state.isStopped = true
chrome.runtime.sendMessage({ control: overlayActions.STOP })
},
copy() {
chrome.runtime.sendMessage({ control: overlayActions.COPY })
},
toggleScreenshotMode(state) {
state.screenshotMode = !state.screenshotMode
},
startScreenshotMode(state, isClipped = false) {
chrome.runtime.sendMessage({
control: isClipped ? overlayActions.CLIPPED_SCREENSHOT : overlayActions.FULL_SCREENSHOT,
})
state.screenshotClippedMode = isClipped
state.screenshotMode = true
},
stopScreenshotMode(state) {
state.screenshotMode = false
},
},
})
// TODO: load state from local storage
chrome.storage.onChanged.addListener(({ options = null, recording = null }) => {
if (options) {
store.commit('setDarkMode', options.newValue.extension.darkMode)
}
if (recording) {
store.commit('setRecording', recording.newValue)
}
})
export default store
================================================
FILE: src/views/Home.vue
================================================
No recorded events yet
Record browser events by clicking record button
================================================
FILE: src/views/Recording.vue
================================================
Headless recorder currently recording your browser events.
{{
isPaused ? 'RESUME' : 'PAUSE'
}}
RESTART
================================================
FILE: src/views/Results.vue
================================================
================================================
FILE: tailwind.config.js
================================================
const colors = require('tailwindcss/colors')
module.exports = {
purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
presets: [],
darkMode: 'class', // or 'media' or 'class'
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
gray: {
hover: '#474747',
lightest: '#F9FAFC',
lighter: '#EFF2F7',
light: '#E0E6ED',
DEFAULT: '#8492A6',
dark: '#3C4858',
darkish: '#677281',
darkest: '#1F2D3D',
new: '#697280',
},
blue: {
lightest: '#EEF8FF',
light: '#F0F8FF',
DEFAULT: '#45C8F1',
dark: '#18c2f8',
},
red: {
DEFAULT: '#FF4949',
},
pink: {
DEFAULT: '#FF659D',
},
black: {
light: '#2E2E2E',
dark: '#000',
DEFAULT: '#161616',
shady: '#1F1F1F',
},
yellow: {
DEFAULT: '#ffc82c',
},
white: colors.white,
green: colors.emerald,
indigo: colors.indigo,
purple: colors.violet,
},
spacing: {
px: '1px',
0: '0px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
13: '3.188rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
21: '5.375rem',
24: '6rem',
28: '7rem',
32: '8rem',
34: '8.6rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
animation: {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'bounce 1s infinite',
},
backdropBlur: theme => theme('blur'),
backdropBrightness: theme => theme('brightness'),
backdropContrast: theme => theme('contrast'),
backdropGrayscale: theme => theme('grayscale'),
backdropHueRotate: theme => theme('hueRotate'),
backdropInvert: theme => theme('invert'),
backdropOpacity: theme => theme('opacity'),
backdropSaturate: theme => theme('saturate'),
backdropSepia: theme => theme('sepia'),
backgroundColor: theme => theme('colors'),
backgroundImage: {
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: theme => theme('opacity'),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
blur: {
0: '0',
sm: '4px',
DEFAULT: '8px',
md: '12px',
lg: '16px',
xl: '24px',
'2xl': '40px',
'3xl': '64px',
},
brightness: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
200: '2',
},
borderColor: theme => ({
...theme('colors'),
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
borderOpacity: theme => theme('opacity'),
borderRadius: {
none: '0px',
sm: '0.188rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
borderWidth: {
DEFAULT: '1px',
0: '0px',
2: '2px',
4: '4px',
8: '8px',
},
boxShadow: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
none: 'none',
},
contrast: {
0: '0',
50: '.5',
75: '.75',
100: '1',
125: '1.25',
150: '1.5',
200: '2',
},
container: {},
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
wait: 'wait',
text: 'text',
move: 'move',
help: 'help',
'not-allowed': 'not-allowed',
},
divideColor: theme => theme('borderColor'),
divideOpacity: theme => theme('borderOpacity'),
divideWidth: theme => theme('borderWidth'),
dropShadow: {
sm: '0 1px 1px rgba(0,0,0,0.05)',
DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
'2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
none: '0 0 #0000',
},
fill: { current: 'currentColor' },
grayscale: {
0: '0',
DEFAULT: '100%',
},
hueRotate: {
'-180': '-180deg',
'-90': '-90deg',
'-60': '-60deg',
'-30': '-30deg',
'-15': '-15deg',
0: '0deg',
15: '15deg',
30: '30deg',
60: '60deg',
90: '90deg',
180: '180deg',
},
invert: {
0: '0',
DEFAULT: '100%',
},
flex: {
1: '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
},
flexGrow: {
0: '0',
DEFAULT: '1',
},
flexShrink: {
0: '0',
DEFAULT: '1',
},
fontFamily: {
sans: [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
},
fontWeight: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
gap: theme => theme('spacing'),
gradientColorStops: theme => theme('colors'),
gridAutoColumns: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
gridAutoRows: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
'span-full': '1 / -1',
},
gridColumnEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridColumnStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridRow: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-full': '1 / -1',
},
gridRowStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
gridRowEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
gridTemplateColumns: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))',
},
gridTemplateRows: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
},
height: theme => ({
auto: 'auto',
...theme('spacing'),
'100': '27rem',
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
full: '100%',
screen: '100vh',
}),
inset: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
'-1/2': '-50%',
'-1/3': '-33.333333%',
'-2/3': '-66.666667%',
'-1/4': '-25%',
'-2/4': '-50%',
'-3/4': '-75%',
'-full': '-100%',
}),
keyframes: {
spin: {
to: {
transform: 'rotate(360deg)',
},
},
ping: {
'75%, 100%': {
transform: 'scale(2)',
opacity: '0',
},
},
pulse: {
'50%': {
opacity: '.5',
},
},
bounce: {
'0%, 100%': {
transform: 'translateY(-25%)',
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
},
'50%': {
transform: 'none',
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
},
},
},
letterSpacing: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
}),
maxHeight: theme => ({
...theme('spacing'),
full: '100%',
screen: '100vh',
}),
maxWidth: (theme, { breakpoints }) => ({
none: 'none',
0: '0rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
full: '100%',
min: 'min-content',
max: 'max-content',
prose: '65ch',
...breakpoints(theme('screens')),
}),
minHeight: {
0: '0px',
full: '100%',
screen: '100vh',
},
minWidth: {
0: '0px',
full: '100%',
min: 'min-content',
max: 'max-content',
},
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
opacity: {
0: '0',
5: '0.05',
10: '0.1',
20: '0.2',
25: '0.25',
30: '0.3',
40: '0.4',
50: '0.5',
60: '0.6',
70: '0.7',
75: '0.75',
80: '0.8',
90: '0.9',
95: '0.95',
100: '1',
},
order: {
first: '-9999',
last: '9999',
none: '0',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
outline: {
none: ['2px solid transparent', '2px'],
white: ['2px dotted white', '2px'],
black: ['2px dotted black', '2px'],
},
padding: theme => theme('spacing'),
placeholderColor: theme => theme('colors'),
placeholderOpacity: theme => theme('opacity'),
ringColor: theme => ({
DEFAULT: theme('colors.blue.500', '#3b82f6'),
...theme('colors'),
}),
ringOffsetColor: theme => theme('colors'),
ringOffsetWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
ringOpacity: theme => ({
DEFAULT: '0.5',
...theme('opacity'),
}),
ringWidth: {
DEFAULT: '3px',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
rotate: {
'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'-12': '-12deg',
'-6': '-6deg',
'-3': '-3deg',
'-2': '-2deg',
'-1': '-1deg',
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
45: '45deg',
90: '90deg',
180: '180deg',
},
saturate: {
0: '0',
50: '.5',
100: '1',
150: '1.5',
200: '2',
},
scale: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
},
sepia: {
0: '0',
DEFAULT: '100%',
},
skew: {
'-12': '-12deg',
'-6': '-6deg',
'-3': '-3deg',
'-2': '-2deg',
'-1': '-1deg',
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
},
space: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
}),
stroke: {
current: 'currentColor',
},
strokeWidth: {
0: '0',
1: '1',
2: '2',
},
textColor: theme => theme('colors'),
textOpacity: theme => theme('opacity'),
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
},
transitionDelay: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
transitionDuration: {
DEFAULT: '150ms',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
transitionProperty: {
none: 'none',
all: 'all',
DEFAULT:
'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
colors: 'background-color, border-color, color, fill, stroke',
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
},
transitionTimingFunction: {
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
translate: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
'-1/2': '-50%',
'-1/3': '-33.333333%',
'-2/3': '-66.666667%',
'-1/4': '-25%',
'-2/4': '-50%',
'-3/4': '-75%',
'-full': '-100%',
}),
width: theme => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vw',
min: 'min-content',
max: 'max-content',
}),
zIndex: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
},
},
variantOrder: [
'first',
'last',
'odd',
'even',
'visited',
'checked',
'group-hover',
'group-focus',
'focus-within',
'hover',
'focus',
'focus-visible',
'active',
'disabled',
],
variants: {
accessibility: ['responsive', 'focus-within', 'focus'],
alignContent: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
animation: ['responsive'],
appearance: ['responsive'],
backdropBlur: ['responsive'],
backdropBrightness: ['responsive'],
backdropContrast: ['responsive'],
backdropDropShadow: ['responsive'],
backdropFilter: ['responsive'],
backdropGrayscale: ['responsive'],
backdropHueRotate: ['responsive'],
backdropInvert: ['responsive'],
backdropSaturate: ['responsive'],
backdropSepia: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundBlendMode: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundImage: ['responsive'],
backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
blur: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidth: ['responsive'],
boxDecorationBreak: ['responsive'],
boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
boxSizing: ['responsive'],
brightness: ['responsive'],
clear: ['responsive'],
container: ['responsive'],
contrast: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
divideColor: ['responsive', 'dark'],
divideOpacity: ['responsive', 'dark'],
divideStyle: ['responsive'],
divideWidth: ['responsive'],
dropShadow: ['responsive'],
fill: ['responsive'],
filter: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: ['responsive'],
flexWrap: ['responsive'],
float: ['responsive'],
fontFamily: ['responsive'],
fontSize: ['responsive'],
fontSmoothing: ['responsive'],
fontStyle: ['responsive'],
fontVariantNumeric: ['responsive'],
fontWeight: ['responsive'],
gap: ['responsive'],
gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
grayscale: ['responsive'],
gridAutoColumns: ['responsive'],
gridAutoFlow: ['responsive'],
gridAutoRows: ['responsive'],
gridColumn: ['responsive'],
gridColumnEnd: ['responsive'],
gridColumnStart: ['responsive'],
gridRow: ['responsive'],
gridRowEnd: ['responsive'],
gridRowStart: ['responsive'],
gridTemplateColumns: ['responsive'],
gridTemplateRows: ['responsive'],
height: ['responsive'],
hueRotate: ['responsive'],
inset: ['responsive'],
invert: ['responsive'],
isolation: ['responsive'],
justifyContent: ['responsive'],
justifyItems: ['responsive'],
justifySelf: ['responsive'],
letterSpacing: ['responsive'],
lineHeight: ['responsive'],
listStylePosition: ['responsive'],
listStyleType: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
mixBlendMode: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
order: ['responsive'],
outline: ['responsive', 'focus-within', 'focus'],
overflow: ['responsive'],
overscrollBehavior: ['responsive'],
padding: ['responsive'],
placeContent: ['responsive'],
placeItems: ['responsive'],
placeSelf: ['responsive'],
placeholderColor: ['responsive', 'dark', 'focus'],
placeholderOpacity: ['responsive', 'dark', 'focus'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
ringWidth: ['responsive', 'focus-within', 'focus'],
rotate: ['responsive', 'hover', 'focus'],
saturate: ['responsive'],
scale: ['responsive', 'hover', 'focus'],
sepia: ['responsive'],
skew: ['responsive', 'hover', 'focus'],
space: ['responsive'],
stroke: ['responsive'],
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
textOverflow: ['responsive'],
textTransform: ['responsive'],
transform: ['responsive'],
transformOrigin: ['responsive'],
transitionDelay: ['responsive'],
transitionDuration: ['responsive'],
transitionProperty: ['responsive'],
transitionTimingFunction: ['responsive'],
translate: ['responsive', 'hover', 'focus'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive', 'focus-within', 'focus'],
},
plugins: [],
}
================================================
FILE: vue.config.js
================================================
module.exports = {
css: {
extract: false,
},
pages: {
popup: {
template: 'public/browser-extension.html',
entry: './src/popup/main.js',
title: 'Popup',
},
options: {
template: 'public/browser-extension.html',
entry: './src/options/main.js',
title: 'Options',
},
},
pluginOptions: {
browserExtension: {
componentOptions: {
background: {
entry: 'src/background/index.js',
},
contentScripts: {
entries: {
'content-script': ['src/content-scripts/index.js'],
},
},
},
},
},
}
to 
to indicate it is ready for more input from you.**
5. Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.
### ⌨️ Shortcuts
- `alt + k`: Toggle overlay
- `alt + shift + F`: Take full page screenshot
- `alt + shift + E`: Take element screenshot
