Chromeのアドオン(拡張機能)開発メモ

最近はまっているのが、Chrome Addon Extensionsの開発である。もともとtampermonkeyを使っていたけどw Chrome Addonをつくりはじめたら、こっちの方が圧倒的に自由度が高いし配布しやすいwとりあえず、開発時に参考にしたページとかのメモを残していく。都度追記する予定。

Google Chrome Addon Extensionsの開発
chrome addonは実はソースコードが丸見え！
1. 配布されているChrome Addonのソースコードを覗くアドオン
  1. Chrome extension source viewer
2. Chrome Addonのインストールされている場所
chrome addonのソースコードの難読化と手法
1. 代表的な難読化：Javascript Obfuscator
オリジナルのChrome拡張機能をChromeWebストアで公開する
1. Chrome Webstore Dashboard

Google Chrome Addon Extensionsの開発

Javascriptを使っての開発となるが、基本的にはサンプルのコードを参考に開発を進めるのが良さそう；

参考になったページ

あと、githubで「WebExtension 」「manifest.json」とかで検索すれば、参考になりそうなソースも簡単に見つかる。

chrome addonは実はソースコードが丸見え！

配布されているChrome Addonのソースコードを覗くアドオン

CRXでアドオンを直ダウンロード

Chrome extension source viewer

Chrome extension source viewer - Chrome Web Store

View source code of Chrome extensions, Firefox addons or Opera extensions (crx/nex/xpi) from the Chrome web store and el...

ChromeのAddonインストール画面でCRXのアイコンを押すと
「ダウンロード」「ソースコードを見る」が実行できる。

このように非常に簡単にソースコードを見ることが可能である。

Chrome Addonのインストールされている場所

通常は、Chromeのaddonをインストールすると特定のフォルダにインストールされる。

Mac

~/Library/Application\ Support/Google/Chrome/Default/Extensions

Windows

C:\Users\\AppData\Local\Google\Chrome\User Data\Default\Extensions

Linux

~/.config/google-chrome/Default/Extensions/

参考:https://stackoverflow.com/questions/14543896/where-does-chrome-store-extensions

ただし、フォルダ名がユニークな文字列となっているためどのフォルダなのかは、一見するとわからない。chorome addonの設定画面を開く。クロームを開きURL「chrome://extensions/」を開いてあげれば、クローム拡張機能ごとにIDが振られているので、フォルダを特定することができる。

chrome addonのソースコードの難読化と手法

先ほど解説したように、Chromeアドオンは簡単にソースコードが見える状態になっている。コピーすればそのまま使うこともできてしまう。セキュリティ上の観点でいえば、インストールする前やインストールする前に悪意のあるコードがあるかないかを確認することができるので嬉しいことだが、デベロッパーとしては・・・ソースコードが丸見えでは簡単にコピーされてしまう事になり、それに関しては全く嬉しくない。

むしろJavascript全般において、ソースコードは誰でも見れる状態になるので難読化するプログラムを使って、ソースコードを読みにくくして公開を行うことが多い。

英語では、難読化プログラムのことを「Obfuscator」と呼び、海外のサービスでJavascriptを難読化するサービスが使われている。