[SoundCloud Cover Art Getter] サンクラの画像をコピーできるChrome拡張を作る

Chrome拡張 つくりかた 令和最新版

• サンクラから落としたアートワークのない音声ファイルにアートワークをつけるためにサンクラの画像をクリップボードにコピーしたい
• 右クリックメニューで提供する or 拡張アイコンワンクリック or その両方
• https://www.howtotechies.com/soundcloud-artwork-downloader すでにこのようなダウンローダーはあるが一手間かかる

https://stackoverflow.com/questions/73157165/error-handling-response-referenceerror-document-is-not-defined

表示させるところまではできたがコピーが難しい

document.execCommand('copy') を使いたいが Error in event handler: ReferenceError: document is not defined となる。 Manifest V3だと、background(Service Worker)ではDOMやwindowオブジェクトは存在しない(undefined)ためらしい。

https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/ ここでも紹介されている。最後のcanvasの例では、documentを使わない方法も紹介されている。

ワーカスレッドで実行できそうな代案がなかったので navigator.clipboard でできないか試してみる。

• Error in event handler: TypeError: Cannot read properties of undefined (reading 'writeText')
• ググると「http環境ではできず、このようなエラーになる (仕様)」というのは見られるが、サンクラはhttpsである

Navigatorはあるがnavigator.cliupboardがない

navigator.clipboardの機能はそもそもドキュメントにフォーカスが当たっていないと使えないっぽい。今回はDOMもdocumentも存在しないので使えないっぽい。

https://developer.mozilla.org/en-US/docs/Web/API/WorkerNavigator

Blobとは何か勉強

画像が入ったimg要素のnaturalWidthが0になる

• その後imgを貼り付けたcanvasを表示しても空だった
• これらはimg要素にまだ画像が入っていなかったのが原因
• 下記のようにすることで解決できた

img.onload = function () {
          canvas.width = img.naturalWidth
          canvas.height = img.naturalHeight
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
}

これで画像コピーは一通りできた

画面にフォーカスが当たってない(コンソールにフォーカスしている時など)とどこかがエラー出して動かないので将来的には治したい (普通に使う場合問題ないと思うが)

リリースしました🎉 SoundCloud Artwork Getter - Chrome ウェブストア