更新日:

うたまっぷの歌詞をコピーするスクリプト Chrome拡張


うたまっぷの歌詞コピーページ
manifest.json
{
  "name": "うたまっぷ歌詞コピー",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "うたまっぷ歌詞コピー",
  "content_scripts": [
    {
      "matches": ["https://www.utamap.com/showkasi.php?*"],
      "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.querySelector('table').after(div);

  div.style.textAlign = 'center';

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

  button.onclick = () => {
    const str = document
      .querySelector('.noprint.kasi_honbun')
      .innerHTML.trim()
      .replace(/<br>/g, '\n');

    const _div = document.createElement('div');
    _div.className = 'highlight';
    _div.style.color = '#fff';
    _div.style.whiteSpace = 'pre-wrap';
    _div.textContent = str;
    document.querySelector('table').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拡張