-
Notifications
You must be signed in to change notification settings - Fork 3
/
options.html
95 lines (95 loc) · 3.16 KB
/
options.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<!-- Replace this with your extension's title. -->
<title>Options - Your Extension</title>
<link rel="stylesheet" type="text/css" href="styles/options.css" />
<link rel="stylesheet" type="text/css" href="styles/options-widgets.css" />
<script type="text/javascript" src="scripts/options-setup.js"></script>
</head>
<body>
<nav class="sideBar">
<h1>Chrome</h1>
<ul>
<li><a href="chrome://history" target="_blank">History</a></li>
<li>
<a href="chrome://extensions">Extensions</a>
<ul>
<!-- Replace this with your extension's title. -->
<li>Your Extension</li>
</ul>
</li>
<li><a href="chrome://settings">Settings</a></li>
<li><a href="chrome://help">Help</a></li>
</ul>
</nav>
<header>
<!-- Replace this with your extension's title. -->
<h1>Your Extension</h1>
</header>
<!-- Replace everything below this point with your extension's options. -->
<section>
<h3>Multiple choice</h3>
<p>This is a multiple choice question using radio buttons:</p>
<label for="radio1">
<input type="radio" name="radio" id="radio1" checked="checked" />
First choice
</label>
<br />
<label for="radio2">
<input type="radio" name="radio" id="radio2" />
Second choice
</label>
<br />
<label for="radio3">
<input type="radio" name="radio" id="radio3" />
Third choice
</label>
<br />
<label for="rad4o4">
<input type="radio" name="radio" id="radio4" />
Fourth choice
</label>
</section>
<section>
<h3>Checkable setting</h3>
<p>Do you want to check this checkbox?</p>
<label for="checkbox">
<input type="checkbox" id="checkbox" />
Yes, I would like to check the box.
</label>
</section>
<section>
<h3>Drop-down menu</h3>
<p>You may select an option from the list below.</p>
<select id="dropDownMenu">
<option>First option</option>
<option>Second option</option>
<option>Third option</option>
</select>
</section>
<section>
<h3>Pop-up pages</h3>
<!-- This is needed to make the pop-up demo work, but scripts must -->
<!-- be in external JavaScript files in live extension option pages. -->
<button onclick="document.getElementById('overlayDetails').show();">Read more</button>
</section>
<div class="overlay transparent hidden">
<div class="page hidden" id="overlayDetails">
<h1>Pop-up pages</h1>
<button class="closeButton"></button>
<div class="content">
<p>
An pop-up page should have a class of <code>page</code>, and it should be inside an element of class <code>overlay</code>. The <code>.page</code> is the pane itself, and the <code>.overlay</code> is the white background that covers the main page and, when clicked, hides the overlay pane.
</p>
<p>
To show a pop-up page, call [page element]<code>.show()</code>. To hide it, call [page element]<code>.fadeOut()</code>. You can also use [page element]<code>.hide()</code> to hide it instantly.
</p>
<p>
If you do not intend to use pop-up pages or close buttons, you can exclude the options-widgets.css file from your project.
</p>
</div>
</div>
</div>
</body>
</html>