BeamTab - Chrome extensions and ShadowDOM

Slides from my NodeJS presentation about BeamTab, Chrome extensions and ShadowDOM!

Transcript

1. BeamTab
2. What we will cover • Weekend projects • Browser extensions • Chrome extensions deep dive • BeamTab architecture • Shadow DOM
3. Weekend projects • You do whatever the hell you want! • Experiment with new technologies • Learn stuff • +1 reason in your TGIF list • No stress, no deadlines, no expectations • You’ll probably make someone’s life better ◦ That ‘someone’ is you. Yep.
4. Creating browser extensions • You build for just one browser • You use ~ the latest supported technologies ◦ ES6! • Easy to debug and test before publishing ◦ Inspector FTW • Easy to find how other extensions work ◦ Inspector FTW • No lengthy review process (for Chrome at least)
5. Chrome extensions • Manifest file • Background / Event pages • Script / Style injection • Messaging
6. • Solves a pain that me and my friends had for so long • Pushbullet sucks • No elegant alternatives • Finding the proper candidate for a queue service BeamTab
7. Beam your current tab to any of your Chrome browsers!
8. Architecture Chrome Storage Sync Browser 1 Browser 2 Gtweet
10. <input type="range"/>
11. const shadowElement = containerElement.attachShadow({mode: 'open'});
12. <div class="shadow-container"> #shadow-root (open) <div class="shadow-child">Test</div> </div>
13. References • Messaging between scripts ◦ https://developer.chrome.com/extensions/messaging • Chrome Storage Sync ◦ https://developer.chrome.com/extensions/storage • Background pages / Event pages ◦ https://developer.chrome.com/extensions/background_pages ◦ https://developer.chrome.com/extensions/event_pages • Shadow DOM ◦ https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom ◦ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM • BeamTab source ◦ https://github.com/stelabouras/BeamTab
14. THANKS!!!!!1111111111