factored out common code

content-scripts/content-script.js

@@ -1,53 +1 @@
-var contentScriptControls = document.getElementById("right-column")
-
-var title = document.createElement("strong");
-title.textContent = "Content script controls";
-
-var highlightParaButton = makeButton(
-  "highlight-para",
-  "Highlight the paragraph",
-  highlightPara);
-  
-var showFooButton = makeButton(
-  "show-foo",
-  "Get the value of window.foo",
-  showFoo);
-    
-var callConfirmButton = makeButton(
-  "call-window.confirm",
-  "Call window.confirm()",
-  callConfirm);
-  
-contentScriptControls.appendChild(title);
-contentScriptControls.appendChild(document.createElement("br"));
-contentScriptControls.appendChild(highlightParaButton);
-contentScriptControls.appendChild(document.createElement("br"));
-contentScriptControls.appendChild(showFooButton);
-contentScriptControls.appendChild(document.createElement("br"));
-contentScriptControls.appendChild(callConfirmButton);
-contentScriptControls.appendChild(document.createElement("br"));
-
-function makeButton(buttonId, buttonValue, buttonCommand) {
-  var button = document.createElement("input");
-  button.setAttribute("type", "button");
-  button.setAttribute("id", buttonId);
-  button.setAttribute("value", buttonValue);
-  button.addEventListener("click", buttonCommand)
-  return button;
-}
-
-// the actual actions
-
-function highlightPara() {
-  var pageScriptPara = document.getElementById("page-script-para");
-  pageScriptPara.style.backgroundColor = "blue";
-}
-
-function showFoo() {
-  var output = document.getElementById("output");
-  output.textContent = "window.foo=" + window.foo;
-}
-
-function callConfirm() {
-  window.confirm("Are you sure?");
-}
+insertControls(document.getElementById("right-column"), "Content script controls");

content-scripts/insert-controls.js

@@ -0,0 +1,60 @@
+function insertControls(parentElement, titleText) {
+
+  var title = document.createElement("strong");
+  title.textContent = titleText;
+
+  var highlightParaButton = makeButton(
+    "highlight-para",
+    "Highlight the paragraph",
+    toggleParaHighlight);
+  
+  var showFooButton = makeButton(
+    "show-foo",
+    "Get the value of window.foo",
+    showFoo);
+    
+  var callConfirmButton = makeButton(
+    "call-window.confirm",
+    "Call window.confirm()",
+    callConfirm);
+  
+  parentElement.appendChild(title);
+  parentElement.appendChild(document.createElement("br"));
+  parentElement.appendChild(highlightParaButton);
+  parentElement.appendChild(document.createElement("br"));
+  parentElement.appendChild(showFooButton);
+  parentElement.appendChild(document.createElement("br"));
+  parentElement.appendChild(callConfirmButton);
+  parentElement.appendChild(document.createElement("br"));
+}
+
+function makeButton(buttonId, buttonValue, buttonCommand) {
+  var button = document.createElement("input");
+  button.setAttribute("type", "button");
+  button.setAttribute("id", buttonId);
+  button.setAttribute("value", buttonValue);
+  button.addEventListener("click", buttonCommand)
+  return button;
+}
+
+// the actual actions
+
+function toggleParaHighlight() {
+  var pageScriptPara = document.getElementById("page-script-para");
+  var bgColor = pageScriptPara.style.backgroundColor;
+  if (bgColor == "blue") {
+    pageScriptPara.style.backgroundColor = "white";
+  }
+  else {
+    pageScriptPara.style.backgroundColor = "blue";
+  }
+}
+
+function showFoo() {
+  var output = document.getElementById("output");
+  output.textContent = "window.foo=" + window.foo;
+}
+
+function callConfirm() {
+  window.confirm("Are you sure?");
+}

content-scripts/manifest.json

@@ -13,7 +13,7 @@
   "content_scripts": [
     {
       "matches": ["https://mdn.github.io/webextensions-examples/"],
-      "js": ["content-script.js"]
+      "js": ["insert-controls.js", "content-script.js"]
     }
   ]
 }