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

Merge pull request #109 from nistath/master

Browse Source 
Unbeastifying methods
This commit is contained in:
wbamberg
2016-10-17 11:41:43 -07:00
committed by GitHub
parent 06195f2e2f 23d5da2ffc
commit 9c64e1b6ef
4 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
beastify/README.md
View File

@@ -18,6 +18,8 @@ the name of the chosen beast.
When the content script receives this message, it replaces the current page
content with an image of the chosen beast.
When the user clicks the reset button, the page reloads, and reverts to its original form.
## What it shows ##
* write a browser action with a popup
@@ -25,3 +27,4 @@ content with an image of the chosen beast.
* inject a content script programmatically using `tabs.executeScript()`
* send a message from the main extension to a content script
* use web accessible resources to enable web pages to load packaged content
* reload web pages

15
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 {
background-color: #CFF2F2;
}
.beast {
background-color: #E5F2F2;
}
.clear {
background-color: #FBFBC9;
}
.clear:hover {
background-color: #EAEA9D;
}

7
beastify/popup/choose_beast.html
View File

@@ -7,9 +7,10 @@
</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">Reset</div>
<script src="choose_beast.js"></script>
</body>

43
beastify/popup/choose_beast.js
View File

@@ -12,33 +12,38 @@ 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 beasts:
Inject the "beastify.js" content script in the active tab.
Otherwise, the text content of the node is the name of the beast we want.
Then get the active tab and send "beastify.js" a message
containing the URL to the chosen beast's image.
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.
If it's on a button wich contains class "clear":
Reload the page.
Close the popup. This is needed, as the content script malfunctions after page reloads.
*/
document.addEventListener("click", function(e) {
if (!e.target.classList.contains("beast")) {
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});
});
return;
}
else if (e.target.classList.contains("clear")) {
chrome.tabs.reload();
window.close();
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;
}
});