Definer Word Logger

A private, self-hosted service to save words and AI-generated definitions from the Definer Browser Extension to a personal Google Sheet.

🚀 Setup Guide

Follow these steps to deploy your own private version of the word logger.

Part 1: Deploy to Vercel

Click the button below to clone this repository and deploy it to Vercel.

You will be prompted to add Environment Variables during setup. We will gather all the required values in the next steps.

---

Part 2: Create and Configure Google Sheet

1. Create Your Private Sheet

   • Use this link to create a private copy of the Google Sheet template: Google Sheet Template Link

2. Get Your Apps Script URL

   • In your new sheet, go to Extensions > Apps Script.
   • Click the blue Deploy button and select New deployment.
   • Click the gear icon ⚙️ and choose Web app.
   • Configure the deployment:
     • Execute as: Me (your@email.com)
     • Who has access: Anyone
   • Click Deploy.
   • Authorize Access: Follow the prompts to authorize the script. You may need to click "Advanced" and "Go to... (unsafe)".
   • After authorization, copy the Web app URL. This is your GOOGLE_SCRIPT_URL.

---

Part 3: Configure Vercel Environment Variables

In your Vercel project dashboard, go to Settings > Environment Variables and add the following four variables:

1. GOOGLE_SCRIPT_URL

   • Paste the Web app URL you copied from Google Apps Script.

2. LIST_PASSWORD

   • Create a strong password to protect your word list page (e.g., https://your-app.vercel.app/list).

3. LOG_SECRET_KEY

   • Create a strong, secret key or password. This key prevents others from being able to save words to your sheet. It must be included in the Definer extension URL.

4. GEMINI_API_KEY

   • This is required for the "AI Define" feature.
   • Go to Google AI Studio to create a free API key.

After saving the variables, Vercel may require you to manually trigger a redeployment (look for a notification).

---

Part 4: Configure the Definer Extension

1. Open the Definer extension's settings.

2. Go to Sources > Custom.

3. Set the URL. Replace your-app-name with your Vercel project name and YOUR_SECRET_KEY with the LOG_SECRET_KEY you created.

      https://your-app-name.vercel.app/api/log?word={{str}}&sentence={{sentence}}&key=YOUR_SECRET_KEY
   

4. Add Custom CSS (Optional, but recommended for styling).

   /* --- Global Reset & Modern Dark Theme --- */
   body {
       /* Base dark colors */
       background-color: #282c34 !important;
       color: #abb2bf !important;
       /* Modern typography */
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       margin: 0;
       padding: 1.2em;
       height: 100vh;
       box-sizing: border-box;
   }
   
   /* --- Word Title Styling --- */
   h1 {
       color: #61afef !important;
       font-size: 1.6em !important;
       margin-top: 0;
       margin-bottom: 0.8em !important;
       border-bottom: 1px solid #3b4048;
       padding-bottom: 0.5em;
       text-align: left;
   }
   
   /* --- Text Area Styling --- */
   textarea {
       width: 100%;
       min-height: 120px;
       box-sizing: border-box;
       background-color: #2c313a !important;
       color: #abb2bf !important;
       border: 1px solid #3b4048 !important;
       border-radius: 4px !important;
       padding: 10px;
       font-size: 1em;
       line-height: 1.4;
   }
   
   textarea::placeholder {
       color: #5c6370 !important;
   }
   
   /* --- Button Group Layout --- */
   .button-group {
       display: flex;
       gap: 10px;
       margin-top: 1.2em;
   }
   
   /* --- Button Shared Styles --- */
   .button-group button {
       width: 50%;
       padding: 12px;
       font-weight: bold !important;
       border: none !important;
       border-radius: 4px !important;
       cursor: pointer;
       font-size: 0.95em;
       box-sizing: border-box;
       transition: background-color 0.2s;
   }
   
   /* --- AI Define Button (Primary Blue) --- */
   #aiDefineButton {
       background-color: #61afef !important;
       color: #21252b !important;
   }
   
   /* --- Manual Save Button (Secondary Green) --- */
   button[type="submit"] {
       background-color: #98c379 !important;
       color: #21252b !important;
   }
   
   /* --- Success/Error Message Styling (FIXED ALIGNMENT) --- */
   .success-message {
       /* Center the container text */
       text-align: center;
       padding: 2em 0;
   
       /* Ensure the text is centered but the checkmark is left of the word */
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 90%; /* Vertically center the box in the iframe */
   }
   
   /* Style for the checkmark and "Saved" text */
   .check-mark {
       /* Make the saved text large and green */
       color: #98c379 !important;
       font-size: 2.2em !important;
       font-weight: bold;
       display: block; /* Ensures it takes up its own line */
       margin-bottom: 10px;
   }
   
   /* Style for the word confirmation text */
   .success-message p {
       font-size: 1.1em;
   }
   
   /* Optional: Make the bold word in the success message stand out */
   .success-message strong {
       color: #61afef;
   }

---

Usage

• Save a word: Highlight a word, open Definer, and go to your custom source. You can type a definition manually or click "AI Define" to have Google Gemini generate one. Click "Save Word" to send it to your sheet.
• View your list: Go to https://your-app-name.vercel.app/list and enter your LIST_PASSWORD to see and search all your saved words.