Building a chrome extension with meteor
-
Upload
jonathan-perl -
Category
Technology
-
view
2.621 -
download
1
description
Transcript of Building a chrome extension with meteor
![Page 1: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/1.jpg)
Building a Chrome Extension with Meteor
Jon Perljon at
codebounty.co@jon_perl
![Page 2: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/2.jpg)
Why build an extension + examplesWhat are the partsBuild one with MeteorComplex use cases (w Code Bounty)
Today
![Page 3: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/3.jpg)
Why?
![Page 4: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/4.jpg)
![Page 5: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/5.jpg)
![Page 6: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/6.jpg)
![Page 7: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/7.jpg)
How?
HTML / CSS
Javascript + chrome APIsChrome UI elements
![Page 8: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/8.jpg)
chrome.* APIs• bookmarks• events• history• power• webReques
t + 48 more
![Page 9: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/9.jpg)
UI Elements
Browser Action Page Action
![Page 10: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/10.jpg)
UI Elements
Popup Context Menu
![Page 11: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/11.jpg)
![Page 12: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/12.jpg)
Get reload value from
menu in milliseconds
Trigger chrome.tabs.update({url:..}) to reload page
![Page 13: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/13.jpg)
But what about Meteor?
![Page 14: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/14.jpg)
bloggeek.me
1: meteor-ddp
Meteor2: iframe
![Page 15: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/15.jpg)
Meteor Parties
100
![Page 16: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/16.jpg)
Manifest
![Page 17: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/17.jpg)
Background
![Page 18: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/18.jpg)
![Page 19: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/19.jpg)
OAuth
![Page 20: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/20.jpg)
DDP vs IFrame
![Page 21: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/21.jpg)
DDP vs IFrame
![Page 22: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/22.jpg)
And More
Testing w Selenium and CucumberJS
RequireJS for organizing codeGrunt for filling in config values
![Page 23: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/23.jpg)
Why build an extension + examplesWhat are the partsBuild one with MeteorComplex use cases (w Code Bounty)
Recap
![Page 24: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/24.jpg)
github.com/jperl/meteor-chrome-extension
developer.chrome.com/extensions/api_index.html
github.com/eddflrs/meteor-ddp
youtube.com/watch?v=pT-b2SpFIWo
github.com/codebounty/codebounty
@jon_perl
Resources
![Page 25: Building a chrome extension with meteor](https://reader036.fdocuments.in/reader036/viewer/2022062300/554f8ea3b4c905435d8b4f66/html5/thumbnails/25.jpg)
Questions?