var pageMod = require("page-mod").PageMod({
include: ['*'],
contentScript: 'alert("Heellooooooo, Looondoooon!!!!")',
contentScriptWhen: 'end',
});
include: ['*'] which site(s) do we mod?contentScript JS code to run.contentScriptWhen: 'ready' when to run the code.window object is actually a proxy to the page's window.Example
Page script:
window.alert = function(arg) { /* evil code here */ }
Content script:
window.alert("Heellooooooo, Looondoooon!!!!");
Link
Result?
unsafeWindow: direct access to the document from content script.
This is a security hole, here be dragons, this will steal your lunch, etc.
Using previous example, if you change the content script to:
Content script:
unsafeWindow.alert("Heellooooooo, Looondoooon!!!!");
Result: Hodor!!!
Expand the 'hello world' example to do something funny / evil / useful to every page.
Builder link, or
webcontent/1-hello in the github repo
['*']: target any document loaded['http://canuckistani.ca/some_page.html']var pageMod = require("page-mod").PageMod({
include: ['*.canuckistani.ca'],
contentScriptWhen: 'end',
contentScriptFile: [data.url('lib.js')],
onAttach: function(worker) {
workers.push(worker);
worker.on('detach', function () {
detachWorker(this, workers);
});
worker.postMessage('42');
}
});
Link
var data = require("self").data;
var tabs = require("tabs");
tabs.on('ready', function(tab) {
tab.attach({
contentScript: 'if (confirm("EXTERMINATE???")) ' +
'{ document.body.innerHTML = ' +
'\'<img src="http://dailypop.files.wordpress.com/2010/04/dalek.gif">\';' +
'document.body.style.display="block"; ' +
'};',
});
});
Link
Example
Add-on code:
onAttach: function(worker) {
workers.push(worker);
worker.on('detach', function () {
detachWorker(this, workers);
});
worker.postMessage('42');
}
Content script:
self.on('message', function (payload) {
window.alert('The answer to the ultimate question of life, the universe ' + "\n" +
'and everything is '+parseInt(payload));
});
Link
Example
Content script:
self.postMessage("This is from the content script!");
Add-on code:
worker.on("message", function(data) {
console.log("Got message: " + data);
})
Link
Example
Content script:
document.defaultView.postMessage(' +
'"this is my message...", "*");
Page code:
window.addEventListener('message', function(e) {
console.log("Got message: " + e.data);
});
Link
Example
Page script:
$(document).ready(function() {
$("#clicker").click(function() {
window.postMessage("sending message from page!", "*");
return false;
});
});
Add-on code:
tab.attach({
contentScript: 'window.addEventListener("message",
function(ev) {
alert("In content script, got "+ ev.data);',
});
Link
Using this example as a starting point, implement a button in a page that sends an message through to your add-on code in main.js.