Kimono Chrome Extension (GLG 2015.02.11)

Transcript

1. Kimono Chrome Extension Hoisting an application
2. kimono Turn websites into structured APIs in seconds
3. 2.2 trillion pages 10k APIs Web APIs
4. M2M needs APIs
5. M2M needs APIs
6. data: { … } Data Ingestion
7. demo
8. Bookmarklet • Wrap and serve pages with our UI injected. • Subject to cross-domain security restrictions • Can break internal links • Difficult to sandbox UI
9. Chrome Extension • Maintain state in browser, between pages • Permits access to page DOM • Framework support for overlay UI • Session sandbox (Incognito)
10. Bookmarklet Web Kimono Browser
11. Chrome Web Kimono Browser
12. Chrome Web Kimono Browser
13. demo
14. Chrome Extension
15. Goals • Incremental changes to existing code • Add features enabled by Chrome’s privileged APIs • Continue to support other browsers via bookmarklet
16. Anatomy of a Chrome Extension • .crx: specially constructed zip file • manifest.json defines metadata and structure • Special powers exposed through chrome.* APIs • background script runs at application level - e.g. manage use of incognito window • browser action adds our button to Chrome’s chrome • content script to inject our code when necessary
17. Extension Architecture Toolbar Chrome Additions
18. Anatomy of our Chrome Extension • background script runs at application level • browser action adds our button to Chrome’s chrome • content script to inject our code into page • toolbar code is loaded via XSS Toolbar
19. Project Structure Toolbar core Chrome Additions ChromeDriver
20. Build gulp.task(‘release’, [‘build-all’], function() { return gulp.src('./chrome-ext/**/*.*') .pipe($.zip('kimono.zip')) });
21. Develop
22. Test var sel = require(‘selenium-extend'); var driver = sel.createChromeWithExtension( ‘/path/to/unpacked/extension’, ‘/path/to/chromedriver’); driver.get(…) // and so forth
23. Test // enable incognito driver.extend.enableIncognito(2); // wait for load driver.get("http://localhost:8000/reddit"); driver.extend.exists("#kim-Toolbar"); // switch to incognito window driver.extend.toNextWindow();
24. Publish • Generally not needed • Use Chrome Developer Dashboard to publish to Chrome Web Store • Ties in to Google Analytics
25. Tips • You can fit it into your workflow • Use watch • Use Selenium
26. thanks!