🔗 ブックマークレット - ページ内の複数のリンクを一括で開く

お久しぶりです ✋

Qiita のメルマガに載ってある記事を一括で開きたかったのでブックマークレットを作りました。他のサイトでも使えます。

javascript: {
  const color = '#D35658';
  const d = document;
  const els = new Set();

  const toggle = el => {
    const isSelected = els.has(el);
    isSelected ? els.delete(el) : els.add(el);
    el.style.color = isSelected ? null : color;
  };

  const handler = e => {
    if (e.target instanceof HTMLAnchorElement) {
      toggle(e.target);
      e.preventDefault();
    }
  };
  d.addEventListener('click', handler);

  const button = d.createElement('button');
  button.innerHTML = 'すべて開く';
  button.onclick = () => {
    els.forEach(el => {
      window.open(el.href, '_blank');
      toggle(el);
    });
    d.removeEventListener('click', handler);
    d.body.removeChild(button);
  };
  button.style = `
position: fixed;
cursor: pointer;
z-index: 1000000000;
top: 16px;
right: 16px;
border: none;
border-radius: 6px;
padding: 8px 16px;
background: ${color};
color: white;
`;
  d.body.appendChild(button);
}

使い方

1. ブックマークレットを実行するとページ内の a タグのリンクが無効化され、選択モードに変わります。

2. 開きたいリンクを順にクリックして選択状態にします。(リンクのテキストが赤くなります)

3. 右上の すべて開く をクリックすると選択したすべてのリンクが新しいタブで開かれます。

4. 開いたあとはページ内のリンクが再度有効になります。

ページ内の複数のリンクを一括で新しいタブで開くブックマークレットを作りました！！https://t.co/7jnqVkYZw1 #Qiita pic.twitter.com/AFRHZb1N42

— やまいも@駆け合作(固定ツイ) (@yarnaimo) June 19, 2019