読者です 読者をやめる 読者になる 読者になる

うつろぐ

文章

Google検索した際のデータを、自分のページのサーバーのMySQLに投げるChrome拡張をつくる

動機

ゼミで「サーバーサイドをやっていこう」って感じになって、phpやってMySQLやって、みたいな感じになった。そのときに「何かデータベースを作ってこい」という課題が出たので変なデータベースを作ってやろう、となって、Google検索をした際のキーワード・日時をデータベースにしたら何となく面白そうかな、と思ったのでめちゃくちゃ苦戦しながらやってみました
何せサーバーサイド自体初めてなので酷くグダりました

試行錯誤の大まかな流れ

まあGoogle検索をかけると動作するようなChrome拡張だろうとなる
Chrome拡張の内部には流石にphpは書けないので別phpページで送信しようとなる
Chrome拡張からphpページへhttpリクエストを飛ばそうとしてみる
phpページがhttpなのでhttpsGoogle検索ページからhttpリクエストを送るとだめっぽい
→GETを含めたリダイレクト(Google検索→phpページ→Google検索)で何とかならないかな?となる
Google検索のページの仕様を利用して何とかなる

GETの値でMySQLにデータを投げてGoogle検索ページにリダイレクトするphpページ

まずはここですね。 そこまで説明は要らないと思います。
日時はphpのdateにあるものをつかう
リダイレクトはjsで書く方がすきなのでそうしています

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>SUBMIT</title>
  <meta charset="utf-8"></meta>
</head>

<body>
  <?php
  $mysqli=new mysqli("localhost","username","password");
  $mysqli->set_charset("utf8");
  $mysqli->select_db("user_db");

  $query=$_GET["q"];
  $year=date("Y");
  $month=date("n");
  $day=date("j");
  $hour=date("G");
  $minute=date("i");
  if($query!=""){ //キーワードが空の場合はデータベースに挿入しない
    $sql="INSERT into GoogleQuery_table (query,year,month,day,hour,minute) values ('$query',$year,$month,$day,$hour,$minute)";
  }
  $mysqli->query($sql);

  $close_flag=$mysqli->close();
  if($close_flag){
    if($query!=""){
      //phpのリダイレクトはめんどいのでjsで書いてしまう
      echo "<script>window.location.href='https://www.google.co.jp/search?first=false&q=";
      echo $que;
      echo "';</script>";
    }
  }
   ?>
</body>
</html>

リダイレクト先の「first=false」はリダイレクトの無限ループを防ぐためのフラグのようなものです。(勝手に追加した)
これについては後述します

Chrome拡張

まずmanifestファイルから。これは何も難しいことやってません
example.comはさっきのphpページが置いてあるドメイン名にあたります

{
  "manifest_version": 2,
  "name": "検索ログくん",
  "description": "検索ログをおれのMySQLに送る。自分用。",
  "version": "1.0.0",

  "content_scripts": [{
    "matches": ["https://www.google.co.jp/search*"],
    "js": ["myscript.js"]
  }],

  "permissions": [
    "http://www.google.com/",
    "https://www.google.com/",
    "http://example.com/"
  ],

  "icons": {
    "16": "./がぞう.png",
    "48": "./がぞう.png",
    "128": "./がぞう.png"
  }
}

次にjs。今回の肝です
思いついた瞬間に「あああああ!」となって書いたのでかなり汚いです
submit.phpはさっきのphpページです

var url=window.location.href;
var query;

//qを抜き出してそれを用いてリダイレクト
if((url.indexOf("https://www.google.co.jp/search?q")!=-1) && (url.indexOf("#q=")==-1)){
  //新規タブ初めての検索のとき(first=falseなし、#qなし)
  query=url.substring(url.indexOf("q")+2,url.indexOf("&"));
  window.location.href="http://example.com/submit.php?q="+query;
}else if ((url.indexOf("https://www.google.co.jp/search?first=false")!=-1) && (url.indexOf("#q=")!=-1)) {
  //二回目以降の検索のとき(first=falseあり、#qあり)
  query=url.substr(url.indexOf("#q")+3);
  window.location.href="http://example.com/submit.php?q="+query;
}

何やら奇っ怪な条件のもとでリダイレクトしています。
これを説明するより、Google検索ページの仕様を説明したほうがわかりやすいのでそうします

Chromeで新しいタブからキーワードtestでGoogle検索をするとこんな感じのURLになります。
https://www.google.co.jp/search?q=test&oq=test&aqs=chrome.よくわかんねえ数字と記号の羅列&sourceid=chrome&ie=UTF-8
ここからこのようによくわからん箇所を省いても同じページが出ます
https://www.google.co.jp/search?q=test
更にここからこのように架空のGET変数を追加しても同じページが出ます
https://www.google.co.jp/search?first=false&q=test
で、上の三つのURLのとき新しくtest2で検索すると、URLの末尾に「#q=test2」というのが付加されます
こうなるとq=testがあってもtest2の検索結果を示すようです

…以上の仕様を上手いこと利用してGET込みのURLをフラグとして用い、リダイレクトの無限ループから抜け出すコードが
上のコード(+さっきのphp)になります 説明がへたくそすぎてもう読んでくれとしか言えない

おわりに

今回httpリクエスト辺りを試しているところで「セキュリティ関連むずすぎる」になりました むずすぎる ご唱和ください むずすぎる
やはりローカルでものを作っていたときより遥かに足止めを食らう確率が上がりましたね
ローカルでのプログラミング経験がない人はプログラムの書き方でも足止めを食らうことになるので、稀にいるサーバーサイドから始める人ってめちゃくちゃコーディング嫌いになりそうだなとおもいました

おわり