読者です 読者をやめる 読者になる 読者になる

ニコニコ動画の動画再生ページのタブをGreasemonkeyから追加する方法

さっき書いた関数 (Nicopedia Tabで使ったやつ)を使えば,Greasemonkeyからタブが追加できたりしていろいろ便利になるんじゃないかな,と思ったので公開します。

function createPanel(label, id, action) {
  id = 'itab_' + id;

  let itab = document.querySelector('#itab td');
  let link = document.createElement('a');
  link.href = '#'+id;
  // a の中に div いれるとかちょっとどうにかしてほしい
  link.innerHTML = '<div>' + label + '</div>';
  itab.appendChild(link);

  let info_frm = document.querySelector('.info_frm');
  let panel = document.createElement('div');
  panel.id = id;
  panel.className = 'info';
  info_frm.appendChild(panel);

  unsafeWindow.cont = unsafeWindow.$$('.info_frm .info');

  const active = 'in';
  link.addEventListener('click', function(e) {
    e.preventDefault();
    Array.forEach(document.querySelectorAll('#itab td a'),
                  function(elm) elm.classList.remove(active));
    link.classList.add(active);
    Array.forEach(document.querySelectorAll('.info_frm .info'),
                  function(elm) elm.id === id
                  ? elm.classList.add(active)
                  : elm.classList.remove(active));
  }, false);

  if (typeof action === 'function')
    link.addEventListener('click', function(e) action(panel), false);

  return panel;
}

使い方

※createPanelの第三引数は省略可能です

  // ニコニコ大百科という名前のタブを作る (panel.id == nicopedia)
  let panel = createPanel('ニコニコ大百科', 'nicopedia', function onActivate() {
    // タブが表示された時(ラベルがクリックされた時)の処理
    alert('clicked!!');
  });
  // タブのパネルに表示する内容を指定する
  panel.appendChild(...);

追記

gistにアップしました。ニコニコ動画のwatchページのタブを追加する関数
GMスクリプトのヘッダ部分に

// @require http://gist.github.com/raw/636265/11243a0856cc32f4d5633b95d9411aecb1bd820b/nicovideo_createPanel.js

を書き加えるだけで使えるようになります。