felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 23:08:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

added beastify

Browse Source
This commit is contained in:
Will Bamberg
2015-09-01 14:04:58 -07:00
parent bee41c48d8
commit 924bab323f
11 changed files with 102 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
beastify/README.md Normal file
View File

@@ -0,0 +1 @@
# beastify

BIN
beastify/beasts/frog.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

BIN
beastify/beasts/snake.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
beastify/beasts/turtle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

1
beastify/button/LICENSE Normal file
View File

@@ -0,0 +1 @@
The icon "beasts.png" is taken from the IconBeast Lite iconset, and used under the terms of its license, with a link back to the website: http://www.iconbeast.com/free/.

BIN
beastify/button/beasts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 B

20
beastify/button/popup/choose_beast.css Normal file
View File

@@ -0,0 +1,20 @@
html, body {
height: 100px;
width: 100px;
margin: 0;
}
.beast {
height: 30%;
width: 90%;
margin: 3% auto;
padding-top: 6%;
text-align: center;
font-size: 1.5em;
background-color: #E5F2F2;
cursor: pointer;
}
.beast:hover {
background-color: #CFF2F2;
}

16
beastify/button/popup/choose_beast.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="choose_beast.css"/>
</head>
<body>
<div class="beast">Frog</div>
<div class="beast">Turtle</div>
<div class="beast">Snake</div>
<script src="choose_beast.js"></script>
</body>
</html>

20
beastify/button/popup/choose_beast.js Normal file
View File

@@ -0,0 +1,20 @@
document.addEventListener("click", function(e) {
if (! e.target.classList.contains("beast")) {
return;
}
var chosenBeast = e.target.textContent;
console.log(chosenBeast);
chrome.tabs.executeScript({
file: "content_scripts/beastify.js"
}, setBeast);
function setBeast() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {beast: chosenBeast});
});
}
});

23
beastify/content_scripts/beastify.js Normal file
View File

@@ -0,0 +1,23 @@
chrome.runtime.onMessage.addListener(beastify);
function beastify(request, sender, sendResponse) {
var beastURL = beastNameToURL(request.beast);
var images = document.querySelectorAll("img");
for (var i = 0; i < images.length; ++i) {
images[i].setAttribute("src", beastURL);
}
document.body.style.backgroundImage = "url(" + beastURL + ")";
}
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");
}
}

21
beastify/manifest.json Normal file
View File

@@ -0,0 +1,21 @@
{
"manifest_version": 2,
"name": "Beastify",
"version": "1.0",
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "button/beasts.png",
"default_title": "Beastify",
"default_popup": "button/popup/choose_beast.html"
},
"web_accessible_resources": [
"beasts/*.jpg"
]
}