Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2025-10-07 07:22:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add sample options page

Browse Source
This commit is contained in:
abhijithvijayan 2020-03-31 00:33:32 +05:30
parent a6c9929167
commit 3c050d006d
4 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/options.html
View File

@ -1,11 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Options</title>
<link rel="stylesheet" href="css/options.css" />
</head>
<body></body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Options</title>
<link rel="stylesheet" href="css/options.css" />
</head>
<body>
<form>
<p>
<label for="name">Name</label><br>
<input type="text" id="name" name="name" spellcheck="false" autocomplete="off" required />
</p>
<p>
<label>
<input type="checkbox" name="logging">
Show the features enabled on each page in the console
</label>
</p>
</form>
</body>
</html>

1
src/popup.html
View File

@ -12,6 +12,7 @@
<section id="popup">
<h2>WEB-EXTENSION-STARTER</h2>
<button id="options__button">Options Page</button>
<div class="links__holder">
<ul>
<li>

4
src/scripts/popup.js
View File

@ -27,4 +27,8 @@ document.addEventListener('DOMContentLoaded', async () => {
document.getElementById('donate__button').addEventListener('click', () => {
return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
});
document.getElementById('options__button').addEventListener('click', () => {
return openWebPage('options.html');
});
});

18
src/styles/popup.scss
View File

@ -16,6 +16,20 @@ body {
text-align: center;
}
#options__button {
width: 50%;
background: green;
color: white;
font-weight: 500;
border-radius: 15px;
padding: 5px 10px;
justify-content: center;
margin: 20px auto;
cursor: pointer;
opacity: 0.8;
display: flex;
}
.links__holder {
ul {
display: flex;
@ -24,13 +38,13 @@ body {
li {
button {
border-radius: 8%;
border-radius: 25px;
font-size: 20px;
font-weight: 600;
padding: 10px 17px;
background-color: rgba(0, 0, 255, 0.7);
color: white;
cursor: pointer;
padding: 8px 12px;
}
}
}