Bookmarker Bookmarklet

I've used the Google Bookmarks bookmarklet in the past to save interesting articles for future reference. I like adding some notes so that I know in the future why it was bookmarked. If it was a social media contact, I would like to record some interaction or personal details for future reference. 

I found a code sample in a StackOverflow post that showed how to save a URL to Google Sheets. As I like spreadsheets, I liked the idea of saving bookmarks there along with my notes. Having all bookmarks at a centralized location rather than locally on an individual device gives you flexibility to access it from any device.

I tweaked the original sample a bit (Github Gist link^) to create what I call the "L8r" Bookmarklet to record an open web page's URL & its title as a row in Google Sheets -

If you are familiar with Google Apps Script & bookmarklets, continue reading or else jump to the end of this post for detailed steps.

If you wish to use this bookmarklet, you'll be saving it to Google Sheets that's connected to your Google account. So to customize you have to replace the Spreadsheet ID in the URL of a newly pre-created sheet in the code sample and some familiarity with Google App Script (which is like VBA/Office Script for Excel macros) is required.

The first part of the code should be copied to Apps Script editor and deployed so that an endpoint like this is created -

https://script.google.com/macros/s/<YOUR-WEB-APP>/exec

Next drag & drop the bookmarklet link to your browser after replacing the unique placeholder identifiers. When you wish to bookmark a page, click on this "L8r" bookmarklet. It will trigger the above-mentioned Google Apps Script which will grab the URL & Title of the page you're on and add a row along with the timestamp within the pre-created sheet.

You're free add your notes in the corresponding columns of each row.

While this takes a little effort to configure, you can adapt this script for various other scenarios. Using it as a Social Media Contact Tracker, you can jot down notes about a virtual friend's birthday or some minor detail that can be beneficial later. If you shop across multiple e-commerce sites, you can create a single wish-list where you can note the URL and possibly why this caught your interest.

Detailed steps -

Head to script.google.com

Click on Create Apps Script. Copy & paste the code listed above 

Notice that I've named my project bkmrkr. You can name it anything you like. As you will be saving bookmarks to a sheet in your own Google Sheets account, you will have to change key in the code (highlighted in blue in line 2) by replacing it with a key of a sheet that belongs to you. How do we that? 

Create a new sheet & give it a name of your choice (I'm calling mine Jan 2023 bookmarks)

Copy the highlighted portion of the URL from the address bar & replace it in the code in the Google App Script editor. After that don't forget to save the code.

It's now time to deploy this & put it to action. Click on Deploy > New deployment

We will be using the URL generated for the Web app in our bookmarklet

As the Web App will write to a Google Sheets spreadsheet, we have to authorize access

On clicking the Authorize Access button, a new window opens up to seek the requisite permissions

As it is your own email address that shows up, you can proceed further 

Click on the Allow button to let the Web app access the sheet to add your bookmarks.

Copy the highlighted Web App URL. It will go into the JavaScript bookmarklet code in the highlighted portion below -

javascript:(function(){var w=window.open('https://script.google.com/macros/s/AKzzzzz/exec?url=%27+encodeURIComponent(location.href)+%27&title=%27+encodeURIComponent(document.title),%27bookmarker%27);setTimeout(function(){w.close()},3000);})();

If you've never used a bookmarklet, here's one of many ways to create it

Bookmark any web page so that it shows up in the Bookmark bar of your browser. You can use the Ctrl+D keyboard shortcut or drag the URL in the address bar to the Bookmark bar.

Right-click on the bookmark in the Bookmark bar and choose Edit to create our own bookmarklet

Give the bookmarklet any name you like (on my browsers I use "Bkmrkr" or "L8r") & copy the JavaScript bookmarklet code shown above into the URL text box of the Edit bookmark dialog box & Save

The bookmarklet is now ready to be put to work. While you're on a web page that you want to save to your own sheet on Google Sheets, click on the bookmarklet 

To indicate that this page is in fact recording, a temporary notification will flash

Voila! The URL & title of the web page are saved

I used the Brave browser while taking the screenshots. The interface will be similar in popular browsers like Chrome & Edge.