Added page scripts and styles

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 + "\"");
+  }
+});

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");

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;
+}