[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法

Chrome拡張画面(manu.html)からWebページの情報を取得する方法のご紹介です。
ajaxを使用してWebページにアクセスします。
(一般的なスクレイピングですが、これも使った技術なので記事にします。。。)

ajaxは使用しない、開いているタブの情報しか必要ない。という方は
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法](https://qiita.com/doran/items/7ccf10bb310ab46478d4)
をご覧ください。

今回の記事ではページ書き換えはできませんが、
***タブを開いていなくとも情報が取得できる***という違いがあります。

:::note info
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
[こちらがそのChrome拡張の記事です。ご興味があれば](https://qiita.com/doran/items/8c3ca80de3f149dce0e0)

[こちらは別のChrome拡張の記事です。合わせてどうぞ](https://qiita.com/doran/items/6613ea2d92b330bae2c9)
:::

#### 用意するファイル
```
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記事の閲覧数(ログインしていないと取れない情報)を設定します。
```html
<!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記事の情報を取得しています。
```js
$(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**は不要です。
```json
{
  "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を用意します。
```js
chrome.action.onClicked.addListener(function(){
  chrome.tabs.create({"url": "menu.html"});
});
```

#### 実行結果
1.Qiitaにログインしていない状態でChrome拡張を開くと。。。タイトルしか取れない。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/f6880364-7e40-1011-0842-99bb4dd310fc.png">
2.QiitaにログインしてからChrome拡張を開くと。。。閲覧数が取れた！
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/b1aec922-44c4-6087-c824-ac45aa5f667d.png">
おしまい。。
#### その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[[Chrome拡張]　ツールバーのアイコンをクリックしてHTMLページを表示する方法](https://qiita.com/doran/items/743f687eb413c41432e1)
[[Chrome拡張]　Chrome拡張メニューからページを操作する方法](https://qiita.com/doran/items/9203789b570632e2456e)
[[Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法](https://qiita.com/doran/items/faf21f816b168606cfbe)
[[Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/c2c5c225691fd423b2e6)
[[Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/2620b2c8f2ac2c5548b6)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法](https://qiita.com/doran/items/8045701ba688f50d6295)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/817432932bf77c781002)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法](https://qiita.com/doran/items/7ccf10bb310ab46478d4)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)](https://qiita.com/doran/items/e69ba19cbd2f5049bc97)
[[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法](https://qiita.com/doran/items/c2d3249c53b97ddeed0d)
[[Chrome拡張]　ポップアップメニューを表示する方法](https://qiita.com/doran/items/6684c939c5dc2b9d091a)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法](https://qiita.com/doran/items/c34be1c03353a02cd04f)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/6b7181e369cd1be7dfc4)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)](https://qiita.com/doran/items/00ea4f88862031811ed4)
[[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法](https://qiita.com/doran/items/38a89bcaf4b89c758725)
[[Chrome拡張]　オプションページを表示する方法](https://qiita.com/doran/items/8154f96c200b73bb9e38)