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 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

29
src/options.html
View File

@ -1,11 +1,26 @@
<!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>Options</title>
<link rel="stylesheet" href="css/options.css" />
</head>
<body></body> <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> </html>

1
src/popup.html
View File

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

4
src/scripts/popup.js
View File

@ -27,4 +27,8 @@ document.addEventListener('DOMContentLoaded', async () => {
document.getElementById('donate__button').addEventListener('click', () => { document.getElementById('donate__button').addEventListener('click', () => {
return openWebPage('https://www.buymeacoffee.com/abhijithvijayan'); 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; 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 { .links__holder {
ul { ul {
display: flex; display: flex;
@ -24,13 +38,13 @@ body {
li { li {
button { button {
border-radius: 8%; border-radius: 25px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
padding: 10px 17px;
background-color: rgba(0, 0, 255, 0.7); background-color: rgba(0, 0, 255, 0.7);
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 8px 12px;
} }
} }
} }