Talk given in September 2014 at QueensJS.

1. Bookmarklets and you!
By Adam Heim / @truckingsim / @croscon

2. Real world examples

3. Real world examples

4. Real world examples

5. Building a draggable bookmarklet
window._project_name_url='http://example.dev';
vars=document.createElement('script');
s.setAttribute('src','http://example.dev/js/bookmarklet.js');
s.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
(function(){
})();
<ahref="javascript:..."onClick="returnfalse">DragMe!</a>

6. So now what?
Scrape
Manipulate
Delete random DOM nodes in 3 second intervals

7. Scraping the parent page for data
varProjectBookmarkletObject={
appHost:window._project_name_url,
metaTags:{},
initialize:function(){
this.loadMetaTags();
}
loadMetaTags:function(){
vartags=document.getElementsByTagName('meta');
for(vari=0;i<tags.length;i++){
varkey=tags[i].name||tags[i].getAttribute('itemprop');
varcontent=tags[i].getAttribute('content');
if(key&&content){
this.metaTags[key]=content;
}
}
}
};
this.generateIframe()

8. Generate the iframe
varProjectBookmarkletObject={
appHost:window._project_name_url,
metaTags:{},
initialize:function(){
this.generateIframe();
},
generateIframe:function(){
varcontainer=document.createElement('div'),that=this;
container.setAttribute('id','ProjectContainerUniqueId');
variframe=document.createElement('iframe');
iframe.setAttribute('src',this.appHost);
iframe.setAttribute('frameBorder','0');
iframe.setAttribute('id','project_iframe');
iframe.setAttribute('allowTransparency','true');
container.appendChild(iframe);
document.body.appendChild(container);
//Onloadwewillactuallysendthedataviawindow.postMessage
iframe.onload=function(){that.sendPostMessage(iframe);};
}
}
this.loadMetaTags();

9. How do I send data to the iframe?
Don't use GET variables use postMessage!
IE8 and IE9 can send strings only
IE8, IE9, and IE10 does not work cross-origin in new
windows.

10. What is postMessage?
Pass data easily between a third party parent page and
a iframe on a domain you control.
“The window.postMessage method
safely enables cross-origin
communication.” -
http://mdn.io/postMessage

11. Using window.postMessage
http://mdn.io/postMessage
varProjectBookmarkletObject={
appHost:window._project_name_url,
metaTags:{},
initialize:function(){
this.generateIframe();
},
sendPostMessage:function(iframe){
varthat=this;
iframe.contentWindow.postMessage(
JSON.stringify(this.metaTags),
this.appHost
);
window.addEventListener('message',function(event){
if(event.origin==that.appHost&&event.data=='some_trigger'){
//Dosomeaction
}
});
}
}
this.loadMetaTags();

12. Listening in the iframe
varProjectIframe={};
window.addEventListener('message',function(event){
ProjectIframe._preload.data=JSON.parse(event.data);
ProjectIframe.data_loaded=true;
$(function(){
$(window).trigger('data:loaded');
$('body').on('click','.close_frame',function(){
event.source.postMessage('close_frame',event.origin);
});
});
},false);

13. Examples!

14. Basic Code
parent
iframe
variframe=document.getElementById('basic-iframe');
$('#basic-send').click(function(){
iframe.contentWindow.postMessage('food',location.origin);
});
window.addEventListener('message',function(event){
if(event.data==='food'){
$('.text').addClass('bg-success').text("I'mfed!");
}
});

15. iframe parent
Feed me data!
Send food
The basics!

16. Advanced Code
parent
varadvanced_iframe=document.getElementById('advanced-iframe');
$('#advanced-send').click(function(){
$('#advanced-send').addClass('hide');
advanced_iframe.contentWindow.postMessage('food',location.origin);
});
$('#advanced-send-2').click(function(){
$('#advanced-send-2').addClass('hide');
advanced_iframe.contentWindow.postMessage('more-food',location.ori
gin);
});
window.addEventListener('message',function(event){
if(event.data==='feed-me-more'){
$('#advanced-send-2').removeClass('hide');
}
if(event.data==='close-frame'){
$('#advanced-iframe').remove();
}
});

17. Advanced Code
iframe
window.addEventListener('message',function(event){
if(event.data==='food'){
$('#first').addClass('hide');
$('#second').removeClass('hide');
}
if(event.data==='more-food'){
$('#second').addClass('hide');
$('#third').removeClass('hide');
}
});
$('#give-me-more').click(function(){
$('#second').html('Givememore!');
window.parent.postMessage('feed-me-more',location.origin);
});
$('#close-frame').click(function(){
window.parent.postMessage('close-frame',location.origin);
});

18. iframe parent
Feed me data!
Send food

19. That's It
Twitter: @truckingsim
Github: http://github.com/truckingsim
Slides: truckingsim/queens-js-2014-09-slides