-
Notifications
You must be signed in to change notification settings - Fork 0
/
options.html
211 lines (186 loc) · 8.07 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Lookup Assistant Menu Editor</title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<h1>Lookup Assistant Menu Editor</h1>
<textarea id="editor" cols="150" rows="30"></textarea>
<br />
<button id="save">Save</button>
<button id="load">Load</button>
<button id="default">Default</button>
<br /><br />
<h1>Help</h1>
<h2>I. Buttons</h2>
<ol type="a">
<li><b>Save:</b> Save settings into local storage.<br /> </li>
<li><b>Load:</b> Load settings from local storage.<br /> </li>
<li><b>Default:</b> Restore default settings.<br /> </li>
</ol>
<h2>II. Editing</h2>
<ol type="a">
<li><b>Syntax:</b> Lookup Assistant uses JSON for its menu editor.<br /> </li>
<li><b>Overview:</b> Whitespace (spaces, tabs, and newlines) doesn't matter, and can be
used to make things clearer and more readable. Lookup Assistant has three types: link,
menu, and separator. A menu can contain any of the three types. These must all be
contained within a pair of brackets. With the exception of a key's value, everything
should be typed in lowercase. Key-value pairs are explained below.
<br /><br />
High-level View of Menu Formatting:
<pre>
[
link,
separator,
menu
link,
link
]
</pre>
Format and details of each type are explained below.<br /> </li>
<li><b>Link:</b> This is the most common type. A link tells Lookup Assistant
where it should go and how it should get there. It's written in this format:
<pre>
{
"type": "link",
"title": "Google",
"address": "http://www.google.com/search?q=%s"
}
</pre>
As stated earlier, whitespace doesn't matter, so you may write this on a single line.
<br /><br />
The opening and closing brace are required. Each item must be quoted, each key (the item
to the left of the colon) and its value (the item to the right) must be separated by a
colon, and a comma separates each key-value pair. An explanation of each key follows.
<br /><br />
"type": This specifies the type. It can be "link", "menu", or "separator". You would,
of course, use "link" for links. However, this key is optional. The default behavior
is "link" if it's omitted.
<br /><br />
"title": The name for this link.
<br /><br />
"address": The URL with a search token (%s). The search token will ultimately be replaced
by the highlighted text. To find out where the search token goes in a URL, go to a website
and perform a search to see what the URL looks like. Copy the URL and replace the search
term with the token. Some sites have very long and complex search URLs and may require
some effort.
<br /><br />
Note: The search token is not required. If it's left out, Lookup Assistant will simply
take you to the address you specify.<br /> </li>
<li><b>Menu:</b> This type is used for grouping and organization. A menu can contain any
type, even itself. It looks like this:
<pre>
{
"type": "menu",
"title": "Additional Links",
"entries": []
}
</pre>
Regarding braces, quotes, and commas, the same rules apply here as they did with the link
type. The "type" and "title" keys also work the same way as they did for links, except
"type" is not optional here.
<br /><br />
The new key is "entries", and the value is a pair of brackets. What's placed between them
will determine what appears in this menu. Links, separators, and even additional menus
are all valid. See the link and separator section for proper formatting.<br /> </li>
<li><b>Separator:</b> The simplest type. A separator only has a single key-value pair.
Like menus, specifying the type is required. It looks like this:
<pre>
{
"type": "separator"
}
</pre>
Separators will not appear if there is nothing to separate.<br /> </li>
</ol>
<h2>III. Examples</h2>
<ol type="a">
<li><b>One Link:</b>
<pre>
[
{ "type": "link", "title": "Google", "address": "http://www.google.com/search?q=%s" }
]
</pre></li>
<li><b>Three Links + Separator:</b>
<pre>
[
{ "title": "Google", "address": "http://www.google.com/search?q=%s" },
{ "title": "Google Images", "address": "http://www.google.com/search?tbm=isch&q=%s" },
{ "type": "separator" },
{ "title": "Wikipedia", "address": "http://www.wikipedia.org/wiki/%s" }
]
</pre>
You can see in this example that commas not only separate key-value pairs, but they separate the
types as well.<br /> </li>
<li><b>Two Links + Separator + Menu with Two Links:</b>
<pre>
[
{ "title": "Google", "address": "http://www.google.com/search?q=%s" },
{ "title": "Google Images", "address": "http://www.google.com/search?tbm=isch&q=%s" },
{ "type": "separator" },
{ "type": "menu", "title": "Menu 1", "entries":
[
{ "title": "Amazon", "address": "http://www.amazon.com/s/field-keywords=%s" },
{ "title": "eBay", "address": "http://www.ebay.com/sch/i.html?_nkw=%s" }
]
}
]
</pre></li>
<li><b>One Link + Menu with a Menu, Each with One Link:</b>
<pre>
[
{ "type": "menu", "title": "Menu 1", "entries":
[
{ "type": "menu", "title": "Menu 2", "entries":
[
{ "title": "Amazon", "address": "http://www.amazon.com/s/field-keywords=%s" }
]
},
{ "title": "Wikipedia", "address": "http://www.wikipedia.org/wiki/%s" }
]
},
{ "title": "Google", "address": "http://www.google.com/search?q=%s" }
]
</pre>
Having many nested menus can get quite confusing!<br /> </li>
</ol>
<h2>IV. Errors</h2>
<ol type="a">
<li><b>SyntaxError:</b> This error means there's something wrong with the JSON formatting.
Here are two common syntax errors and what they mean:
<br /><br />
<ul>
<li>Unexpected end of input: The JSON formatting is incomplete. This may be caused
by a missing closing bracket.<br /> </li>
<li>Unexpected token X: The X could be a bracket, a brace, or a comma. Usually, this
means there is something missing around X. Check areas where edits were made. Make
sure all open brackets have a proper closing bracket, and check for correctness in
braces and commas.<br /> </li>
</ul>
Checklist:
<ul>
<li>The very first thing is an open bracket [.</li>
<li>The very last thing is a closing bracket ].</li>
<li>All keys and values are quoted.</li>
<li>Each key and its value is separated by a colon.</li>
<li>Each pair is separated by a comma.</li>
<li>Types are also separated by a comma.</li>
<li>No comma after the last key-value pair.</li>
<li>No comma after the last type.</li>
<li>Menu entries uses brackets [], not braces {} and not parentheses ().</li>
</ul>
<br />
A good way to avoid these errors is to make small incremental changes and test them with
the exec button. Try not to make large changes all at once because it'll be hard to
pinpoint the source of the error.<br /> </li>
<li><b>Missing Property:</b> This error means something was left out. e.g. Failure to
provide an address for the link type.<br /> </li>
<li><b>Unknown Type:</b> This error means something other than link, menu, or separator
was specified as the type. Spelling errors will cause this error, as will improper
casing. i.e. link is not the same as Link.<br /> </li>
</ol>
<hr />
<p>Copyright (c) 2018, <a href="https://github.com/chingc/Lookup-Assistant" target="_blank">Ching Chow</a></p>
</body>
</html>