mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-17 06:48:37 +02:00
extension work
This commit is contained in:
1
content-scripts/button/LICENSE
Normal file
1
content-scripts/button/LICENSE
Normal 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/.
|
||||
BIN
content-scripts/button/action.png
Normal file
BIN
content-scripts/button/action.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 B |
@@ -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?");
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
20
content-scripts/popup/choose_action.css
Normal file
20
content-scripts/popup/choose_action.css
Normal 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;
|
||||
}
|
||||
16
content-scripts/popup/choose_action.html
Normal file
16
content-scripts/popup/choose_action.html
Normal 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>
|
||||
11
content-scripts/popup/choose_action.js
Normal file
11
content-scripts/popup/choose_action.js
Normal 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});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user