Google ExtenstionのPluginをつくってみた

javascript google chrome extension

プログラミング

2016-10-03 21:01:26

英語版のGoogleで検索したい時には、ブックマークを利用してアクセスしていたのですが、プラグインで便利にできないかなーと思い、作ってみました。

デフォルトのブックマークが非表示で、Bookolio(ブクマを見やすくするやつ)とかいうプラグインを使っているニッチな人だと多少便利なプラグインかもしれません←自分

環境

  • Google Chrome
  • Javascript

仕様

プラグインの種類は色々ありますが、今回つくるのはこれです↓

【プラグインの画像】

プラグインのアイコンを押すと、Googleの英語版を新規タブで開いてくれるだけの超単純な機能です。

超単純なだけに伸びしろのある仕様ですね()

準備

先にフォルダとファイルを作っておきます。

└── search_by_english
    ├── background.js
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   └── icon48.png
    └── manifest.json

※アイコンは適宜用意してください。

background.jsというのはbackgroundで動作するJavaScriptです()
詳しくはDeveloper's Guideをご覧ください。

manifest.jsonを編集

manifest.json

{
  "name": "Open A Google English Edition In A New Tab",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Open a Google English Edition in a new tab.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "browser_action": {
      "default_icon": "icons/icon48.png"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

プラグインの種類によって記述が変わります。これといって難しいものではないので詳細はDeveloper's Guideをご覧ください。

background.jsを編集

background.js

コードはChrome extension: open link in new tab?を参考にさせて頂きました。
見ると何となくわかるかと思います。

詳しくはドキュメン(ry Developer's Guide

chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "https://www.google.co.jp/?hl=en&gws_rd=cr&ei=O2OgV4jODcS30gSs1Ihw";
  chrome.tabs.create({ url: newURL });
});

基本はjavascriptでホイホイかくわけですが、ブラウザの動作等に関してGoogleが用意するAPIを活用していく感じでしょうか。

所感

Atomのプラグイン開発とかもやってみたいです。

参考