読者です 読者をやめる 読者になる 読者になる

Chromeで見ているページのURLリンクをすべてコピーする方法( devtoolsを利用して)

想定読者は中途半端だがJS知らないHTML知ってるくらいの人。 $$, map, filterくらいだったら何となく雰囲気で使えるはず(ムリか)

  1. devtoolsのconsoleを開く(WindowsならCtrl+Shift+J, MacならCtrl+Option+Jがショトカキー)
  2. $$document.querySelectorAllの別名として定義されている。
  3. $$('a').map(x => x.href)のような形でURLを取得する 。
  4. copyクリップボードにコピーできる。copy($$('a').map(x => x.href).join('\n'))のように改行した一覧をコピーしても便利だと思う。
  5. $$('a').filter(x => x.title.match(/調べたい文字列/i)でフィルタリング。

以下敬体。

利用例

Amazonで"JavaScript"と検索したというシチュエーションを考えます。出てきた結果一覧から「入門」という文字列を含むリンクを開きたいとします(まあ例なので、入門という言葉が出てきそうな検索クエリなら「Python」とか「線形代数」とか割といけると思います)

検索結果のページを閲覧している状態でconsoleを開き、次のようなコードを書きます。(>はプロンプトを表してるつもりでコードとは関係ないです)

> $$('a.s-access-detail-page').filter(x => x.title.match(/入門/i)).map(x => open(x.href))

これを実行するとリンクを新しいタブで多数開くはずですが、ブラウザによりポップアップがブロックされます。

これはポップアップにより詐欺サイトに飛ばされるといった事態を防ぐためにこうなっているらしいです。ここではamazonを信用できるという前提を取るのでポップアップは許可します。

f:id:cofree:20170503002448p:plain

ポップアップを許可するとタブがドバッと開きます。あまりタブを開きすぎると困る場合は間にslice噛ませて数減らしましょう。

余談

$$で取得するクラス名ですが、これはdevtoolsのインスペクタを使ってちまちま探しました。

ツールボックスからインスペクタツール(一番左のアイコン、青くなってるやつ)を選んで

f:id:cofree:20170503003352p:plain

情報を取得したいページの要素をクリックして

f:id:cofree:20170503003236p:plain

aタグを読んで書籍へのリンクを表すクラス属性を特定する。

f:id:cofree:20170503003253p:plain

なんか薄い記事だけど

あまり一般向けになっていない気がする。ブックマークレットなど別の手段を取った方が使いやすいか。