[chrome extensions]エクステンション内の画像を取得する

一般的にエクステンションはフォルダをzip化して配布するわけだが、scriptやhtmlで、フォルダの中にある画像を参照したい場合があります。

そんなときは、下のようにすればおｋ

images/icon_128.png

これは、manifest.jsonがあるフォルダにimagesフォルダがあり、さらにその中にあるicon_128.pngという画像を参照しています。

つまり、相対パスで記述した場合は、自分のフォルダを参照するようです。

[chrome extensions]新規のtabを作成する

下のように組めば新規のtabを生成することができる。

chrome.tabs.create({
  'url':'http://yahoo.co.jp',
  'active':true
});

[chrome extensions]任意のtabをアクティブにする

任意のtabをアクティブにするにはどうすればいいだろうか？

ずばり下のように組めばおｋ

chrome.tabs.update(tabid, {'active':true});

第一引数のtabidはtabのidです。

[chrome extensions]cookie情報を取得する

ドメインが設定されているcookieは一般的には取得できないようになっているのですが、どうやら拡張機能では取得できるみたいです。

//manifest.json
{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "cookies",
    "http://*.bar.com/*"
  ]
}

manifest.jsonではパーミッションでcookiesとドメインを設定するのがミソ

chrome.cookies.get({
  url:'http://www.bar.com',
  name:'foo'
}, function(cookie){
  //cookieが取得できた場合
  if(cookie){

  }
});

cookieが取得できなかった場合は、nullが返却されます。

データ管理を拡張機能上で実装したい場合は、便利な機能かなと。

[chrome extensions]処理のスケジューリングを行う

ある一定の時間が経過したらJSの処理を行うように実装するにはどうすればいいのだろうか？

一般的には、setTimeoutやsetIntervalを使うんだけど、拡張機能の場合は、alarmsというAPIが用意されている。

//manifest.json
{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "alarms"
  ]
}

manifest.jsonではパーミッションでalarmsを設定するのがミソ

//アラームの登録
chrome.alarms.create('foo',{
  'periodInMinutes':1
});

//アラームが発生した場合の処理
chrome.alarms.onAlarm.addListener(function(alarm){


});

delayInMinutesというプロパティもあるのですが、periodInMinutesだけ設定されている場合、periodInMinutes間隔で処理が発生します。

定期処理をしたい場合に便利ですね！！

[chrome extensions]backgroundで複数のscriptをロードする

以下のようなmanifest.jsonがあるとする。

{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },
  "browser_action": {
    "default_icon": "images/icon_19.png"
  },
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

そこで、eventPage.jsにjQueryを使いたい場合は、どうすればいいだろうか？

How to use jquery in google chrome extension page action background.js?
によると、

"background": { "scripts": ["jquery.js","background.js"] },

みたいにすればいいことがわかる。
つまり、こう。

