Addon to change tab title

Add-ons Add-on Support
#1

Noob here.

Goal: I tab onto an web page element. At each tabbing, I want that element name to be in the tab title (aka Firefox Window Title). Eg. normally tab name is ‘Latest Add-ons/Add-on Support topics - Mozilla Discourse — Mozilla Firefox’. I want 'Latest Add-ons/Add-on Support topics - Mozilla Discourse [[element name]] — Mozilla Firefox.

To me it seems I should have a content script somewhere:
document.title = document.title + ’ [[’ + element name + ‘]].
But this might not work with all web pages, as ‘Content scripts cannot see JavaScript variables defined by page scripts’. But as a first step for newbie, how do I access ‘element name’ and where do I put the "document.title = document.title + ’ [[’ + element name + ']]".

Please, and thanks!
br,
Kaido

#2

You can change a page’s title by setting document.title in a content script. In this case, you’ll probably want to store a copy of the unmodified document title in a variable so you can reference it later.

let originalDocumentTitle = document.title;
document.title = `${originalDocumentTitle} [[element name]]";

You can get the name of a given element using HTMLElement.tagName.

You can watch for changes to what elements the user has focused using a document-level listener for the focus event. As noted on MDN, this event does not bubble, so in order to see it at the document level you’ll need to use a capturing event listener.

document.addEventListener('focus', (event) => { /* ... */ }, {capture: true});

It’s also worth noting that when you first focus the window, a focus event will be dispatched on the document itself.

Putting it all together, as a starting point you’ll want to do something like this in a content script:

let originalDocumentTitle = document.title;
document.addEventListener(
  'focus', (event) => {
    // Don't try to insert the document into the title.
    if (event.target === document) {
      return;
    }
    if (event.target.nodeTag) {
      document.title = `${originalDocumentTitle} [[${event.target.nodeTag}]]`);
    }
  },
  {capture: true});