extension work

This commit is contained in:
Will Bamberg
2015-09-14 16:49:43 -07:00
parent 1c5962365d
commit 11fe52f05a
7 changed files with 67 additions and 14 deletions

View File

@@ -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/.

Binary file not shown.

After

Width:  |  Height:  |  Size: 550 B

View File

@@ -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?");
}

View File

@@ -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"
}
}

View File

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

View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="choose_action.css"/>
</head>
<body>
<div class="action">highlight-para</div>
<div class="action">show-foo</div>
<div class="action">call-confirm</div>
<script src="choose_action.js"></script>
</body>
</html>

View File

@@ -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});
});
});