GoogleChromeの拡張機能の自作

googleChromeの拡張機能を使って、自作のプラグインを作成する方法をシェアブラウザのタブの情報を取得し表示する、というプラグインの作り方。

icon.pngは適当なものを用意し、 manifest.json, extend.html, extend.jsは以下のものを使用する。

manifest.json

{
  "manifest_version": 2,
  "name": "display tabs info",
  "version": "1.0",

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

  "permissions": [
    "tabs"
  ]
}

直接<script></script>埋め込みは出来ないので、 <script src="extend.js"></script>のように外部ファイル読み込みにする。

extend.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Extension</title>
</head>
<body>
  <textarea id="results" rows="5" cols="40"></textarea>
  <script src="extend.js"></script>
</body>
</html>

chrome.tabs.query({}, function(tabs) { でtabsの情報をtabsに受け取り、その後の処理を行う

{active: true,lastFocusedWindow:true}で現在見ているページのみを指定する

今回はtabの情報を受け取り、result.valueにjoin()するようにする。 results=document.getElementById('results'); results.value = titles.join("\n");

extend.js

'use strict';

chrome.tabs.query({active: true,lastFocusedWindow:true}, function(tabs) {
  var i;
  var results=document.getElementById('results');
  var titles=[];

  for (i = 0; i < tabs.length; i++) {
    titles.push(tabs[i].title);
  }
  results.value = titles.join("\n");
  results.select(); //テキスト選択状態にしおく。
});