Successfully reported this slideshow.
Building a Chrome
Extension with Meteor
Jon Perl
jon at codebounty.co
@jon_perl
Why build an extension +
examples
What are the parts
Build one with Meteor
Complex use cases (w Code
Bounty)
Today
Why?
How?
HTML / CSS
Javascript + chrome
APIs
Chrome UI
elements
chrome.* APIs
• bookmarks
• events
• history
• power
• webRequest
+ 48 more
UI Elements
Browser Action Page Action
UI Elements
Popup Context Menu
Get reload value
from menu in
milliseconds
Trigger chrome.tabs.update({url:..})
to reload page
But what about Meteor?
bloggeek.me
1: meteor-ddp
Meteor 2: iframe
Meteor
Parties
10
0
Manifest
Backgroun
d
OAuth
DDP vs IFrame
DDP vs IFrame
And More
Testing w Selenium and
CucumberJS
RequireJS for organizing code
Grunt for filling in config values
Why build an extension +
examples
What are the parts
Build one with Meteor
Complex use cases (w Code
Bounty)
Recap
github.com/jperl/meteor-chrome-extension
developer.chrome.com/extensions/api_index.ht
ml
github.com/eddflrs/meteor-ddp
you...
Questions?
Building a chrome extension with meteor
Building a chrome extension with meteor
Building a chrome extension with meteor
Building a chrome extension with meteor
Building a chrome extension with meteor
Upcoming SlideShare
Loading in …5
×

Building a chrome extension with meteor

5,713 views

Published on

Slides for a talk I did at Meteor Devshop 7 about building a chrome extension with Meteor.

Published in: Technology

Building a chrome extension with meteor

  1. 1. Building a Chrome Extension with Meteor Jon Perl jon at codebounty.co @jon_perl
  2. 2. Why build an extension + examples What are the parts Build one with Meteor Complex use cases (w Code Bounty) Today
  3. 3. Why?
  4. 4. How? HTML / CSS Javascript + chrome APIs Chrome UI elements
  5. 5. chrome.* APIs • bookmarks • events • history • power • webRequest + 48 more
  6. 6. UI Elements Browser Action Page Action
  7. 7. UI Elements Popup Context Menu
  8. 8. Get reload value from menu in milliseconds Trigger chrome.tabs.update({url:..}) to reload page
  9. 9. But what about Meteor?
  10. 10. bloggeek.me 1: meteor-ddp Meteor 2: iframe
  11. 11. Meteor Parties 10 0
  12. 12. Manifest
  13. 13. Backgroun d
  14. 14. OAuth
  15. 15. DDP vs IFrame
  16. 16. DDP vs IFrame
  17. 17. And More Testing w Selenium and CucumberJS RequireJS for organizing code Grunt for filling in config values
  18. 18. Why build an extension + examples What are the parts Build one with Meteor Complex use cases (w Code Bounty) Recap
  19. 19. github.com/jperl/meteor-chrome-extension developer.chrome.com/extensions/api_index.ht ml github.com/eddflrs/meteor-ddp youtube.com/watch?v=pT-b2SpFIWo github.com/codebounty/codebounty @jon_perl Resources
  20. 20. Questions?

×