Chrome拡張のボタンでスロットを遊べる北半球で一番くだらない拡張の開発を中断しました

こういうのです

実際はもうちょっとなめらかに動きます

特長

• 動かすのに4つも拡張をインストールする必要がある
  • この方向を広げて行けば拡張ボタンで麻雀だってできる
• 仕事をしながらスロットで遊べる画期的なツール
  • ボスが来たら偽装アイコンを表示する、みたいなことも簡単にできる

技術的な話

• canvasで画像をボタンの画像に指定している
  • setTimeoutで回転画像を作っては画像を書き換えてる
  • chromeはそういう挙動を想定してなさそうで、回転中はchromeの動作が重くなります
• slotボタンの拡張(ベース拡張)がリール回転数、数を抽選し、chrome.runtime.sendMessage で各リールに抽選情報を伝えます
• リールは表示まで完了したらベース拡張にレスポンスする
• 数が一致した状態で、レスポンスが全て帰ってきた場合には、当選を伝えるタブが開く

みたいなことをやってます。Androidはてなハイククライアント作り始めたので、開発を中断しました。以下ソースコードです。汚いですがどうぞご利用ください。

ソースコード

ベースの拡張

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = 'arial';
context.fillStyle = "rgb(0,0,0)";
context.strokeText('slot', 0, 19);
var imageData = context.getImageData(0, 0, 19, 19);

var slotIDs = [
  'extension ID1',
  'extension ID2',
  'extension ID3'
];

chrome.browserAction.setIcon({
  imageData: imageData
});

function setLots() {
  var lot1 = drawLot();
  var lot2 = drawLot();
  var lot3 = drawLot();
  var lots = [lot1, lot2, lot3];
  return lots;
}

chrome.browserAction.onClicked.addListener(function() {
  var lots = setLots();
  console.log(lots)
  if(lots[0] === lots[1] && lots[1] === lots[2]) {
    slotStart(lots, function(responses) {
      chrome.tabs.create({url: "content/content.html"});
    });  
  } else {
    slotStart(lots, function() {

    });
  }
});

function slotStart(lots, callback) {
  async.parallel([2, 4, 3].map(function (e, i) {
    return function (cb) {
      chrome.runtime.sendMessage(slotIDs[i], {
        action: 'slotStart',
        roll: e,
        lot: lots[i]
      }, function (response) {
        console.log(response);
        return cb(null, response);
      });
    }
  }), function (err, responses) {
    return callback(responses);
  });
}

function drawLot() {
  return 1 + Math.floor( Math.random() * 9 );
}

リール拡張

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

//表示されている数
var slotNumber = 1;

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
  if (message.action === 'slotStart') {
    var lotNumber = message.lot; //抽選された数
    var rollNumber = message.roll;　//指定されたリールの回転数

    //初期化
    var roll = 0; //回転数
    var sc = 0; //キャンバス移動用の変数

    //リールの回転部分
    var scroll = function(sendResponse) {
      //描画部分
      context.clearRect(0, 0, 19, 19);
      context.font = '16pt arial';
      context.fillStyle = "rgb(0,0,0)";
      context.strokeText(slotNumber, 0, 30-sc);
      var imageData = context.getImageData(0, 0, 19, 19);

      chrome.browserAction.setIcon({
        imageData: imageData
      });
      sc = sc + 1;

      function displayNextNumber() {
        sc = 0;
        slotNumber = slotNumber + 1;
        scroll(sendResponse);        
      }

      //条件
      if(rollNumber === roll && lotNumber === slotNumber) {
        if(sc!==13) {
          setTimeout(scroll(sendResponse), 60);
        } else {
          sendResponse('mechairoi');
        }
      } else {
        if(sc!==32) {
          setTimeout(scroll(sendResponse), 60);
        } else {
          if(rollNumber === roll) {
            if(lotNumber === slotNumber) {
            } else {
              displayNextNumber();
            }
          } else {
            if(slotNumber === 9) {
              slotNumber = 0;
              roll = roll + 1;
            }
            displayNextNumber();
          }
        }
      }
    };
    scroll(sendResponse);
  } else if (message.action === 'slotReach') {

  }
});