mixne

アイキャッチ
2024.07.30プログラム

Chrome拡張機能を作ってみた

珍しく情報系大学生らしい記事(?)

タイトルとURLをクリップボードにコピーする、よくある拡張機能を作ってみました。初めてChromeの拡張機能を作成しましたが、アイディア次第ではもっと便利なものが作れそうです。

きっかけ

レポートを書く際に、指定されたフォーマットで参考にしたサイトのタイトル、URL、閲覧日を張る必要があるのですが、これが意外と面倒。今まではCopy as MarkdownでタイトルとURLをコピーしたあと、手動で直していました。

Copy as Markdownは今開いているタブのみならず、ウィンドウ内のすべてのタブのタイトルとURLをクリップボードにコピーできる優秀な拡張機能ではありますが、今回の用途では毎回フォーマットを直すのが面倒でした。そこで、いっそのこと自分用に拡張機能を作ってしまおうと思って作成しました。

機能

この項目を作ろうか迷ったぐらいとってもシンプル。

拡張機能のボタン(?)を押したら、「タイトル,URL,日付」の形式でクリップボードにコピーするだけです。

設定や選択肢もなく、とってもシンプルです。キーボードショートカットぐらいは作っても良かったかもしれません(やり方わからないけど)。

実装

GitHubにソースコードをアップしてあるので見てもらえればと思います。

流れとしては、クリックされたら、現在開いているタブのタイトルとURLを取得した後、今日の日付を取得し、それらをまとめてクリップボードに格納するといった感じです。

グローバル変数を普通に使っていたりとあまり良いコードではないのかなと思います。最低限、機能ごとに関数を分けるぐらいはしていますがそれだけで、見づらいところもあると思うので他の方のコードを参考にした方が良いかもしれません。

苦労したところ

右も左もわからなかったのでいろいろ苦労はありましたが、中でもクリップボードにコピーするところが一番時間かかりました。

検索すると一番上にnavigator.clipboard.writeText が出てくるのですが、Background Page(このときはManifest v2を使ってた)では利用できないとのこと。よく考えてみれば当然な気もしますが、これがわかるまでブラウザのセキュリティとか色々いじっていました。

Chrome拡張でbackgroundからコピーをする方法とChrome拡張のセキュリティについて #Chrome拡張 - Qiita

そこで、この記事を見つけて利用させてもらいました。というか、結果的にこのコードがほとんどの割合を占めています。非常にありがたい。

結び

拡張機能、便利ですね。ほとんどのことをブラウザでやっているわけで、そこで利用できる拡張機能が便利じゃないはずがないですもんね。

今後は、練習がてらオプションページを追加して、もう少しカスタマイズ性に優れたツールにできたらいいなと思っています。夏休みに入れば時間はあるし、たぶん一日あれば完成できるはずです。

てか、まだ期末試験終わってないのに何をやっているんだろう…。


おまけ

いつの間にか、Notionに目次機能が付いていました。これまでも文章に埋め込むブロックとしてありましたが、今回のは右端に表示されているもの。これなら、文章を邪魔しないし、常にアクセスできるので便利です。

もう少し使いこなせると良いんだろうなと思いつつ、ただのMarkdownエディタとしてしか使えていないNotion。データーベースが良く絶賛されていますが、Google SpreadsheetsのほうがGASも使えて便利とか思ってしまって、あまり使う機会もありません。

とはいえ、他のアプリを探すほどの理由もないためしばらくは使い続けそうです。

Comments

コメントする