参考書の商品一覧を整形する

これは誰かにこの機能を使って欲しい
というものではなく
こういう拡張機能があると便利だよねというお話。

SEやプログラマは常にインプットを必要としていますが
その際に利用するのはZen,Qiita,gitなど
エンジニアの情報サイトだったり
Googleトレンドやニュースなども活用します。

私が他に活用するのは参考書の一覧。
参考書が発売される＝需要が見込めるということ。
即ちそれだけ求められている題材だということ
※ただしトレンドからは大変遅れがち

故に各ページでお気に入りjsを作って
商品リストを取得できるようにしていたのですが…
もっと簡単にできないかと思い拡張機能化しました。


window.locationが普通に動く

少し試したもののお話。
拡張機能を使ったページ移動はやらない方がいいと思うのですが、疑問点はできるのかどうか。
新しいタブを開くのではなく現在のタブの切替ができるのか。

これは普通にできました。
例えば本拡張機能の上にある出版社名は各サイトへのリンクですが、
これはコンテンツスクリプトにデータを飛ばしてページを切り替えています。

コンテンツスクリプトではwindowオブジェクトが使えるので
window.location.hrefを変更すればページ移動ができます。

して本機能のメインじゃなかったのでそのままにしたのですが
新規タブ等のコンテンツスクリプトを読み込まないページでは使えなくなります。

あとサイドパネルやポップアップはウィンドウではないので実行しても意味がありません。

ではサービスワーカーで使えるのかと思ったところ
「document.defaultView.location.href」を変更すれば動きました。
document.defaultViewって読み込み専用らしいんだけどなぁと。


やはりサイドパネルだ…サイドパネルはすべてを解決する

わたくしサイトパネル大好き人間で拡張機能を作る際はほぼサイドパネルを使っています。
そして今回は明確にサイドパネルを使う理由があります。

これは元々お気に入りjsを利用していたものですが
その場合は出力された内容を一回一回テキストエディタ等にコピーする必要があります。

実行してコピーしてエディタに切り替えてペーストしてブラウザに切り替えてページ移動して…。
を繰り返すのは大変手間です。

そんな煩わしい作業がなんということでしょう
サイドパネルを使えば一発で解決できたではありませんか。

サイドパネルを全ページ共通設定にする必要はありますが、
抽出した内容をtextareaに追記していく方式にすれば
操作は「ページ移動→抽出→ページ移動→抽出」を繰り返すだけになります。
大変便利。


データの活用方法

本機能で抽出した書籍のリストはタブ区切りでtextareaに追記されます。
これはエクセル等に簡単にコピー&ペーストできるようにするため。