Chrome拡張画面(manu.html)からWebページの情報を取得する方法のご紹介です。
ajaxを使用してWebページにアクセスします。
(一般的なスクレイピングですが、これも使った技術なので記事にします。。。)
ajaxは使用しない、開いているタブの情報しか必要ない。という方は
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法
をご覧ください。
今回の記事ではページ書き換えはできませんが、
タブを開いていなくとも情報が取得できるという違いがあります。
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
こちらがそのChrome拡張の記事です。ご興味があれば
用意するファイル
root/
├ manifest.json
├ menu.html
├ js/
│ ├ background.js
│ ├ menu.js
│ └ jquery-3.5.1.min.js
└ img/
├ icon32.png
└ icon48.png
menu.html
div#titleにQiita記事のタイトル、
div#viewにQiita記事の閲覧数(ログインしていないと取れない情報)を設定します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ページへアクセステスト</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<div id="title" style="width: 100%;"></div>
<div id="view" style="width: 100%;"></div>
</body>
</html>
menu.js
ajaxでページにアクセスします。
取得したHTMLから情報を取得し、menu.htmlに取得した情報を設定します。
今回は自分が書いたQiita記事の情報を取得しています。
$(function(){
$.ajax({
url: "https://qiita.com/doran/items/743f687eb413c41432e1",
type: "GET",
contentType: "application/json",
success: function(ret, status, xhr){
var form = $(ret);
$("#title").text(form.find(".style-i6kwh0").text());
$("#view").text(form.find(".style-ts8v8w>span").text());
},
error: function(XMLHttpRequest, status, errorThrown) {
console.log(errorThrown);
}
});
});
manifest.json
host_permissionsに
Chrome拡張メニューやContent ScriptsからアクセスするURLを指定します。
permissionsは不要です。
{
"name": "ページへアクセステスト",
"version": "1.00",
"description": "ページへアクセステスト",
"host_permissions": ["https://qiita.com/doran/items/*"],
"permissions": [],
"background": {
"service_worker": "js/background.js"
},
"action": {
"default_icon": {
"32": "images/icon32.png"
}
},
"icons": {
"48": "images/icon48.png"
},
"manifest_version": 3
}
background.js
Chromeブラウザのツールバーにあるアイコンがクリック時に「menu.html」を
新しいタブで開くためにbackgroundを用意します。
chrome.action.onClicked.addListener(function(){
chrome.tabs.create({"url": "menu.html"});
});
実行結果
1.Qiitaにログインしていない状態でChrome拡張を開くと。。。タイトルしか取れない。
2.QiitaにログインしてからChrome拡張を開くと。。。閲覧数が取れた！
おしまい。。
その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[Chrome拡張] ツールバーのアイコンをクリックしてHTMLページを表示する方法
[Chrome拡張] Chrome拡張メニューからページを操作する方法
[Chrome拡張] Webページ(content scripts)からChrome拡張画面へメッセージを送る方法
[Chrome拡張] Chrome拡張画面でタイマー(定期実行処理)を使用する方法
[Chrome拡張] Content Scriptsでタイマー(定期実行処理)を使用する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)
[Chrome拡張] Chrome拡張メニューから開いていないWebページの情報を取得する方法
[Chrome拡張] ポップアップメニューを表示する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] ポップアップメニューからWebページを操作する方法(スタイル変更)
[Chrome拡張] ストレージ(chrome.storage.local)を利用する方法
[Chrome拡張] オプションページを表示する方法