--- title: Chrome拡張機能でタブの情報を取得する方法 tags: chrome-extension Chrome拡張 拡張機能 author: plumfield56 slide: false --- この記事ではChrome拡張機能でタブの情報を取得する方法として htmlファイルからJavaScriptファイルを呼び出す方法と backgorundからjsファイルを呼び出す方法を紹介しています。 またタブの情報取得はchrome.tabs.queryで行います。 chrome.tabsの公式ドキュメントは[こちら](https://developer.chrome.com/extensions/tabs) chrome.tabs.queryの第一引数で使用できるパラメーターと 実行時に第二引数の仮引数に入るオブジェクト情報はそれぞれ下記です。 ・[パラメーター](https://developer.chrome.com/extensions/tabs#method-query) ・[タブが持っているオブジェクト情報](https://developer.chrome.com/extensions/tabs#type-Tab) # htmlファイルからjsファイルを呼び出す場合 ```:フォルダ構造 フォルダ ├ manifest.json ├ popup.html ├ popup.js └ icon.png ``` ```json: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を書いても実行されないので、 必ず別ファイルを読み込ませる。 ```html:popup.html ``` ## 全てのタブ情報を取得する場合 第二引数でタブ取得時の実行内容を記載 タブの情報を仮引数に代入して処理を実行 ```javascript:popup.js 'use strict' { chrome.tabs.query({}, tabs => { const results = document.getElementById('results'); const titles = []; for(let i=0; i { const results = document.getElementById('results'); const titles = []; for(let i=0; i| |:-:| # backgroundで直接jsファイルを呼び出す場合 ```:フォルダ構造 フォルダ ├ manifest.json ├ event.js └ icon.png ``` ```json: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" ] } ``` ```javascript:event.js 'use strict' { chrome.tabs.query({}, tabs => { for(let i=0; i この記事は[Chrome拡張機能の作り方](https://qiita.com/plumfield56/items/680ce9a166282b7ae84c)の一部のコンテンツです。