Auto-Translatorってエクステンションが大好きでした。
グーグルクロームの拡張機能なんですけど、
これがとーっても便利なんですよ。
どう便利なのかっていうと、
読めない英語を読めない部分だけ読めるようにしてくれるっていう
ブラウザのアプリなんです。
使い方は超簡単で、英語記事とか読んでる時に読めない英語を選択して、
右クリックするんです。すると、その読めない位置にメッセージボックスが出てきて、
その中に翻訳と原文のメッセージが現れるんです！！
もうこれが大好きで、しばらく使ってたんですね。
でもある日から、広告がチラーっと出るようになったんですよ。
「無料だし、しゃーねーか」と思ってたら、その後どんどん広告酷くなっていって、
もうなんとしても押さしてやるぜみたいな○ントリーウェルネスもびっくりする様な
なんかとっても「ワルい」広告になってきたんですね。
キャッチコピーじゃなくて、押させる仕組みな分こっちのが性質が悪いんですよ。
簡単にマネタイズできるってなると、やっぱああやってなっちゃうのかなって
ちょっと寂しくなったという経験がありました。
だから今回、こういうの作れないかなーと思って調べてました。
そしたら準備ができたので記事書いてみました。
作るかどうかはわかりませんが、あれほしーなー。
300円くらいなら全然買うのになー。広告ないやつ。
無駄に長い前フリの意味がそんなにありませんでしたが、
本日もどうかよろしくお願いします。
あ、ちなみに、今回はクロームのメニューの方にボタンつけて、
helloworldってやる記事になります。
INDEX
クロームエクステンション作成準備
何処でも良いのでフォルダを作成します。
パスが分かりづらくなるからとか考えなくても
エクステンションの読み出しはエクスプローラから出来ます。
だから何処でも良いです。
/root
|_main.html
こんな感じでファイル作っておいて下さい。
manifest.jsonの設定
自分のマシンの中だけでの作成準備です。
manifest.jsonっていうjsonファイルを準備します。
この中にバージョンの情報と、アプリケーションの名前と
マニフェストのバージョンとその説明を設定します。
一応これだけ書けばエクステンションとして認識はするようです。
何にもできないですけどね。
manifest.json
{
"name": "hajimete dayo",
"version": "0.1",
"manifest_version": 2,
"description": "test trancelate" //必須ではないようです
}
この時manifest_versionを2にしておかないと、エラーでます。
the manifest version key must be present and set to 2 (without quotes).
こんな感じの文字が入ったやつがでます。注意してください。
拡張機能の有効化
グーグルの右上のレンチアイコンがあった場所にある
よく分からんアイコンのメニューから
設定→拡張機能と辿ります
拡張機能って書いてある見出しのすぐ下に
二つボタンが並んでいるので
「パッケージ化されていない拡張機能を読み込む」
の方をクリックします。
そしたらエクスプローラが出てくるので、
さっき作ったファイルを探してクリックします。
設定があってれば、プラグインの一覧に表示されます。
ポップアップさせる
それが終わったら、ポップアップさせるように
main.htmlとmanifest.jsonを編集していきます。
main.htmlの中に
<html>
<body>
<span>Hello, World!</span>
</body>
</html>
と書いて
manifest.jsonには
"browser_action": {
// "default_icon": "icon.png",
"default_title": "abesi",
"default_popup": "main.html"
}
コレを追加してください。
'browser_action' is only allowed for extensions, but this is a legacy packaged app.
コレが出てくる人は、page_actionとかappとか別のもの書いてると思うので、このmanifest.jsonをこうしてください。
manifest.json全文
{
"name": "hajimete dayo",
"version": "0.1",
"manifest_version": 2,
"description": "test trancelate",
"browser_action": {
// "default_icon": "icon.png",
"default_title": "abesi",
"default_popup": "main.html"
}
}
これをやったら
リロードをします。
これで準備完了なので、
各々で開発していってください！
僕も気が向いたらやってみたいなぁと思います。
jsとhtmlが分かれば結構開発できそうなので、
練習にどうでしょう。
https://dev.screw-axis.com/doc/chrome_extensions/
リファレンスもちゃんと日本語になってるので
開発がやりやすいかも知れませんよ！
