更新日:

UtaTenの歌詞をコピーするスクリプト Chrome拡張


UtaTenの歌詞コピーページ
manifest.json
{
  "name": "UtaTen歌詞コピー",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "UtaTen歌詞コピー",
  "content_scripts": [
    {
      "matches": ["https://utaten.com/lyric/*"],
      "js": ["./app.js"]
    }
  ]
}
app.js
const selectText = node => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(node);

  selection.removeAllRanges();
  selection.addRange(range);
  return selection;
};

const main = () => {
  const div = document.createElement('div');
  const button = document.createElement('button');
  div.appendChild(button);
  document.getElementsByClassName('topBanner')[0].after(div);

  div.style.textAlign = 'center';

  button.textContent = '歌詞をコピーする';
  button.style.width = '150px';
  button.style.height = '50px';

  button.onclick = () => {
    const str = Array.from(document.querySelectorAll('.romaji .ruby')).reduce(
      (acc, dom) => {
        acc += dom.querySelector('.rb').textContent.trim();
        if (dom.nextElementSibling.innerHTML === '') {
          acc += '<br />';
        }
        return acc;
      },
      ''
    );

    const _div = document.createElement('div');
    _div.className = 'highlight';
    _div.style.color = '#fff';
    _div.innerHTML = str;
    document.getElementsByClassName('topBanner')[0].after(_div);

    const selection = selectText(_div);
    document.execCommand('copy');
    selection.removeAllRanges();
    document.querySelector('.highlight').remove();
    alert('歌詞をコピーしました');
  };
};

main();

関連

歌ネット歌詞コピーページ

UtaTenコピーページ

うたまっぷコピーページ

J-Lyric.netコピーページ

歌ネット歌詞コピー Chrome拡張

UtaTen歌詞コピー Chrome拡張

うたまっぷ歌詞コピー Chrome拡張

J-Lyric.net歌詞コピー Chrome拡張

プチリリ歌詞コピー Chrome拡張