felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Unbeastifying methods

Browse Source
This commit is contained in:
EvolvedCode
2016-10-14 01:25:37 +03:00
parent ea49ad0f60
commit 2a5cd05a48
4 changed files with 81 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
beastify/content_scripts/clear.js Normal file
View File

@@ -0,0 +1,27 @@
/*
clear():
* either reloads or clears the page depending on the request
*/
function clear(request, sender, sendResponse) {
switch (request.type){
case "Reload":
location.reload();
break;
case "Blank":
removeEverything();
break;
}
chrome.runtime.onMessage.removeListener(clear);
}
function removeEverything() {
while (document.body.firstChild) {
document.body.firstChild.remove();
}
}
/*
Assign clear() as a listener for messages from the extension.
*/
chrome.runtime.onMessage.addListener(clear);

17
beastify/popup/choose_beast.css
View File

@@ -2,15 +2,26 @@ html, body {
width: 100px;
}
.beast {
.button {
margin: 3% auto;
padding: 4px;
text-align: center;
font-size: 1.5em;
background-color: #E5F2F2;
cursor: pointer;
}
.beast:hover {
.button:hover {
background-color: #CFF2F2;
}
.beast {
background-color: #E5F2F2;
}
.clear {
background-color: #E74C3C;
}
.clear:hover {
background-color: #C0392B;
}

8
beastify/popup/choose_beast.html
View File

@@ -7,9 +7,11 @@
</head>
<body>
<div class="beast">Frog</div>
<div class="beast">Turtle</div>
<div class="beast">Snake</div>
<div class="button beast">Frog</div>
<div class="button beast">Turtle</div>
<div class="button beast">Snake</div>
<div class="button clear">Blank</div>
<div class="button clear">Reload</div>
<script src="choose_beast.js"></script>
</body>

53
beastify/popup/choose_beast.js
View File

@@ -16,29 +16,46 @@ function beastNameToURL(beastName) {
/*
Listen for clicks in the popup.
If the click is not on one of the beasts, return early.
If the click is on one of the beast buttons:
The text content of the node is the name of the beast we want.
Otherwise, the text content of the node is the name of the beast we want.
Inject the "beastify.js" content script in the active tab.
Inject the "beastify.js" content script in the active tab.
Then get the active tab and send "beastify.js" a message
containing the URL to the chosen beast's image.
Then get the active tab and send "beastify.js" a message
containing the URL to the chosen beast's image.
Else if the click is on one of the clear buttons:
The text content of the node is the clear method we want.
Inject the "clear.js" content script in the active tab.
Then get the active tab and send "clear.js" a message
containing the clear method.
*/
document.addEventListener("click", function(e) {
if (!e.target.classList.contains("beast")) {
return;
if (e.target.classList.contains("beast")) {
var chosenBeast = e.target.textContent;
var chosenBeastURL = beastNameToURL(chosenBeast);
chrome.tabs.executeScript(null, {
file: "/content_scripts/beastify.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
});
}
else if (e.target.classList.contains("clear")) {
var chosenMethod = e.target.textContent;
chrome.tabs.executeScript(null, {
file: "/content_scripts/clear.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: chosenMethod});
});
}
var chosenBeast = e.target.textContent;
var chosenBeastURL = beastNameToURL(chosenBeast);
chrome.tabs.executeScript(null, {
file: "/content_scripts/beastify.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
});
return;
});