Загрузите кнопку Bootstrap в BrowserPalette и сделайте так, чтобы она сохранялась

Question

Мне интересно кое о чем. Я могу добавить кнопку в BrowserPalette, а затем переместить ее на панель инструментов с этим кодом, могу скопировать вставку на блокнот и запустить.

var doc = document;
var win = doc.defaultView;

var toolbox = doc.querySelector('#navigator-toolbox');

var buttonId = 'bpMyBtn';
var button = doc.getElementById(buttonId);
if (!button) {
    button = doc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
    button.setAttribute('id', buttonId);
    button.setAttribute('label', 'My Button');
    button.setAttribute('tooltiptext', 'My buttons tool tip if you want one');
    button.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional');
    button.style.listStyleImage = 'url("https://gist.githubusercontent.com/Noitidart/9266173/raw/06464af2965cb5968248b764b4669da1287730f3/my-urlbar-icon-image.png")';
    button.addEventListener('command', function() {
        alert('you clicked my button')
    }, false);

    toolbox.palette.appendChild(button);
}

var targetToolbar = doc.querySelector('#nav-bar');
//move button into last postion in targetToolbar
targetToolbar.insertItem(buttonId); //if you want it in first position in targetToolbar do: targetToolbar.insertItem(buttonId, navBar.firstChild);
targetToolbar.setAttribute('currentset', targetToolbar.currentSet);
doc.persist(targetToolbar.id, 'currentset');

Тем не менее doc.persist не работает, после перезапуска браузера кнопка пропала. Можно ли использовать Persist, чтобы просто добавить кнопку в первый раз надстройки начальной загрузки, и она будет сохраняться?

это также приводит к вопросу, как удалить кнопку и сохранить это? (т.е. при удалении удалить полностью из палитры, а другой то есть: просто удалить с панели инструментов, другими словами, просто отправить его обратно в палитру и сохранить это)

я получил постоянный код отсюда: https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Toolbar

Answer 1

Я использую библиотеку, которая первоначально была найдена в одном из материалов Эрика Волда, который является моим основным источником знаний для разработки начальной загрузки. Это работает чудесно:

/* ***** BEGIN LICENSE BLOCK *****
* Version: MIT/X11 License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Contributor(s):
* Dmitry Gutov <[e-mail]> (Original Author)
* Erik Vold <[e-mail]>
*
* ***** END LICENSE BLOCK ***** */

(function(global) {
  let positions = {};

  /*
   * Assigns position that will be used by `restorePosition`
   * if the button is not found on any toolbar's current set.
   * If `beforeID` is null, or no such item is found on the toolbar,
   * the button will be added to the end.
   * @param beforeID ID of the element before which the button will be inserted.
   */
  global.setDefaultPosition = function(buttonID, toolbarID, beforeID) {
    positions[buttonID] = [toolbarID, beforeID];
  };

  /*
   * Restores the button's saved position.
   * @param {XULDocument} doc XUL window document.
   * @param {XULElement} button button element.
   */
  global.restorePosition = function(doc, button, toolbox) {
    function $(sel, all)
      doc[all ? "querySelectorAll" : "getElementById"](sel);
    ($(toolbox) || $("header-view-toolbox") || $("navigator-toolbox") || $("mail-toolbox")).palette.appendChild(button);

    let toolbar, currentset, idx,
        toolbars = $("toolbar", true);
    for (let i = 0; i < toolbars.length; ++i) {
      let tb = toolbars[i];
      currentset = tb.getAttribute("currentset").split(","),
      idx = currentset.indexOf(button.id);
      if (idx != -1) {
        toolbar = tb;
        break;
      }
    }

    // saved position not found, using the default one, if any
    if (!toolbar && (button.id in positions)) {
      let [tbID, beforeID] = positions[button.id];
      toolbar = $(tbID);
      [currentset, idx] = persist(doc, toolbar, button.id, beforeID);
    }

    if (toolbar) {
      if (idx != -1) {
        // inserting the button before the first item in `currentset`
        // after `idx` that is present in the document
        for (let i = idx + 1; i < currentset.length; ++i) {
          let before = $(currentset[i]);
          if (before) {
            toolbar.insertItem(button.id, before);
            return;
          }
        }
      }
      toolbar.insertItem(button.id);
    }
  };

  function persist(document, toolbar, buttonID, beforeID) {
    let currentset = toolbar.getAttribute("currentset").split(","),
        idx = (beforeID && currentset.indexOf(beforeID)) || -1;
    if (idx != -1) {
      currentset.splice(idx, 0, buttonID);
    } else {
      currentset.push(buttonID);
    }
    toolbar.setAttribute("currentset", currentset.join(","));
    document.persist(toolbar.id, "currentset");
    return [currentset, idx];
  }
})(this);

Затем в функции установки используйте:

setDefaultPosition("my_button_id", "navigator-toolbox", null);

(для удобства тестирования вы можете добавить его в функцию запуска с помощью:

if (reason == ADDON_INSTALL)
{
    setDefaultPosition("my_button_id", "navigator-toolbox", null);
}

Наконец, чтобы добавить саму кнопку, используйте что-то вроде этого в функции загрузки вашего окна:

let toolbarbutton = document.createElement("toolbarbutton"),
toolbarbutton.id = "my_button_id";
toolbarbutton.setAttribute("label", "My toolbar button");
restorePosition(document, toolbarbutton, "navigator-toolbox");
unload(function()
{
    toolbarbutton.parentNode.removeChild(toolbarbutton);
});

(unload () - это еще одна библиотечная функция от Эрика Волда)