🤟

ChromeでDLしたTFをCBにCPするEXを作った話。

2024/01/28に公開

Chrome拡張

JavaScript

tech

DAI語みたいなタイトルですみません。

「ChromeでダウンロードしたテキストファイルをクリップボードにコピーするExtension(拡張機能)を作った話。」
タイトルが長くてカッコ悪かったので省略しました。申し訳ございません。ウィッシュ

今回開発したもの

タイトル通りで、Chromeからテキストファイルをダウンロードした際にクリップボードにコピーするChrome拡張です。

開発した経緯ですが、昨年の夏にプロジェクトの進捗を毎日確認する必要がある状況に陥りました。
テストフェーズだったので、Backlogのチケットを使って進捗を管理していたのですが、日々の状況を数値でわかりやすくするために毎日Backlogのデータをエクスポートしてスプレッドシートに貼り付ける作業をする必要がありました。

やってみるとわかるのですが、スプレッドシートへの貼り付けって地味にめんどくさくてダウンロードしたCSVをそのままスプレッドシートにドラッグ&ドロップしてもいい感じに開いてはくれません。
スプレッドシート内でファイルのimportをするWindowを開いてからドラッグ&ドロップする必要があり、しかもそのファイルは別のシートにimportされます。

別の方法だとmacのnumbersなどの表計算ソフトで開いてからコピペすることもできますが、表計算ソフトで開くのが若干重たいので、毎日やる作業としては地味に苦痛でした。

そこで、CSVファイルをダウンロードする時にそのままクリップボードにコピーすれば一瞬でスプレッドシートに貼れると考えて、今回の拡張機能を開発しました。

今回の要件

Chromeからテキストファイルをダウンロードしたときにクリップボードにコピーする。
上記を実行する前にコピーしていいか確認ダイアログを出す。
テキストファイルがCSVだった場合はTSVに変換してクリップボードにコピーする。(TSV形式だとスプレッドシートに直接ペースト可能。)

ChromeExtensionの開発の仕方

Chrome Extensionの開発環境を整えるのは簡単で、なんせChromeで動くので、Chromeが入っていれば、それだけで実行環境が整います。

開発に必須のファイルは最低2つで
manifest.jsonとcontent.jsがあれば動きます。
詳しい書き方は他にもたくさん記事があるので割愛しますが、とりあえずファイルがたった2枚あれば開発がスタートするということだけ伝われば満足です。

開発する際にはChromeの設定から拡張機能の設定ページに飛び、右上のデベロッパーモードをオンにします。
その後「パッケージ化されていない拡張機能を読み込む」から、先ほど作った２つのファイルのあるディレクトリを選択すると拡張として追加されます。

最小構成にしたmanifest.jsonとcontent.jsを置いておきます。

manifest.json

{
    "name": "Hello world",
    "version": "1.0.0",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": [
        "content.js"
      ]
    }]
  }

content.js

console.log('Hello world!');

Chromeがインストールされている場合、これらのファイルを用意するだけでHello worldができてしまいます。
manifest.jsonのcontent_scirptsにおいてmatchesをall_urlsに指定しているため、Chromeでページを開くたびにcontent.jsが実行されます(開いたページのURLに関わらず)。
ChromeでDevToolsを開きながら別のページを開いてもらうとConsoleにHello world!と出力されていることが確認できるかと思います。

そんなこんなで最初のハードルはかなり低いので、ぜひお試しください。

また、今回はダウンロードしたファイルにアクセスしてその中身をクリップボードにコピーするという要件のため、Chromeのダウンロード処理に対するアクセスとファイルアクセスの権限をつける必要がありました。

このような権限はmanifest.jsonに宣言することで利用できます。
最終的なmanifest.jsonを置いておきます。

ChromeExtensionの公開の仕方

まずは Chrome ウェブストアのデベロッパー登録を行います。
初回5ドルかかりますが、1回払えばいいとのことで良心的なのはさすがGoogleですね。

次に、EEAの消費者法において取引者に当たるのかという質問がありましたが、軽く調べてみると趣味でアップロードする分には取引者に当たらないとのことなので、非取引業者アカウントを選択

ダッシュボードに入ったらサイドバーのアイテムを開いて、右上の新しいアイテムを追加します。
この画像はすでにアイテムを追加した後の画面になります。

アイテムの作成を始めるか、アイテムを選択すると、そのアイテムのページになります。
(私はモバイルアプリのエンジニアなので、GooglePlayConsoleやAppStoreConnectを触ったことがあり、ノリは一緒なので触りやすかったです。)

アプリの説明や、カテゴリ、言語を選択し、先ほど作ったアイコンをアップロード。
ふと右上を見てみると、審査のため送信が非活性になっており、ボタンの隣に送信できない理由というリンクが、、

色々指摘されてるので、うわっと思いますが、理由を一つずつ説明してくれているため、一つずつ対応していくだけで済みました。

今回対応した内容は

background,downloads,ホスト権限を要求する理由をそれぞれ記載する。こちらはサイドバーのプライバシータブから記載できました。
データの利用方法がデベロッパープログラムポリシーに準拠していることの表明。こちらも同様にプライバシータブから宣言。今回のExtensionではユーザ情報を取得して、サーバーに送るなどの処理はないため、データ転送しないという回答をしました。
単一用途の説明。こちらも同様にプライバシータブから宣言。この拡張機能の用途を簡単に説明しました。
連絡先メールアドレスの指定。こちらはアカウントのダッシュボードに戻って、アカウントタブから設定しました。
機能の動画orスクリーンショットのアップロード。今回の拡張機能はスクリーンショットだと分かりにくかったので、Youtubeに限定公開して、リンクをストアの掲載情報から設定しました。

一つずつ対応していくと、ついに「審査のため送信」が活性化されました。