近年、ウェブサイトのコンテンツを取得するスクレイピング技術が増えています。この記事では、一般的なスクレイピングの方法をChrome拡張機能として実装します。特に、動的に読み込まれるコンテンツへの対応として、MutationObserverを使用した方法に焦点を当てて解説します。
これら、全てChatGPTとの対話で作ることができます。

なお、サードパーティのサイトに対してスクレイピングを行う際には、そのサイトの利用規約やrobots.txtを確認して、違反行為をしないよう注意が必要です。

## 1. 前提となる技術

- JavaScriptの基本知識
- Chrome拡張機能の概念
- DOM操作の基本

## 2. ターゲットとなる情報

- 商品名
- 価格
- 商品のリンク

などを決めます。

## 3. 動的コンテンツとは？
近年のウェブページは、ページの初回読み込み時にすべてのコンテンツが読み込まれるわけではなく、ユーザーの操作に応じて後からコンテンツが動的に追加されることが多いです。このような動的コンテンツの取得は、単純なスクレイピング技術では難しい場合があります。

## 4. MutationObserverとは？
MutationObserverは、DOMの変更を監視するための強力なAPIです。これを使用すると、DOMに変更があった際にコールバック関数を実行して、変更された要素に対して操作を行うことができます。動的コンテンツのスクレイピングにおいて非常に役立つツールとなります。

## 5. スクレイピングの実装
まず、Chrome拡張機能としての基本的な構造を構築します。

- manifest.jsonの作成
- ポップアップHTMLの作成
- コンテンツスクリプトの作成

具体的なスクレイピング処理は割愛いたしますが、例えば、もし構造が以下のようであれば

```
<li class="item">
    <a href="product_link">Product Name</a>
</li>
```

コンテンツスクリプト（content.js）は以下のように記述します。

```
let links = Array.from(document.querySelectorAll('.item a'));
```

## 6. 工夫した点: MutationObserverの活用
このガイドの主要なポイントは、MutationObserverの活用です。Shopeeのページは、新しい商品情報が動的に読み込まれることが多いため、このAPIを使用してDOMの変更を監視し、新しく追加された商品情報も取得するようにしました。

## 7. まとめ
この記事では、スクレイピングするための方法をChrome拡張機能として紹介しました。特に、動的コンテンツの取得に焦点を当て、MutationObserverを活用する方法を取り上げました。この手法は、他の多くのウェブサイトでも適用可能で、動的コンテンツの取得に苦労している方にとって有益な情報となることを願っています。


DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

ChatGPTで作るChrome拡張機能を利用した動的コンテンツのスクレイピングガイド

今回は、Chrome拡張機能の作成についての基本的なガイドをシェアしたいと思います。
「ChatGPT”の”Chrome拡張機能」ではなく、「ChatGPT”で”Chrome拡張機能」を作ってみたです。
Chrome拡張機能は、Google Chromeのブラウザに新しい機能を追加するためのプラグインのようなものです。
なので、ブラウザ上でこんなのあったら良いのになと思ったら、自分で割と簡単に作れてしまうのです。この辺りがChatGPTの革命的なところですね。

ちなみに、MicrosoftEdgeもChromeと同じChromiumベースなので、自作拡張機能を追加することが可能になっています。

## 拡張機能の基本的なファイル構成
 ![](/uploads/chrome_Extension_a9b20e3317.png) 
ファイル構成としては上図を準備します。
各ファイルの役割は以下です。
chatGPTに作ってもらう時もChrome拡張機能にしてとプロンプトに入れると大抵の場合、下記の基本ファイルの記述を教えてくれるので、それらをエディタに記述し、それぞれのファイル名と拡張子で保存をし、任意のフォルダに格納するだけです。
アイコンはchatGPTでは作ってくれないので画像ファイルとして別途用意して下さい。

簡単にリサイズできるサイトもご参考までに。
https://resizeappicon.com/

1. マニフェストファイル (manifest.json): 拡張機能のメタデータを提供します。名前、バージョン、権限、ブラウザアクションやページアクション、コンテンツスクリプトなどの拡張機能の主要な情報を含むJSON形式のファイルです。
2.  バックグラウンドスクリプト (background.js): ブラウザやページのイベントに反応して、拡張機能の主要な機能を制御します。
3. コンテンツスクリプト (content.js): 直接ウェブページにインジェクトされ、ページのDOMを変更する役割を持っています。
4. ポップアップ: ブラウザのツールバーにある拡張機能のアイコンをクリックしたときに表示される小さなウィンドウです。ポップアップのHTML (popup.html) とそれに関連するJavaScript (popup.js) が含まれます。
5. オプションページ: 拡張機能の設定をユーザーがカスタマイズできるページ。options.html と options.js が含まれます。
6. アセットや他のリソース: アイコンや画像、その他の必要なリソース。例えば、icon.png など。
 ![](/uploads/_2518b036c6.png) 

## Chrome拡張機能のインストール手順
 ![](/uploads/2_24dc3436fa.png) 
上述の構成に格納したフォルダを指定することで読み込みが完了すると拡張機能に自分の作ったものが表示されます。

1. Google Chromeブラウザを開きます。
2. URLバーに chrome://extensions/ を入力して、拡張機能のページを開きます。
3. ページの右上にある「デベロッパーモード」のトグルをオンにします。
4. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックして、作成した拡張機能のディレクトリ（フォルダ）を選択します。
## デバッグ方法
 ![](/uploads/3_b34eedf322.png) 
やっぱり最初の質問でいきなり動くものは作れないので、これもChatGPTにエラーの内容を修正してもらいながら進めます。各種デバッグの方法を記載します。
1. chrome://extensions/ にアクセスします。
2. インストールした拡張機能のリストから、デバッグしたい拡張機能の「詳細」ボタンをクリックします。
3. 「バックグラウンドページ」のセクションに「検証」または「background.html」のリンクが表示されている場合、それをクリックすることで、Chrome Developer Toolsが開きます。
4. ポップアップをデバッグするには、拡張機能のアイコンをクリックしてから右クリックし、「検証」を選択します。
5. コンテンツスクリプトのデバッグは、ページ上で右クリックして「検証」を選び、コンソールを開いてエラーやログを確認します。


## まとめ
 ![](/uploads/4_517f67b3ea.png) 
皆さんも是非、自分のChrome拡張機能を作成してみてください！
拡張機能欄に自分のアイコン（当社のロゴ）が表示された時はプチ感動しました。
構想中のものは、アクティブなタブに対して情報を取得し、日々の業務を楽にするような便利拡張機能なのですが、まだまだ試作中なので、具体的な拡張機能は次回としたいと思います。




Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #chrome

2023/10/27

2023/09/21