はじめに

特定のページからちょこっと情報を取得したいけど、NodeJSやPythonでがっつりやるのは大袈裟過ぎる
非エンジニアさん向けのスクレイピングツールを作りたいけど、相手のPCに動作環境がない

こんなときはChrome Extensionとかいかがでしょうか？
Chrome Extensionなら、Google Chrome（動作環境）とExtensionの入ったフォルダさえあれば動きます。

本記事では、Chrome Extensionで簡易的なスクレイピングを行う方法を紹介します。
コード一式はこちら。

コード

以下の順番で実装していきます。

Chrome Extensionでポップアップを表示する
ポップアップ内のボタンを押してバックグラウンドでタブを開く
開いたタブの内容を取得してポップアップ内に表示
表示した内容をクリップボードにコピー

用途としては「管理画面の入力に必要な情報を特定のページから取得して参照する」などを想定してます。

ブラウザアクションを追加してポップアップを有効にする

manifest.jsonで、browser_actionを有効にします。

// manifest.json
{
  ...
  "browser_action": {
    // ツールバーにエクステンションを表示する設定 + 表示するアイコンのパス
    "default_icon": "icon128.png",
    // ツールバーのアイコンをクリックしたときにポップアップを表示する設定
    "default_popup": "popup/popup.html"
  }
}

ポップアップから新しいタブをバックグラウンドで開く

ポイントは2つ

chrome.tabs APIを使用できるように、permissionsにtabsをセットする
タブを開いた時点でポップアップが閉じないように、chrome.tabs.createメソッドのactiveオプションにfalseを渡す

// manifest.json
{ 
  ...
  // chrome.tabs.createなどのメソッドを使用できるように設定
  "permissions: ["tabs"]
}

// popup.js
async function loadNewTab(url, timeoutSeconds = 5) {
  return new Promise((resolve, reject) => {
    let targetTabId = null

    const listener = (tabId, changedProps) => {
      if (tabId != targetTabId || changedProps.status != 'complete') {
        return
      }
      chrome.tabs.onUpdated.removeListener(listener)
      resolve(tabId)
    }
    chrome.tabs.onUpdated.addListener(listener)

    // ポップアップが閉じないように、active: falseを設定する
    chrome.tabs.create({ url, active: false }, (tab) => {
      // 開いたtabのidをスコープの変数にセットする
      targetTabId = tab.id
    })

    setTimeout(() => {
      reject(new Error('Time out...'))
    }, timeoutSeconds * 1000)
  })
}

loadNewTabメソッドをpopup.htmlに設置したボタンのイベントリスナー内で呼び出します。
Promiseで包んでasyncにしていますが、普通にコールバック内で結果を受けるようにしても問題ありません。

新しく開いたタブから情報を取得してポップアップに表示する

ここでは例として、英語版Wikipediaのトップページから本日の記事のテキストを取得します。

ポイントは3つ

permissionsに情報を取得したいURLを指定する（ホストだけでもOKのようです）
chrome.tabs.executeScriptの第一引数にtabIdを渡すことで、非アクティブのタブでスクリプトを実行可能
chrome.tabs.executeScriptのコールバックでスクリプトの結果を取得可能

// manifest.json
{
  ...
  "permissions": [
     "tabs",
     "https://en.wikipedia.org/wiki/Main_Page"
   ]

// popup.js
async function parseWikipedia(tabId) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(
      tabId,
      { file: 'parser/parseWikipedia.js' },
      (results) => {
        if (results[0] === null) {
          reject(new Error('Failed to parse wikipedia.'))
        } else {
          resolve(results[0])
        }
      }
    )
  })
}

// parseWikipedia.js
;(() => {
  function parse() {
    // Get text from "From today's featured article"
    return document.querySelector('#mp-tfa p').textContent
  }

  try {
    return parse()
  } catch (e) {
    console.log(e)
    return null
  }
})()

chrome.tabs.executeScriptに渡すスクリプトでは、結果もしくはnullを返すようにしています。
スクリプト内でキャッチできない例外が発生した場合は、results[0]にはundefinedが入るようです。

ポップアップ内に表示した結果をクリップボードにコピーする

// 結果は、<textarea id="content"></textarea>のtextContentに格納されている前提
function copyResult() {
  document.querySelector('#content').select()
  document.execCommand('copy')
}

終わりに

定期的に実行するほどでもないけど、たまにスクレイピングしたいみたいなときにも便利かと思います。
ちょっとスクレイピングしたいなってときも、ボタンとURL、ページ固有のスクリプトを追加するだけで済みます。是非使ってみてください！

コード一式はこちら（再掲）。

【Chrome Extension】ポップアップから簡易スクレイピング