こんなに簡単にできるのか！完全初心者がgithub見ながら４時間でGoogleChrome拡張を作ってみた！

Chrome拡張とは？

Chrome拡張はGoogleChromeに追加できるアプリケーションの総称です。
Chrome拡張ストアに行くと、いろいろな拡張機能がダウンロードし放題です。

引用：
https://chrome.google.com/webstore/category/extensions?hl=ja

今まではこれらを「使う側」だったんですが、そういえば５年ほど前にGoogleの拡張機能の開発者ライセンスを購入していたのを思い出しまして…

思い立ったら開発しようということで、さくっと拡張機能を作ってみました。
書いたコードは30行くらいです（短）

コード一式

manifest.json

{
  "name": "MyTestChromePopupExtention",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Test popup extention",
  "icons": {
    "128": "icons/icon128.png"
  },
  "browser_action": {
    "default_title": "",
    "default_icon": "icons/icon128.png",
    "default_popup": "popup.html"
  }
}

popup.html

test popup

popup.js

const txtDate = document.getElementById("txtDate");

txtDate.addEventListener('keyup', function(){
  const result = document.getElementById("txtDateResult");
  const date = moment(txtDate.value).toDate();
  result.value = date.getTime().toString();
});

script.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({"url": "newtab.html" });
});

icon_clicked.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({"url": "newtab.html" });
});

とさくさくと記述。

ファイル配置はこのように配置しました。
ここまででChrome拡張は完成です（え、こんなに簡単なの？）

あとはGoogleChromeに拡張機能をロードしていきましょう！

①まずはアドレスバーに「chrome://extensions/」と打ち込んで拡張機能を表示。
②ストア外からのインストールなので開発者モードをオン。
AppStoreのようにAppleやGoogleの認可が下りていないアプリはまだストアには並べられないので、開発者モードでインストールです。

③パッケージ化されていないファイルをChromeに読み込んで完了です。
　Google Chromeの右上にpopup.htmlに記述した「test popup」
　

という文字が現れました。
あとはここをiframeか何かに差し替えて、動的ページにしようかなって思っています。

詰みポイント①

developer.chrome.com
引用：
https://developer.chrome.com/docs/extensions/

ドキュメントが英語なことくらいですね。
自分だけが使うソフトだけじゃなくなるので、Chrome拡張の公開規約を読むのがめんどくさそうです。
利用ユーザの情報のどこまでアクセスしていいの？とか権限周りです。

github.com
引用：
https://github.com/googlechrome

githubに結構リポジトリがまとまっていて開発しやすそうだなっていう印象です。
というより、１日でChrome拡張が作れて感動しています。
開発の方法は理解できたので、人気が出そうな拡張を作って行こうと思います。

詰みポイント②

拡張機能のアイコンがアメーバマークでとにかくダサい。

こんなダサいアプリ世間様に公開できないよねということで拡張機能を公開できるわけないということで、
拡張機能のアイコンを変更。

qiita.com
引用：
https://qiita.com/mdstoy/items/9866544e37987337dc79

manifest.jsonの書き方をぐぐってみると
こんな具合らしい。
おまけでdefault_locale,descriptionも書いておきました。

最後にデモ動画

youtu.be

引用：
https://www.youtube.com/watch?v=XPSaYwh29dM

アイコンをクリックするとポップアップが表示されていまして大成功です。
これで私もアプリ開発者デビューです。

どうせプログラミング得意だからできたんじゃないの？って声が聞こえそうですが…
このコードの開発にはjsを使いますが、私は.jsはできないです。
ただ単純に調べながら書いただけです。
たぶん完成は年明けなんだろうなと思っていたら、こんなにも早く完成してびっくりです。