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.

Google Calendar for Todayの紹介と拡張内ページ間通信の実例

3,900 views

Published on

oogle Calendar for Todayの紹介と拡張内ページ間通信の実例 (Chrome Extension TechTalk at 2010-04-09)

  • Sex in your area is here: ❶❶❶ http://bit.ly/2F90ZZC ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2F90ZZC ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Google Calendar for Todayの紹介と拡張内ページ間通信の実例

  1. 1. Google Calendar for Today Makoto Kawasaki (twitter:@makoto_kw) 2010-04-09 Chrome Extension TechTalk
  2. 2. Google Calendar for Today background.html Google Calendar API popup.html Yahoo! Widget DevFest 5.4 j.mp/crxgcaltoday @makoto_kw
  3. 3. Lifetime popup.html background.html j.mp/crxgcaltoday @makoto_kw
  4. 4. Problem Popup j.mp/crxgcaltoday @makoto_kw
  5. 5. Hierarchy popup.html (UI) Google background.html Ajax Calendar (Data) API j.mp/crxgcaltoday @makoto_kw
  6. 6. Ex) access data function refreshUI() { var bg = chrome.extension.getBackgroundPage(); var events = bg.events; for (var i=0, len=events.length; i<len; i++) { var e = events[i]; //... } } popup.html window.events = []; background.html j.mp/crxgcaltoday @makoto_kw
  7. 7. Ex) notify dataChanged chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { if (request.eventUpdated) { refreshUI(); return; } }); popup.html function fetchEvent() { // $.get('http://....',function(data){ window.events = ["event"]; chrome.extension.sendRequest({eventUpdated:true}); //}); } setInterval(fetchEvent,5*60*1000); background.html j.mp/crxgcaltoday @makoto_kw
  8. 8. hack: exetension.getPopupPage() (function () { this.getPopupPage = function() { return this.findWindowByPathname('/popup.html'); } this.findWindowByPathname = function(pathname) { var views = this.getViews(); for (var i=0, len=views.length; i<len; i++) { var w = views[i]; if (w.location.pathname == pathname) { return w; } } } }).apply(chrome.extension,[]); j.mp/crxgcaltoday @makoto_kw
  9. 9. Conclusion popup background other -> background getBackgroundPage() background -> other sendRequest()/onRequestListener() j.mp/crxgcaltoday @makoto_kw
  10. 10. Reference Example Code: http://github.com/makotokw/crxjptalk_20100409 Google Calendar for Today: http://j.mp/crxgcaltoday Open Source of Google Calendar for Today: http://github.com/makotokw/google-calendar-for-today My Google Calendar (Yahoo! Widget) http://widgets.yahoo.com/widgets/my-google-calendar j.mp/crxgcaltoday @makoto_kw

×