Set Page Title to Current View Name

[Andy_Lin1]

I tend to have a number of Airtable views open, each with a different focus. However, the default Airtable only says (Table Name) - Airtable.

I’ve written a Greasemonkey/Tampermonkey script that will change the title to (Current View Name) / (Table Name) - Airtable

Note: you will need either the Greasemonkey/Tampermonkey plugin/extension to use this script. Also, since this is an unofficial script, it may (likely) break with a future update to Airtable.

// @name         Airtable View Name as Title
// @namespace    https://airtable.com/
// @version      0.1
// @description  Sets the title of Airtable pages to the View name
// @author       AndyLin
// @match        *://*.airtable.com/tbl*
// Airtable already loads jQuery
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none

// ==/UserScript==
//var $ = window.jQuery; //Airtable already loads jQuery
waitForKeyElements ("#table div.ml1.big.stronger", setTitle);
function setTitle (viewNameNode) {
    var thePageTitle = viewNameNode.text();
    document.title = thePageTitle + " / " + document.title;
}

[Andy_Lin1]

This one doesn’t work in older browsers, but is a lot faster, and updates when you change views.

// @name         Airtable View Name as Title
// @namespace    https://airtable.com/
// @version      0.3
// @description  Sets the title of Airtable pages to the View name
// @author       AndyLin
// @match        *://*.airtable.com/tbl*
// @grant        none

// ==/UserScript==

var titleCaps = document.title.match(/[^:]+: (.+) - Airtable/)[1].replace(/[^A-Z]/g,'');

waitForName ();

function waitForName () {
    elementReady( '#table div.ml1.big.stronger' ).then( foundElement => setTitle(foundElement) );
}

function setTitle (jsNode){
    var theViewName = jsNode.textContent;
    document.title = "A|" + titleCaps + " " + theViewName;
    //Monitor for AJAX page change
    elementMonitor();
}

function elementMonitor() {
    new MutationObserver((mutationRecords, observer) => waitForName() )
        .observe(document.getElementById("table"), {
        attributes: true
    });
}

// Source: jwilson8767/es6-element-ready.js – Wait for an element to exist. ES6, Promise, MutationObserver
// https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e.js
function elementReady(selector) {
  return new Promise((resolve, reject) => {
    let el = document.querySelector(selector);
    if (el) {resolve(el);}
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(document.querySelectorAll(selector)).forEach((element) => {
        resolve(element);
        //Once we have resolved we don't need the observer anymore.
        observer.disconnect();
      });
    })
      .observe(document.documentElement, {
        childList: true,
        subtree: true
      });
  });
}