ニコニコ動画の動画再生ページのタブを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
を書き加えるだけで使えるようになります。