メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

グーグルクローム拡張機能作成準備

PPW_memori

Auto-Translatorってエクステンションが大好きでした。
グーグルクロームの拡張機能なんですけど、
これがとーっても便利なんですよ。

どう便利なのかっていうと、
読めない英語を読めない部分だけ読めるようにしてくれるっていう
ブラウザのアプリなんです。

使い方は超簡単で、英語記事とか読んでる時に読めない英語を選択して、
右クリックするんです。すると、その読めない位置にメッセージボックスが出てきて、
その中に翻訳と原文のメッセージが現れるんです!!

もうこれが大好きで、しばらく使ってたんですね。
でもある日から、広告がチラーっと出るようになったんですよ。
「無料だし、しゃーねーか」と思ってたら、その後どんどん広告酷くなっていって、
もうなんとしても押さしてやるぜみたいな○ントリーウェルネスもびっくりする様な
なんかとっても「ワルい」広告になってきたんですね。
キャッチコピーじゃなくて、押させる仕組みな分こっちのが性質が悪いんですよ。
簡単にマネタイズできるってなると、やっぱああやってなっちゃうのかなって
ちょっと寂しくなったという経験がありました。

だから今回、こういうの作れないかなーと思って調べてました。
そしたら準備ができたので記事書いてみました。

作るかどうかはわかりませんが、あれほしーなー。
300円くらいなら全然買うのになー。広告ないやつ。

無駄に長い前フリの意味がそんなにありませんでしたが、
本日もどうかよろしくお願いします。

あ、ちなみに、今回はクロームのメニューの方にボタンつけて、
helloworldってやる記事になります。

クロームエクステンション作成準備

何処でも良いのでフォルダを作成します。
パスが分かりづらくなるからとか考えなくても
エクステンションの読み出しはエクスプローラから出来ます。
だから何処でも良いです。

/root
|_main.html

こんな感じでファイル作っておいて下さい。

manifest.jsonの設定

自分のマシンの中だけでの作成準備です。
manifest.jsonっていうjsonファイルを準備します。
この中にバージョンの情報と、アプリケーションの名前と
マニフェストのバージョンとその説明を設定します。

一応これだけ書けばエクステンションとして認識はするようです。

何にもできないですけどね。

manifest.json

<br />
{<br />
  &quot;name&quot;: &quot;hajimete dayo&quot;,<br />
  &quot;version&quot;: &quot;0.1&quot;,<br />
  &quot;manifest_version&quot;: 2,<br />
  &quot;description&quot;: &quot;test trancelate&quot; //必須ではないようです<br />
}<br />

この時manifest_versionを2にしておかないと、エラーでます。
the manifest version key must be present and set to 2 (without quotes).
こんな感じの文字が入ったやつがでます。注意してください。

拡張機能の有効化

グーグルの右上のレンチアイコンがあった場所にある
よく分からんアイコンのメニューから
設定→拡張機能と辿ります

basho

拡張機能って書いてある見出しのすぐ下に
二つボタンが並んでいるので

「パッケージ化されていない拡張機能を読み込む」
の方をクリックします。

rentiaikon2

そしたらエクスプローラが出てくるので、
さっき作ったファイルを探してクリックします。
設定があってれば、プラグインの一覧に表示されます。

ポップアップさせる

それが終わったら、ポップアップさせるように
main.htmlとmanifest.jsonを編集していきます。

main.htmlの中に

<br />
&lt;html&gt;<br />
  &lt;body&gt;<br />
    &lt;span&gt;Hello, World!&lt;/span&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;<br />

と書いて
manifest.jsonには
<br />
  &quot;browser_action&quot;: {<br />
      //    &quot;default_icon&quot;: &quot;icon.png&quot;,<br />
          &quot;default_title&quot;: &quot;abesi&quot;,<br />
          &quot;default_popup&quot;: &quot;main.html&quot;<br />
   }<br />

コレを追加してください。

‘browser_action’ is only allowed for extensions, but this is a legacy packaged app.

コレが出てくる人は、page_actionとかappとか別のもの書いてると思うので、このmanifest.jsonをこうしてください。

manifest.json全文

<br />
{<br />
  &quot;name&quot;: &quot;hajimete dayo&quot;,<br />
  &quot;version&quot;: &quot;0.1&quot;,<br />
  &quot;manifest_version&quot;: 2,<br />
  &quot;description&quot;: &quot;test trancelate&quot;,</p>
<p>  &quot;browser_action&quot;: {<br />
      //    &quot;default_icon&quot;: &quot;icon.png&quot;,<br />
          &quot;default_title&quot;: &quot;abesi&quot;,<br />
          &quot;default_popup&quot;: &quot;main.html&quot;<br />
   }</p>
<p>}<br />

これをやったら
リロードをします。

rentiaikon3

これで準備完了なので、
各々で開発していってください!
僕も気が向いたらやってみたいなぁと思います。
jsとhtmlが分かれば結構開発できそうなので、
練習にどうでしょう。

http://dev.screw-axis.com/doc/chrome_extensions/

リファレンスもちゃんと日本語になってるので
開発がやりやすいかも知れませんよ!

関連記事

  1. PHPサムネイル

コメントをお待ちしております