Remember the days of Google Bookmarks? A handy little service that let you keep all your interesting web finds in one place. Well, that service has sailed off into the digital sunset.

I built an alternative for myself that saves my Bookmarks to a spreadsheet in Google Sheets using Google App Script - the Bookmarker bookmarklet.

It works by using a bookmarklet - a browser bookmark that runs a bit of JavaScript code when you click it. This code grabs the page's URL and title and adds it as a new row in your own copy of Google Sheets.

This provides a centralized and flexible way to keep track of interesting articles and websites, offering the ability to add your own notes in the corresponding columns. The motivation behind this was to have all bookmarks in one location, accessible from any device, rather than being tied to a specific browser.

I enhanced the original code by prompting Gemini Flash within GitHub Copilot Chat to generate code to categorize a bookmarked URL. To make the URL categorization code easy to follow, I built a simpler sample URL Categorizer that you can read about below.

To use the new bookmarklet, follow these steps after reading how the initial version of the Bookmarker bookmarklet was built and deployed -

1. Copy the Bookmarker.js script to Google Apps Script. The program logic utilizes the Gemini 2.0 Flash API to scan the content of the web page represented by the URL provided by the user. A category is assigned from a predefined list of custom categories. To take advantage of this API, you'll need to obtain a free access key from Google AI Studio.

2. Deploy it as a web app to get a unique URL endpoint that is generated by Google Apps Script. Copy that URL.

Deploying the code through the Google App Script editor

3. The copied endpoint URL will be used within the bookmarklet (code in bookmarklet.js) in your browser. Once set up, you can click on the bookmarklet to saved and categorize a bookmark-worthy page in your spreadsheet within Google Sheets for later action or reference. The current page's URL, title, category are added as a new row along with a timestamp.

Bookmarker bookmarklet v2 requires a bit of initial setup, but the result is a flexible bookmarking system tailored to your needs.

This is a simple web application that categorizes a given URL using the Gemini API.

Using the helper function shown in the sample, I plan to enhance a Bookmarker Bookmarklet I built earlier by integrating AI to automatically categorize URLs and save them to Google Sheets.

• Takes a URL as input.
• Uses the Gemini API to categorize the URL.
• Displays the categorized result on the page.
• Handles errors gracefully.
• Provides a loading indicator while the API call is in progress.

• HTML
• CSS
• JavaScript
• Gemini API

1. Clone the repository or download the URLCategorizer.html file.
2. Open the URLCategorizer.html file in a text editor.
3. Replace the placeholder with your actual Gemini API key in line # 130.

   const apiKey = "YOUR_API_KEY"; // Replace with your actual API key

4. Save the file.
5. Open the URLCategorizer.html file in your web browser.

1. Enter a URL in the input field.
2. Click the "Categorize URL" button.
3. Wait for the loading indicator to disappear.
4. The categorized result will be displayed on the page.

The JavaScript logic handles the following:

1. Getting References to HTML Elements:
   • The script gets references to the HTML elements that it needs to manipulate using document.getElementById().
2. Event Listener for the Categorize Button:
   • An event listener is added to the "Categorize URL" button. When the button is clicked, the provided function is executed.
3. Getting the URL and Validating It:
   • Inside the event listener, the URL entered by the user is retrieved from the input field, and any leading or trailing whitespace is removed using trim().
   • A basic validation check is performed to ensure that the URL is not empty and starts with either http:// or https://.
4. Showing the Loading Indicator and Hiding Previous Results:
   • Before making the API call, the loading indicator is displayed, and any previous results are hidden.
5. Making the API Call and Handling the Response:
   • The categorizeURL function is called with the URL as an argument. This function makes the API call to the Gemini API.
   • The try...catch...finally block is used to handle the API call and any potential errors.
   • In the try block:
     • The categorizeURL function is called, and the returned category is stored in a variable.
     • The results are updated in the HTML, and the result container is made visible.
   • In the catch block:
     • If any error occurs during the API call, the error message is displayed in the result container, and the container is styled to indicate an error.
   • In the finally block:
     • The loading indicator is always hidden, regardless of whether the API call was successful or not.
6. categorizeURL Function:
   • This function constructs the API endpoint, prompt text, and payload.
   • It then makes the API call using the fetch function.
   • If the API call is successful, it parses the response and returns the category.
   • If the API call fails, it throws an error.

Important: The API key is currently hardcoded in the client-side JavaScript code. This is a security risk. This sample is meant for educational purposes to be tried on a computer locally. In a production environment, you should move the API call to a backend server to protect your API key.

The code includes error handling to catch and display any errors that occur during the API call. If an error occurs, an error message is displayed in the result container.

• This application requires an API key from the Gemini API. You can get a free Gemini API key through Google AI Studio.

MIT