«
»

MakeLink替わりのブックマークレット

Firefox Quantum

Firefox Quantumのアップデートで速さと引き替えに多くのアドオンが動作しなくなりました。半年ほど経過し現在下記のような感じで落ち着きました。
Biscuit：削除したくないクッキーを保護 → Cookie AutoDelete
Copy Plain Text 2：プレーンテキストでコピー → Copy PlainText
Pearl Crescent Page Saver：ページをスクショ → Page Saver WE
QuickDrag：テキストをドラッグで検索 → QuickDrag WE
User Agent SwitcherUAを切り替える → User Agent Switcher
Tab Mix Plus：ページタブをカスタマイズ
後継のTab Mix WebExtensionもあるが執筆時点では殆どの機能が使えない。
・多段タブ → あきらめた
・新しいタブをホームページに → New Tab Override
・ブックマークを新しいタブで開く → 設定（about:config）で「browser.tabs.loadBookmarksInTabs」をtrueに変更
・検索結果を新しいタブで開く → 設定（about:config）で「browser.search.openintab」をtrueに変更

そして本題のMake Linkの代用ですが、昔はJavascriptでコピーしようとしたらIE以外はコピーの機能が無かったので裏でFlashを動かしたりしていたが昨今はClipboard APIでクリップボードを制御できるしexecCommandを使えばコピーを実行出来るようなのでブックマークレットを作って代用してみた。

仕組み的にはexecCommandは任意のモノをコピーする機能では無く「Ctr＋C」を押したときのようにコピー指示を出すだけの機能なので、イベントを作成しその中でclipboardData.setDataを使ってクリップボードの中身を任意のテキストに上書きしています。
このイベントは後で別のものをコピーする際に動かないように一度だけしか実行されないようにする必要があります。一度だけイベントを発火するのにIEでは使えないaddEventListenerのoneceオプションを使っていますが今回はFirefox用なのでIEは非対応としました。もしieも対応したい場合はイベントを使わずwindow.clipboardDataを使えばいいかと思います。
参考：Clipboard API and events
MakeLink HTML
MakeLink TSV

結果失敗しました。Chromeでは動きましたが肝心のFireFoxでは下記のようなエラーが出て使えませんでした。
「document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。」
イベント内なら許すみたいな書き方なのでclearTimeoutを仕掛けて見ましたが無理でした。次にクリックイベントで試すとできました。
MakeLink HTML
MakeLink TSV

ソース的には下記のような感じになります。

javascript:(function(){
  var d=document,b=d.createElement('div');
  d.body.appendChild(b);
  b.innerHTML='click to copy';b.style.cssText='
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    font-size:24px;
    z-index:999;
    color:#333;
    margin:0;
    padding:0;
  ';
  d.addEventListener('copy',(e)=>{
    e.preventDefault();
    e.clipboardData.setData('text/plain','<a href="'+window.location.href+'" target="_blank">'+document.title+'</a>');
  },{once:true});
  b.addEventListener('click',(e)=>{
    e.preventDefault();
    document.execCommand('copy');
    d.body.removeChild(b);
  });
})();

Tags: , ,

2018年4月26日 10:48 PM by uda2 制作日記

トラックバック

コメントを書く