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

added slightly more complex example

Browse Source
This commit is contained in:
Will Bamberg
2015-08-31 14:55:43 -07:00
parent dde4051738
commit bee41c48d8
6 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
borderify-button/content_scripts/borderify.js Normal file
View File

@@ -0,0 +1,5 @@
chrome.runtime.onMessage.addListener(borderify);
function borderify(request, sender, sendResponse) {
document.body.style.border = "5px solid " + request.color;
}

BIN
borderify-button/images/borders.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

17
borderify-button/manifest.json Normal file
View File

@@ -0,0 +1,17 @@
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"permissions": [
"activeTab", "tabs"
],
"browser_action": {
"default_icon": "images/borders.png",
"default_title": "Borderify",
"default_popup": "popup/choose_color.html"
}
}

23
borderify-button/popup/choose_color.css Normal file
View File

@@ -0,0 +1,23 @@
html, body {
height: 100px;
width: 100px;
margin: 0;
}
.color-choice {
height: 30%;
width: 90%;
margin: 2% auto;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}

17
borderify-button/popup/choose_color.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="choose_color.css"/>
</head>
<body>
<div class="color-choice" id="red"></div>
<div class="color-choice" id="green"></div>
<div class="color-choice" id="blue"></div>
<script src="choose_color.js"></script>
</body>
</html>

19
borderify-button/popup/choose_color.js Normal file
View File

@@ -0,0 +1,19 @@
document.addEventListener("click", function(e) {
if (! e.target.classList.contains("color-choice")) {
return;
}
var chosenColor = e.target.id;
chrome.tabs.executeScript({
file: "content_scripts/borderify.js"
}, setColor);
function setColor() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {color: chosenColor});
});
}
});