Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

クロスブラウザ拡張ライブラリExtension.js

7,589 views

Published on

Firefox Developers Conference 2010 LT

Published in: Technology, Business
  • Be the first to comment

クロスブラウザ拡張ライブラリExtension.js

  1. 1. クロスブラウザ拡張ライブラリ Extension.js swdyh fxdevcon 2010 11/20 LT
  2. 2. ★ 自己紹介: swdyh ★ AutoPagerize開発者 ★ 次のページ自動で読み込むブラウザ拡張 ★ 去年のLTでFirefox拡張やChrome拡張 の話
  3. 3. ★ 一年経つ間に、ブラウザ拡張にいろいろ 動き ★ 2010/03 Jetpack SDKがでた ★ 2010/06 Safariにも拡張機能 ★ 2010/10 Operaにも拡張機能
  4. 4. ★ いろんなブラウザに向けて        拡張を書く時代
  5. 5. ★ JSとHTMLで書ける拡張だけでも ★ Chrome拡張 ★ Firefox拡張(Jetpack) ★ Safari拡張 ★ Opera拡張
  6. 6. ★ でも、細かい部分がけっこう違って 実際作ってみると大変!
  7. 7. ★ 例えば、新規タブでURLを開くコード
  8. 8. // Jetpack require('tabs').open({ url: url }) // Chrome chrome.tabs.create({ url: url }) // Safari safari.application.activeBrowserWindow.     openTab().url = url // Opera opera.extension.tabs.create({ url: url })
  9. 9. ★ こういう面倒な手間を減らしたい
  10. 10. ★ Extension.js
  11. 11. ★ 設計方針 ★ 複数のブラウザ向けの開発を楽にする ★ 拡張の生成や変換はしない ★ あるブラウザしかない機能や違いが大 きい部分は対象にしない ★ どのブラウザでもある機能、でもAPI が違うというのを対象にする ★ APIをラップしたライブラリ
  12. 12. ★ 進捗 ★ まだ少しだけ ★ いま出来てるのは、Contentスクリプ ト用の部分 ★ ↑はAutoPagerizeでは使ってる
  13. 13. // Jetpack onMessage = function(res) { console.log(res) } postMessage('data') // Chrome chrome.extension.sendRequest('data', function(res) { console.log(res) }) // Safari safari.self.addEventListener('message', function(event) { console.log(event.message) }) safari.self.tab.dispatchMessage('data')
  14. 14. var extension = new Extension() extension.postMessage('key', ’data’, function(res) { console.log(res) })
  15. 15. ★ ブラウザ間の差異を気にせずすっきり
  16. 16. ★ これから ★ Backgroundプロセスの方のAPI ★ Operaも対象に
  17. 17. ★ Extension.js ★ https://github.com/swdyh/extension.js ★ ありがとうございました

×