PigQuery

Intro

A Chrome Extension offering some BigQuery enhancements.

Features

• Insert saved queries and query snippets.
• Share queries via URL without saving.
• Open external sites related to table cell data.
• Copy table cell content to clipboard.
• Parse/format table cell content.

Screenshots

Development

Setup for development

1. Install dependencies:

   npm install

2. Build the extension:

   npm run build

   This bundles all source files and dependencies into the dist/ directory using esbuild.

3. Load the extension in Chrome:

   • Go to chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the project root directory (contains manifest.json)

4. Development workflow:

   • After making changes to source files, run npm run build to rebuild
   • Click the extension icon to open the popup, which includes a "Reload Extension" button in the Developer section
   • Use this button to quickly reload the extension without visiting chrome://extensions

Build commands

# Development build (with sourcemaps)
npm run build

# Production build (minified, no sourcemaps)
npm run build:prod

# Watch mode (auto-rebuild on file changes)
npm run watch

Code quality

# Check for linting issues
npm run lint

# Auto-fix linting issues
npm run lint:fix

# Check code formatting
npm run format:check

# Auto-format code
npm run format

Testing

# Run unit tests
npm test

# Run tests in watch mode (auto-rerun on file changes)
npm run test:watch

# Run tests with coverage report
npm run test:coverage

# Run integration tests
npm run integration

# Run integration tests in CI mode
npm run integration:ci

Build for distribution

To create a production build and pack the extension:

npm run pack

Requirements:

• The privatekey file must exist in the project root (used to sign the .crx)
• Chrome must be installed at /Applications/Google Chrome.app/ (macOS)

What it does:

1. Runs npm run build:prod to create minified bundles in dist/
2. Creates a build/dev/ directory with:
   • Bundled files from dist/
   • Manifest, icons, locales, and license files
3. Uses Chrome to create a signed .crx file: pigquery-{version}.crx

Testing the production build: You can test the production build by loading the build/prod/ directory unpacked in Chrome.

Demo video & screenshots

Setup

1. Install Playwright:

   npm install
   npx playwright install ffmpeg

2. Set up a local Chrome profile:

   • Build the extension first:

     npm run build

   • Run the script once:

     npm run browser

   • In the Chrome window that opens:
     • Log in to BigQuery
     • Go to chrome://extensions
     • Enable "Developer mode"
     • Click "Load unpacked" and select the build/dev directory
   • Close Chrome

Note: The profile is saved locally in the profile/ directory.

Recording a demo video and taking screenshots

npm run record -- --lang en
npm run record -- --lang de