js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介

この記事ははてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。

qiita.com

昨日は id:Krouton さんの 30日でできる! OS自作入門を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。

コードでコピーするココピーです

今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。

chrome.google.com

しゅぴっと拡張を開いてコピーするフォーマットを選択できます。
このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。

利用者が js を書いてフォーマットを追加できます。

コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。

Markdown, Scrapbox HTML, はてな記法, Textile, Backlog など、さまざまな記法でリンクを張りたい
Amazon 商品 URL をシンプルにして共有したい、あわよくば自分のアフィリエイトIDを埋めたい
選択範囲を引用しつつ元ページ情報へリンクしたい
今のページ内リンクの見出しをリンクテキストに含めてコピーしたい

などのユースケースがあります。

モチベーション

文章中に URL が入ってると読みにくくないですか。
短くて明快な URL ならいいんだけど、長かったり、いろんなパラメータが付いてると気になってしまう、なんならパラメータを読もうとしてしまう。

昔から、はてな記法には [http://~~:title] というタイトルを取得してリンクしてくれる記法があって、めちゃめちゃ便利に使っていた。でも今は仕事でのコミュニケーションの場が Github や Scrapbox、その他ツールへ広がっていて、いい感じにリンクするためにはいろんな記法を書く必要がある。リンクをコピーするためのブラウザ拡張はいろいろあるけど、Markdown に限られていたり、テンプレート機能が提供されていてもエスケープが不十分であったり、いまいち希望を満たすものがない。

コロナ禍でテキストコミュニケーションが増えてきたこともあり、いい感じのリンクを楽チンに作りまくりたい。

満足できるツールがほしいなーと思っていたので作りました。

作ってみると意外といろんな使い道が見つかるもので

コピーする内容が1行である必要もないので、ページ内リンクのある見出しだけ集めて目次を作ったり
Cloud Storage や BigQuery コンソールページから gs://{bucket}/{path} や {project}.{dataset}.{table} をシュッとコピーしたり
Kibana やら何かしら検索できるサービスでクエリを querySelector('input[aria-label*="search"]').value で引っ張ってリンクテキストに含めたり

ちまちましたコードを書いて日々の作業を改善するのが好きな人にはおすすめです。

使ってる技術

Preact + styled-components でもろもろ作っている。

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

なるべくしゅぴっと素早くポップアップを開きたいと思って興味本位で使ってみたけど速度の比較はしていない。

これは実装が小さい頃のビルドサイズの比較だけどだいぶ違いますね。今リリースしているバージョンでも popup はギリギリ 900KiB に収まっている。

# react
   options.js   2.63 MiB    options  [emitted]  options
     popup.js   2.38 MiB      popup  [emitted]  popup
   sandbox.js   12.4 KiB    sandbox  [emitted]  sandbox

# preact
   options.js    346 KiB    options  [emitted]  options
     popup.js   63.5 KiB      popup  [emitted]  popup
   sandbox.js   12.4 KiB    sandbox  [emitted]  sandbox

はじめは jsxFactory 周りだけ設定して react を aliasしなくてもいけるんじゃないかと思ったけど、styled-components が普通に import しているのでダメだった

その他 eslint やテストツールとの噛み合わせは Preact 使う - pokutuna にメモしてある。そのうち別途エントリにしたい。