diff --git a/content-scripts/content-script.js b/content-scripts/content-script.js index 28beeb5..2a94a05 100644 --- a/content-scripts/content-script.js +++ b/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"); diff --git a/content-scripts/insert-controls.js b/content-scripts/insert-controls.js new file mode 100644 index 0000000..3d8654b --- /dev/null +++ b/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?"); +} diff --git a/content-scripts/manifest.json b/content-scripts/manifest.json index 5e41e74..2ad2e69 100644 --- a/content-scripts/manifest.json +++ b/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"] } ] }