Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to make your own airtable bookmark bookmarklet
// 1. Create a table on Airtable, and make URL/text columns with these names:
// URL, Title, Description, Image, Feed
//
// 2. Add a Form view. Click "Open form", then copy the URL. Set `airtable_form_url`
// below to that URL.
//
// 3. Create a new bookmark in your web browser, and paste in the code below. Whenever
// you're on a page you want to save, click the bookmark ("bookmarklet", technically).
// You'll go to the airtable form, and the columns listed above will be prefilled.
//
// 4. Customize. It's OK to leave any of those columns out, and you can also add
// additional columns. On one table, I include "Save for later" (checkbox), Rating
// (stars), tags (single-line text, with tags separated by commas since I don't
// want to have to pre-define the tags), and commentary (long text).
//
// You can also modify the code below to extract whatever you want.
//
// 5. Check out my soundcloud: https://sample.findka.com (I use a bookmarklet like this
// to curate newsletters for it).
//
// 6. (This is for desktop. The situation isn't great on mobile, but see my notes at
// https://essays.findka.com/bookmarklet/).
javascript:(function () {
let airtable_form_url = "https://airtable.com/shrabc123";
let q = (s) => document.querySelector(s);
let get = (m, k) => m ? m[k] : null;
let title = get(q('title'), 'innerHTML') || "";
let description = get(q('meta[name=description]'), 'content') ||
get(q("meta[property='og:description']"), 'content') ||
get(q("meta[property='twitter:description']"), 'content') ||
"";
let image = get(q('meta[name=image]'), 'content') ||
get(q("meta[property='og:image']"), 'content') ||
get(q("meta[property='twitter:image']"), 'content') ||
"";
var feed = get(q("link[type='application/atom+xml']"), 'href') ||
get(q("link[type='application/rss+xml']"), 'href') ||
"";
feed = (new URL(feed, document.location)).href;
window.location = airtable_form_url +
"?prefill_URL=" + encodeURIComponent(document.location) +
"&prefill_Title=" + encodeURIComponent(title) +
"&prefill_Description=" + encodeURIComponent(description) +
"&prefill_Image=" + encodeURIComponent(image) +
"&prefill_Feed=" + encodeURIComponent(feed);
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment