Help us understand the problem. What is going on with this article?

Chrome拡張機能でタブの情報を取得する方法

この記事ではChrome拡張機能でタブの情報を取得する方法として
htmlファイルからJavaScriptファイルを呼び出す方法と
backgorundからjsファイルを呼び出す方法を紹介しています。

またタブの情報取得はchrome.tabs.queryで行います。
chrome.tabsの公式ドキュメントはこちら

chrome.tabs.queryの第一引数で使用できるパラメーターと
実行時に第二引数の仮引数に入るオブジェクト情報はそれぞれ下記です。

パラメーター
タブが持っているオブジェクト情報

htmlファイルからjsファイルを呼び出す場合

フォルダ構造
フォルダ
 ├ manifest.json
 ├ popup.html
 ├ popup.js
 └ icon.png
manifest.json

{
  "manifest_version": 2,
  "name": "Show Tab Info",
  "version": "1.0",

  "browser_action": {
    "default_icon": {
      "16": "icon.png"
    },
    "default_popup": "popup.html"
  },

  "permissions": [
    "tabs"
  ]
}

htmlファイル内のscriptタグ内でJavaScriptを書いても実行されないので、
必ず別ファイルを読み込ませる。

popup.html
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="popup.js"></script>
</body>
</html>

全てのタブ情報を取得する場合

第二引数でタブ取得時の実行内容を記載
タブの情報を仮引数に代入して処理を実行

popup.js
'use strict'
{
  chrome.tabs.query({}, tabs => {
    const results = document.getElementById('results');
    const titles = [];

    for(let i=0; i<tabs.length; i++){
      // console.log(tabs[i].title);
    }
  });
}

現在のタブ情報のみを取得する場合

lastFocusedWindow:trueで最後にフォーカスが当たったウィンドウを選択
active: trueでアクティブなタブを選択

popup.js
'use strict'
{
  chrome.tabs.query({active: true, lastFocusedWindow:true}, tabs => {
    const results = document.getElementById('results');
    const titles = [];

    for(let i=0; i<tabs.length; i++){
      console.log(tabs[i].title);
    }
  });
}

ログを出す場合は作成されたアイコンを右クリック⇒ポップアップを検証のConsoleタグで確認が可能です。

2020-05-16_13h09_02.png

backgroundで直接jsファイルを呼び出す場合

フォルダ構造
フォルダ
 ├ manifest.json
 ├ event.js
 └ icon.png
manifest.json
{
  "manifest_version": 2,
  "name": "Show Tabs Info",
  "version": "2.0",

  "browser_action": {
    "default_icon": {
      "16": "icon.png"
    }
  },

  "background": {
    "scripts": ["event.js"],
    "persistent": false
  },

  "permissions": [
    "tabs"
  ]
}
event.js
'use strict'

{
  chrome.tabs.query({}, tabs => {
    for(let i=0; i<tabs.length; i++){
      console.log(tabs[i].title);
    }
  });
}

backgroundのログを見る場合は下記から確認

2020-05-16_17h49_46.png

この記事はChrome拡張機能の作り方の一部のコンテンツです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away