Denen blog

株式会社電縁の社員によるブログです。

社内向けに Google Chrome 拡張機能を作ってみた

f:id:yasuaki-sakai:20170807170253j:plain

こんにちは、イノベーションオフィスの吉田です。

梅雨が明けてからの方が雨が多いですが、皆様いかがお過ごしでしょうか?

 

今回は Google Chrome拡張機能を作成し、社内向けに公開してみたのでそのご紹介をしたいと思います。

※アプリの内容はあくまでイメージです。

拡張機能とは

最近は Chrome ウェブアプリなんて呼ばれ方もしていますが、Google Chrome に追加できる便利機能みたいなものです。

基本的に、機能の検索やダウンロードは Chrome ウェブストアから行います。

chrome.google.com

広告の表示をブロックする「Adblock」など、一度は使用した事があるのではないでしょうか?

拡張機能の作り方

拡張機能はHTML、CSSJavaScriptで作られています。

画面が必要ない(特定のページで勝手に動作する)アプリで有れば JavaScript のみで作れます。

JavaScript では表示されているHTMLのDOMにアクセスが可能で、一部のAPIも利用が可能です。

その他詳しい内容は以下が参考になります。

qiita.com

そしてパッケージングする時は、そのファイル群にManifest Fileを追加して、zipで固めるだけです。

それでは今回作成した拡張機能のソース(js1つ、Manifest1つ)を見ていきましょう。

ifilter.js

var f = document.getElementsByTagName("FORM");
if (f.length > 0) {
  if (f[0].action == "http://inetnf.msg/envelope.cgi" || f[0].action == "https://inetnf.msg/envelope.cgi") {
    f[0].getElementsByTagName("input")[0].click()
  }
} else if (document.getElementsByTagName("PRE")[0].innerText == "このページは「i-FILTER」によりブロックされました。") {
  var a = document.createElement("a");
  var txt = document.createTextNode("Googleのキャッシュを表示してみる");
  a.setAttribute("href", "http://webcache.googleusercontent.com/search?q=cache%3A" + encodeURI(location.href));
  a.appendChild(txt);
  document.body.appendChild(a);
}

こちらのjsファイルがおこなっていることは、以下の2つになります。

  1. 特定のページ宛てのFORMが有る場合、FORM内の最初の要素のボタンをクリックする。
  2. FORMが無くても、ページ内に特定の文字が有った場合、Googleのキャッシュへのリンクを表示する。

※あくまでイメージなので、追求はしないで下さい。

manifest.json

{
  "manifest_version": 2,
  "name": "ifilter_clicker",
  "version": "0.1.0",
  "description": "Click i-FILTER button.",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["ifilter.js"]
    }
  ]
}

こちらは Manifest File になります。

見ればなんとなくわかると思いますが、詳しくは以下を参考にしてください。

qiita.com

特徴的なのは contest_scripts の matches でしょうか。

全てのサイトで処理を実行したいので "<all_urls>" という書き方をしています。

Chrome ウェブストアへ登録

あとはウェブストアに登録をするだけです。

まずはGoogleユーザでログインした状態で Chrome ウェブストアへアクセスしましょう。

そうすると画面右上のメニューから「デベロッパー ダッシュボード」に入る事が出来ます。

f:id:yasuaki-sakai:20170807170602j:plain

続いて「新しいアイテムを追加する」ボタンを押し、登録を行っていきます。

f:id:yasuaki-sakai:20170807170709j:plain

初めて登録する際には規約の確認が有りますので、規約をよく読んでから「同意する」を押してください。

f:id:yasuaki-sakai:20170807170817j:plain

それでは拡張機能を登録していきます。

先ほどのファイル群を zip に固めてアップロードしてください。

f:id:yasuaki-sakai:20170807170902j:plain

アップロードが完了すると、情報の入力画面になりますので適宜必要な情報を入力してください。

最低限必要なのは以下になります。

  • カテゴリ
  • 言語
  • 公開設定オプション

f:id:yasuaki-sakai:20170807174147j:plain

ここで公開設定オプションに関して注意が有ります。

今回は社内向けの公開なので「非公開」かつ「denen.com のすべてのユーザー」を選択します。

f:id:yasuaki-sakai:20170807171047j:plain

ただ、この「denen.com のすべてのユーザー」が選択出来るようになるためには、Google Apps の管理者に以下の設定をしてもらう必要が有ります。

support.google.com

最後に「変更を公開」ボタンを押して拡張機能を公開します。

※反映には最大1時間ほどかかるようです。

注意点

先ほどのウェブストアへの登録時に少し触れましたが、組織向けの公開には管理者の協力が必要となってきます。

ただ、この公開方法に限り無料で拡張機能を公開出来るという利点があります。

※これ以外の登録方法では、最初にデベロッパー登録手数料(US$5.00)がかかります。

まとめ

と言うわけで Google Chrome拡張機能の作成~登録までのご紹介でした。

シンプルな機能だったせいもありますが、簡単に出来るということが実感出来たのではないでしょうか?

※内容はあくまでイメージですが、それでもどうしても気になるという方はお問い合わせください(笑)

それでは、また。

 

書いた人:イノベーションオフィス 室長 吉田

f:id:yasuaki-sakai:20170405150919p:plain