はじめてのChrome拡張機能 ページをポップアップさせる

はじめに

シングルディスプレイだと複窓をする機会がよくあります。時には3窓、4窓することもしばしば。そんな時に思うことがあります。

ブックマークバーとURLバー、邪魔だな......。

ということで、2クリックでポップアップウィンドウ化する拡張機能を作りました。

準備

そもそもjavascriptの知識が十分になかったので１からやり直した。
js-primer：ECMAScript 2018時代のJavaScript入門書

Chrome拡張機能については、色々読んだのですが結局公式のドキュメントが一番わかりやすかったです。
https://developer.chrome.com/extensions

設計

とにかく簡単にポップアップさせたかったので、コンテキストメニュー（右クリックで開くやつ）から動作させるようにします。こんな感じ。

超絶シンプルな機能なのでコードは短くできそうです。

コードを書く

manifest.json はこのようになりました。 permissions にはタブを操作するための "tabs" とメニューをいじるための contextMenus を記述する必要があります。

manifest.json

{
  "name": "popup browser",
  "description" : "Pop up browser",
  "version": "1.0.2",
  "manifest_version": 2,
  "permissions": ["contextMenus", "tabs"],
  "browser_action" :{
    "default_icon": "p.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "icons": { "16": "p.png"}
}

参考：https://developer.chrome.com/extensions/manifest

公式で用意されている Chrome APIs を利用して、中身を書いていきます。

background.js

// コンテキストメニューに要素を追加する
chrome.contextMenus.create({
  title: "ポップアウトさせる", 
  id: "popout", 
  contexts: ["all"], 
  onclick: () => {
    // 現在開いているタブのURLを変数 tab に格納する
    chrome.tabs.getSelected(tab => {
      // 現タブを閉じて、
      chrome.tabs.remove(tab.id);
      // 新たにポップアップウィンドウでURLを開く
      chrome.windows.create({
        url: tab.url,
        type: 'popup',
        // Youtubeで丁度よく窓化できるサイズ
        width: 650, height: 450,
        focused: true
      });
    });
  }
});

それぞれ用いた API のドキュメントです。
https://developer.chrome.com/apps/contextMenus
https://developer.chrome.com/extensions/tabs
https://developer.chrome.com/extensions/windows

非同期処理を扱うコードを１から書くのは初めてなのでどこかおかしいかもしれない。
が、まあ動くので大丈夫！（本当？）

おわりに

実際に使っているのですが、普通に便利で良いです。色々と作っていきたいですね。