diff --git a/page-scripts/page-script-to-content-script-messaging.js b/page-scripts/page-script-to-content-script-messaging.js new file mode 100644 index 0000000..0eef85e --- /dev/null +++ b/page-scripts/page-script-to-content-script-messaging.js @@ -0,0 +1,18 @@ +var messenger = document.getElementById("from-page-script"); + +messenger.addEventListener("click", messageContentScript); + +function messageContentScript() { + window.postMessage({ + direction: "from-page-script", + message: "Message from the page" + }, "*"); +} + +window.addEventListener("message", function(event) { + if (event.source == window && + event.data.direction && + event.data.direction == "from-content-script") { + alert("Page script received message: \"" + event.data.message + "\""); + } +}); diff --git a/page-scripts/page-script.js b/page-scripts/page-script.js new file mode 100644 index 0000000..ddc657e --- /dev/null +++ b/page-scripts/page-script.js @@ -0,0 +1,13 @@ +var p = document.createElement("p"); +p.textContent = "This paragraph was added by a page script."; +p.setAttribute("id", "page-script-para"); +document.body.appendChild(p); + +window.foo = "This global variable was added by a page script"; + +window.confirm = function() { + alert("The page script has also redefined 'confirm'"); +} + +// add controls +insertControls(document.getElementById("left-column"), "Page script controls"); diff --git a/page-styles/styles.css b/page-styles/styles.css new file mode 100644 index 0000000..0c06815 --- /dev/null +++ b/page-styles/styles.css @@ -0,0 +1,23 @@ +#output { + border: 1px solid blue; + padding: 1em; + margin: 1em; + clear: both; +} + +#wrap { + width:600px; + margin:0 auto; +} +#left-column { + float:left; + width:300px; +} +#right-column { + float:right; + width:300px; +} + +input { + margin: 0.5em; +}