2014年12月11日 Flashゲームをpopupで表示するGoogle Extensionを作成する Chrome Extension いくつかのFlashゲームをサイズ変更可能なpopupで表示するGoogle Extensionを作成する。すべてのFlashゲームに対応するのは当然無理なので、ユーザの多そうなDMMとスクウェアエニックスの汎用的な処理で対応できそうなFlashゲームに絞って対応した。 二つのタイプ Google Extensionには大きく分けると以下の二種類に分類できる。 Page action Browser action 常時表示するタイプがBrowser action、特定ページのURLでのみアドレスバー内で表示されるのがPage actionで、どちらが優れているとかそういった比較するものではない。 今回は対応するゲームはそのゲームを実行しているURLが決
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
new $.Deferred() で Deferred のオブジェクトを生成する。 非同期処理が完了した時点で、生成しておいた Deferred オブジェクトの resolve() メソッドを実行する。 Deferred オブジェクトの promise() メソッドを実行し、その戻り値(promise オブジェクト)の then() メソッドに非同期処理の後に実行したい処理を渡す。 then() はメソッドチェーンができるので、 var d = new $.Deferred(); async(function() { console.log('async'); d.resolve(); }); d.promise() .then(function() { console.log('hoge'); }) .then(function() { console.log('fuga'); });
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
localStorageだとオプションでunlimitedStorageを指定していても5MB以上は保存できないみたいで、App cacheやWebSQLを使う必要があるとか 調べてるとchrome.storageでもunlimitedStorageは使えるようなのでこれを使うことにしました データ形式はlocalStorage同様に単純ですが非同期で実行されるので扱いがめんどうです chrome.storageはchromeの拡張機能用のデータを保存する機能です データ保存用の機能はlocalStorage, sessionStoage, webSQL, IndexedDBなどがありますがlocalStorageに近いです 英語のマニュアル localStorageとの違い ○keyとvalueを保存できてlocalStorage自体を1つのオブジェクトのように扱えましたが、保存できるv
chrome.storage の API を使う localStorage を使うとこれはこれで動くのですが、もう少し扱いやすい方法がないか調べたところ、chrome.storage という localStorage に似た方法を見つけました。 chrome.storage – Google Chrome localStorage の場合、background.js を通して Message Passing でデータのやり取りを行う必要がある。 これに対し chrome.storage では background.js なしで、ダイレクトに content_scripts 等から chrome.storage のデータにアクセスできます。また、chrome.storage.onChanged.addListener の API で、データ変更に対するコールバックを簡単に登録できて便利。 以
実践サンプルとして、ポップアップウィンドウで閲覧履歴を表示するサンプルを作ってみましょう。 復習を兼ねて、パート1で作成してきたサンプルコードがあるフォルダとは別に、新規に作成します。 ブランクのポップアップウィンドウを表示する フォルダを作成し、manifest.jsonとpopup.html、アイコンを用意しましょう。 アイコンは先程のものを、クリック時の設定はmanifest.jsonに書いても良いですし、 background.jsでchrome.browserAction.onClicked.addListener()を使っても構いません。 ここではmanifest.jsonに定義しています。 manifest.json { "manifest_version": 2, "name": "History Viewer", "version": "0.2.1", "descript
はじまり 仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。 そこでたまたま tacamy さんのスライド はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck を見て、Chrome Extensionすげー!って思った。JS Girlsというのもあるのね。 仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。 作業短縮、ミスも減る!! メリットしかない!という事で作り方の勉強から。 勉強方法 まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。 右クリックのTwitter検索便利。 Google Chrome拡張機能入門 (全20回) - プログラミン
最近仕事関連でChrome Extensionを作ったので、ポイントとかを簡単にまとめてみる。 前提 環境とか 古いChromeには対応しない(ChromeのバージョンによってAPIが変わってたりする) manifestのバージョンはv2 作るもの Extensionにはいくつかのタイプがあるが、今回は以下の様なものを作る。 ブラウザに表示されている内容を取得 1で取得した内容をExtensionのJavaScriptがパース Extensionのポップアップを表示し、2の内容を表示 ポップアップ上のボタンを押すと、内容がサーバーに送信される イメージとしては、はてブとかEvernoteのブラウザ拡張を思い浮かべてもらえれば良いかと。 後述する専門用語で言うと、browser action (あるいは page action) + content script という構成。 アーキテクチャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く