{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },
  "browser_action": {
    "default_icon": "images/icon_19.png"
  },
  "background": {
    "scripts": ["jquery.js","eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

確かに試したらjQueryがロードされていた。

今回は、ローカルのjQueryだったんだけど、リモートのjsもインクルードできるのかなー？？

[chrome extensions]tabの情報を取得する

tab情報を取得する方法は下のようになります。

//eventPage.js
chrome.tabs.query({}, function(tabs){
  //表示されているtabの個数
  var nTabLen = tabs.length;
  var sURL,oTab;
  for(var i=0;i<nTabLen;i++){
    oTab = tabs[i];
    //tabのURL
    sURL = oTab.url;
  }
  return;
});

上だけでおｋなのでとっても簡単。最後にmanifest.jsonを。

{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },
  "browser_action": {
    "default_icon": "images/icon_19.png"
  },
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

permissionsキーのtab設定がキモかな。

[chrome extensions]ブラウザアクションアイコンがクリックされた時のメソッド

chromeのextensionsで表示されるブラウザアクションアイコンがクリックされた時のイベントを登録したい場合は下のように実装すればおｋ

//eventPage.js
chrome.browserAction.onClicked.addListener(function(tab) {

})

上だけでおｋなのでとっても簡単。最後にmanifest.jsonを。

/* manifest.json */
{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "icons":{
    "16":"images/icon_16.png",
    "48":"images/icon_48.png",
    "128":"images/icon_128.png"
  },
  "browser_action": {
    "default_icon": "images/icon_19.png"
  },
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  }
}

[chrome extensions]chrome.runtimeでイベント登録

ちょっと今、chromeのextensionsを触っているんだけど、extensionがインストールされた場合に、イベントを登録したいときのプログラムをチェックしました。

//eventPage.js
chrome.runtime.onInstalled.addListener(function(details){
  //エクステンションがインストールされた場合
  if(details.reason == 'install'){

  //エクステンションがアップデートされた場合
  }else if(details.reason == 'update'){

  //chromeがアップデートされた場合
  }else if(details.reason == 'chrome_update'){

  }
});

onloadみたいに使えるかもです。

/* manifest.json */
{
  "manifest_version": 2,
  "name":"hoge",
  "version":"0.1",
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
}

[Chrome]東芝がChromebookを発売

どうして日本ででないのー？？

ここCES 2014で、Toshibaが、GoogleのChrome OSをOSとする13.3インチのChromebookラップトップを披露した。そのお値段は、300ドルを切っている。

via:東芝もChromebookを発売; 画面13インチ, SSD内蔵で279ドル

意外と売れると思うんだけどな。

[Google]Chrome AppsがAndroidとiOSに提供されるかも

これはすごい。

The Next Webは、グーグルがデスクトップ用Chrome AppsをiOSやAndroidのモバイル・エコシステムに対応する方針だと報じました。

via:報道：グーグル、Chrome AppsをAndroidとiOSに提供予定

これが普及したらHTML5を使ったアプリが一気に広がりそうな予感。

問題は課金をどうするかってことになると思うんだけど。

webアプリだと課金しずらい雰囲気があるから、そこも含めてどうするかってところだと思った。

[Chrome]AcerからC720Pが発売へ

タッチパネル式のchrome bookもでるんだー。

、その4分の1以下という価格のタッチスクリーン搭載ChromebookがAcerから米国時間11月26日に発表された。同社のChromebookシリーズの新製品「C720P」はタッチスクリーンを搭載しており、12月の初めにAmazonやBest Buy、Acer Storeから300ドルという価格で発売されるという。

via:エイサー、タッチ対応「Chromebook」を発売へ--300ドル

なんか、ここまでくるんだったら、いっそのこと、chromeのダブレットをだせばいいのになーっと思ってしまう。

androidタブレットをかぶっちゃうけど。

[chrome]東芝からchromebookが発売

なぬ。

サンフランシスコで開催中のIntel Developer Forum（IDF）カンファレンスで、今日(米国時間9/11)、Googleはいくつか興味ある発表を行った。その一つはChromebookハードウェアに関するもので、Acer、 HPなど既存のメーカーから新モデルが登場するだけでなく、Asusと東芝がChrome OSを搭載したノートパソコンの製造に乗り出すことが明らかになった。Googleによれば、新製品はここ数ヶ月のうちに市場に出るという。

via:IDFカンファレンスでGoogleがHaswell採用のChromebookについて発表―新たに東芝、ASUSが加わり、メーカーは6社となる

東芝のPCが気になるなー。

東芝のホームページに行っても情報がないのだが、一体どうなるのだろうか？

[chrome]Chrome Appsを公開

これちょっと試してみたいのだが、どうやら、mac版はまだないようだ。

Googleは今日（米国時間9/5）、Chrome Appsを正式公開した。

via:Chromeのネイティブ風パッケージアプリ、”Chrome Apps” と名前を変えて一般公開

下の動画を見ても、既存のパッケージアプリとの違いがわからないwww

[chromewebapps]iTunesのライブラリの取り込みが可能に？

Richer access to Google services and better OS integration in Chrome packaged appsを読んで知ったのですが、どうやらDeveloper版のpackaged appsで、Media Gallery APIを使ってiTunesのデータを読みこむことができるようです。

久しぶりにchrome web apps作りたくなってきたなー。

早く安定版でも実装してほしいです。

[ChromeWebStore]ChromeWebStore版のGoogle Keep公開

まったく使ってないが、こんなニュースが飛び込んできた。

Googleは米国時間5月2日、「Chrome」ウェブアプリ版の「Google Keep」を発表した。Google Keepは、ちょっとしたメモ書きから大きなアイデアまであらゆるものを保存できるアプリを目指している。

via:「Google Keep」、「Chrome」ウェブアプリ版がリリース

というわけでストアでリリースされている。

前から気になっているのだが、Googleはこれを公開してどうするのだろうか？
何が狙いなのか？よくわからない。

[chrome]アプリランチャー

これでいよいよクライアントソフトがいらなくなるのだろうか？

同アプリケーションは、ユーザーのウェブベースのアプリすべてを1カ所に格納し、ユーザーがブラウザの外側でそれらのアプリを開けるようにする。Chromeのアプリランチャーに対応するアプリはHTMLやJavaScript、CSSで記述されているが、ユーザーがオフラインのときも開くことができる。

via:グーグル、「Chrome OS」アプリランチャーを「Windows」ユーザー向けに公開

ってことは、今までアプリを使う場合は、一度、chromeを立ち上げないと使えないわけだったのが、一発起動できるようになるというわけですね。

便利アプリをいっぱいインストールしておけば、クライアントソフトが不要になりそうな予感。

まだ、mac os用のはないし、正式版でもリリースされていないので、これらのサポートが今から待ち遠しくなってきました。

[chrome]Chromebook Pixelが発売

ハイスペックのchromebookが発売されるようです。

数週間前から噂になっていたGoogleのChromebookの新機種Chromebook Pixelが先ほど発表された。

これまでのChromebookとは異なり、Pixelはクラウドのヘビーユーザーをターゲットにしたプレミアム・デバイスで、ハードウェアのスペックは強力だ。モニタは12.85インチ、2560×1700（435万ピクセル）、画面比率3:2、CPUはIntelCore i5、それに1TBのGoogle Driveストレージが3年間無料で利用できる。

via:Google、Chrome OSノート、Chromebook Pixelを発表―Core i5、12.85インチ・タッチスクリーン、1TBのGoogle Driveつきで価格1299ドル、4月にLTE版も

価格が1299かー、ちょい高いっすなー。
高解像度の液晶だけじゃーお客さんはなびかないと思うのだが、どうだろうか？
今時、テレビでじゃーないので、高解像度で競ってもと感じてしまう。

Pichaiは「近いうちにあらゆるノートパソコンにタッチスクリーンが搭載されることになると思う」と述べた。

via:Google、Chrome OSノート、Chromebook Pixelを発表―Core i5、12.85インチ・タッチスクリーン、1TBのGoogle Driveつきで価格1299ドル、4月にLTE版も

だとしたらPCの液晶をタッチスクリーンにするつもりなのか？
そうすると指紋液晶がべちょべちょになり、せっかくの高解像度が台無しになってしまうと思うのだが。

とは言いつつもちょっと触ってみたい。

[chrome]gpuの確認

chromeでgpuの確認方法について調べました。

chrome://gpu

via:Google Chrome のcanvasタグがGPUアクセラレーション対応に

アドレスバーに上を入力すると確認できます。

[chrome]Hewlett Packardもchromebookをリリース?

前回、レノボからChromebookが発売されるエントリーを書きましたが、ヒューレットパッカードも出すようです。

Hewlett-Packard（HP）は、サムスン、Acer、Lenovoに続いて「Chromebook」市場に参入する計画のようだ。

via:HP製「Chromebook」、スペック表がウェブで一時公開

すでに、スペック表も公開されているようです。

ってか、お願いだから、日本にもだしてー。