diff --git a/content-scripts/button/LICENSE b/content-scripts/button/LICENSE
new file mode 100644
index 0000000..c3727aa
--- /dev/null
+++ b/content-scripts/button/LICENSE
@@ -0,0 +1 @@
+The icon "beasts.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/.
diff --git a/content-scripts/button/action.png b/content-scripts/button/action.png
new file mode 100644
index 0000000..bcf6379
Binary files /dev/null and b/content-scripts/button/action.png differ
diff --git a/content-scripts/content-script.js b/content-scripts/content-script.js
index aa314a4..f72a8f0 100644
--- a/content-scripts/content-script.js
+++ b/content-scripts/content-script.js
@@ -4,25 +4,25 @@ function handleMessage(request, sender, sendResponse) {
switch(request.name) {
case "highlight-para":
highlightPara();
+ break;
case "show-foo":
showFoo();
- case "show-confirm":
- showConfirm();
+ break;
+ case "call-confirm":
+ callConfirm();
}
}
function highlightPara() {
-
+ var pageScriptPara = document.getElementById("page-script-para");
+ pageScriptPara.style.backgroundColor = "blue";
}
-
-function beastNameToURL(beastName) {
- switch (beastName) {
- case "Frog":
- return chrome.extension.getURL("beasts/frog.jpg");
- case "Snake":
- return chrome.extension.getURL("beasts/snake.jpg");
- case "Turtle":
- return chrome.extension.getURL("beasts/turtle.jpg");
- }
+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 48917da..44372e5 100644
--- a/content-scripts/manifest.json
+++ b/content-scripts/manifest.json
@@ -15,6 +15,11 @@
"matches": ["https://mdn.github.io/webextensions-examples/"],
"js": ["content-script.js"]
}
- ]
+ ],
+
+ "browser_action": {
+ "default_icon": "button/action.png",
+ "default_popup": "popup/choose_action.html"
+ }
}
diff --git a/content-scripts/popup/choose_action.css b/content-scripts/popup/choose_action.css
new file mode 100644
index 0000000..42fec48
--- /dev/null
+++ b/content-scripts/popup/choose_action.css
@@ -0,0 +1,20 @@
+html, body {
+ height: 100px;
+ width: 300px;
+ margin: 0;
+}
+
+.action {
+ height: 30%;
+ width: 90%;
+ margin: 3% auto;
+ padding-top: 6%;
+ text-align: center;
+ font-size: 1.5em;
+ background-color: #E5F2F2;
+ cursor: pointer;
+}
+
+.action:hover {
+ background-color: #CFF2F2;
+}
diff --git a/content-scripts/popup/choose_action.html b/content-scripts/popup/choose_action.html
new file mode 100644
index 0000000..1c03ca6
--- /dev/null
+++ b/content-scripts/popup/choose_action.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+ highlight-para
+ show-foo
+ call-confirm
+
+
+
+
diff --git a/content-scripts/popup/choose_action.js b/content-scripts/popup/choose_action.js
new file mode 100644
index 0000000..8b82e68
--- /dev/null
+++ b/content-scripts/popup/choose_action.js
@@ -0,0 +1,11 @@
+
+document.addEventListener("click", function(e) {
+ if (!e.target.classList.contains("action")) {
+ return;
+ }
+
+ var chosenAction = e.target.textContent;
+ chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+ chrome.tabs.sendMessage(tabs[0].id, {name: chosenAction});
+ });
+});