GitXplorerGitXplorer
k

glide-api-browser-extension-starter

public
1 stars
0 forks
1 issues

Commits

List of commits on branch main.
Unverified
a2686e0a9d6d713b5c6614c278056bd4df5891ba

updating readme with screenshots

kknmurphy committed 2 months ago
Verified
92fa96c6104ec4632e90ea1a2c91d98331a8234b

Update FUNDING.yml

kknmurphy committed 2 months ago
Verified
a9c5641b3bf64d74ab3691b3d6b2330ebf261a5c

Create FUNDING.yml

kknmurphy committed 2 months ago
Unverified
ad063a5e5125ec1578896a8f29eed7460ffbb5ab

adding template code

kknmurphy committed 2 months ago
Unverified
93203d06a097453c6a02d9df3593adf741bc809b

updates to delete confirmation for glide configs, scroll options to the top of after adding a new config

kknmurphy committed 2 months ago
Unverified
7751476be75178b295a486bcce4ed9e4c3e73b51

reordered options page. multiple configs working. deleting configs not working.

kknmurphy committed 2 months ago

README

The README file for this repository.

Glide API Browser Extension Starter

A browser extension that allows you to easily add rows to your Glide tables directly from your browser.

Getting Started with this Template

  1. Click the "Use this template" button above
  2. Clone your new repository
  3. Navigate to the src directory:
cd src
  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev

The extension will be loaded in development mode. You can now make changes to the code and see them reflected in real-time.

Features

  • Add rows to Glide tables with a simple form interface
  • Save multiple table configurations
  • Parse Glide table configuration code automatically
  • Secure storage of API tokens

Usage Guide

First Time Setup

When you first open the extension, you'll see the welcome screen:

First Start

Click "Open Options" to configure your Glide tables.

Adding Table Configurations

In the options page, you can add new table configurations:

Add Configuration

Fill in your API configuration details:

API Configuration Details

You can add multiple configurations for different tables:

Multiple Configurations

Using the Extension

  1. Click the extension icon and choose your configuration:

Choose Configuration

  1. The form will be automatically created based on your table structure:

Auto Created Form

  1. Fill in the form and submit. You'll see a success message when the row is added:

Success Message

Managing Configurations

You can delete configurations you no longer need:

Delete Configuration

Setup

  1. Navigate to the src directory:
cd src
  1. Install dependencies:
pnpm install
  1. Run the development server:
# For Chrome/Edge/Chromium browsers
pnpm dev

(Support for Firefox coming soon, I haven't had a chance to test it yet)

Development

This extension is built using:

  • WXT - Modern browser extension framework
  • Vue.js - UI framework
  • @glideapps/tables - Official Glide Tables SDK

If you want to avoid having to re-enter the configruation details in the development environment, you can create a file in the src directory called web-ext.config.ts with the following content:

import { defineRunnerConfig } from 'wxt';

export default defineRunnerConfig({
    chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
});

This will create a Chrome profile and use it for development. Which will preserve your extension options data even if you start or stop the development server. (huge time saver!)

Build

To build the extension for production, from the src directory:

# For Chrome/Edge/Chromium browsers
pnpm build

The built extension will be in the .output directory.

Project Structure

src/
├── entrypoints/       # Extension entry points (popup, options, background)
├── components/        # Shared Vue components
├── lib/              # Shared utilities
├── assets/           # Static assets
├── styles/           # Global styles
└── wxt.config.ts     # WXT configuration

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

License

MIT License - feel free to modify and share!

Support