Persist toolbar buttons?

[revmischa]

I noticed when using gmail.tools.add_toolbar_button() the button doesn't stay where it belongs when you navigate through folders/labels on the left hand nav. I'd be fine with re-adding the buttons but I don't know how to get an event when someone clicks one of those links. Is there a known way to persist the toolbar buttons while navigating?

[josteink]

I've just subscribed to the window-object's on hash-change event in my extension, and re-added the buttons like you yourself suggest as a workaround.

That has worked without any issues for me (although I am careful to check that the buttons are actually missing before re-adding them).

[Debolinap]

How did you check if the buttons are actually missing before readding them?

[josteink]

Ensure the button has a unique html ID and use document.getElrmentById() to check.

[ckarcz]

@josteink your workaround still did not work as the button was still in the DOM after navigating, just not visible.

i was able to work around the issue like so, would love if you have a better alternative/suggestion, ~~as the button's nested parent containers will remain and pollute the DOM (not a big deal though i guess).~~ (Edit: fixed by removing button parents)

function addButtonToGmailToolbar() {
  const buttonId = 'my-gmail-toolbar-button';

  // check if we have the button already injected into the gmail DOM
  var existingButtonElement = document.getElementById(buttonId);
  if (!existingButtonElement) {
    // no button, so create one and add it

    const buttonContainer = document.createElement('div');
    buttonContainer.id = buttonId;

    const buttonImg = document.createElement('img');
    buttonImg.src = getExtensionResourcePath('img/dc_32x32.png');
    buttonImg.style.height = '21px';
    buttonImg.style.width = '21px';
    buttonImg.style.verticalAlign = 'middle';
    buttonImg.style.marginBottom = '2px';

    buttonContainer.appendChild(buttonImg);

    gmail.tools.add_right_toolbar_button(buttonContainer, onButtonClicked);
  } else {
    // button exists, so remove it and re-add it
    // we have to do this because button disappears on navigation away from initial loaded view
    existingButton.parentNode.parentNode.parentNode.removeChild(existingButton.parentNode.parentNode);
    addDealCloudGmailToolbarButton();
  }
}

[josteink]

I'd clean that code up slightly, but if it works it works:

function addButtonToGmailToolbar() {
  const buttonId = 'my-gmail-toolbar-button';

  // check if we have the button already injected into the gmail DOM
  const existingButtonElement = document.getElementById(buttonId);
  if (existingButtonElement) {
    // button exists, so remove it and re-add it to ensure it's in a visible DOM container!
    existingButton.parentNode.parentNode.parentNode.removeChild(existingButton.parentNode.parentNode);
  }

  const buttonContainer = document.createElement('div');
  buttonContainer.id = buttonId;

  const buttonImg = document.createElement('img');
  buttonImg.src = getExtensionResourcePath('img/dc_32x32.png');
  buttonImg.style.height = '21px';
  buttonImg.style.width = '21px';
  buttonImg.style.verticalAlign = 'middle';
  buttonImg.style.marginBottom = '2px';

  buttonContainer.appendChild(buttonImg);

  gmail.tools.add_right_toolbar_button(buttonContainer, onButtonClicked);
}

Integrating into other people's products is always messy one way or another. gmailjs can't change that fact :)

[josteink]

Old issue is old. Closing.