Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2026-01-30 09:48:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: add sample ui

Browse Source
This commit is contained in:
abhijithvijayan 2020-02-02 08:14:58 +05:30
parent 2f57a231bc
commit 185734b816
4 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/popup.html
View File

@ -1,11 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<link rel="stylesheet" href="css/popup.css" />
</head>
<body></body> <head>
</html> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<link rel="stylesheet" href="css/popup.css" />
</head>
<body>
<section id="popup">
<h2>WEB-EXTENSION-STARTER</h2>
<div class="links__holder">
<ul>
<li>
<button type="button" id="github__button">
GitHub
</button>
</li>
<li>
<button type="button" id="donate__button">
Buy Me A Coffee
</button>
</li>
</ul>
</div>
</section>
</body>
</html>

2
src/scripts/background.js
View File

@ -7,7 +7,7 @@ browser.runtime.onInstalled.addListener(() => {
browser.runtime.onMessage.addListener((request, sender, sendResponse) => { browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
// Do something with the message! // Do something with the message!
alert(request.url); // alert(request.url);
// And respond back to the sender. // And respond back to the sender.
return Promise.resolve('got your message, thanks!'); return Promise.resolve('got your message, thanks!');

12
src/scripts/popup.js
View File

@ -1,5 +1,9 @@
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
function openWebPage(url) {
return browser.tabs.create({ url });
}
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const tabs = await browser.tabs.query({ const tabs = await browser.tabs.query({
active: true, active: true,
@ -15,4 +19,12 @@ document.addEventListener('DOMContentLoaded', async () => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(response); console.log(response);
document.getElementById('github__button').addEventListener('click', () => {
return openWebPage('https://github.com/abhijithvijayan/web-extension-starter');
});
document.getElementById('donate__button').addEventListener('click', () => {
return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
});
}); });

30
src/styles/popup.scss
View File

@ -6,3 +6,33 @@ body {
color: $black; color: $black;
background-color: $greyWhite; background-color: $greyWhite;
} }
#popup {
min-width: 350px;
padding: 30px 20px;
h2 {
font-size: 25px;
text-align: center;
}
.links__holder {
ul {
display: flex;
margin-top: 1em;
justify-content: space-around;
li {
button {
border-radius: 8%;
font-size: 20px;
font-weight: 600;
background-color: rgba(0, 0, 255, 0.7);
color: white;
cursor: pointer;
padding: 8px 12px;
}
}
}
}
}