add-custom-search-engine/search.html at master · evilpie/add-custom-search-engine · GitHub

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
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Add custom search engine</title>

    <link rel="stylesheet" href="bootstrap.4.1.3.min.css" />
    <link rel="stylesheet" href="style.css" />

    <link rel="icon" href="icons/search.svg" type="image/svg+xml" />
</head>
<body class="bg-light">

<div id="instructions">
<div id="arrow"></div>
<div id="info" class="text-center">
  <h3>Almost done just two more steps</h3>
  <div>
    <img src="icons/urlbar.png">
    <p><strong><em>Right</em> click the address bar</strong></p>
    <img src="icons/menu.png">
    <p><strong>Click <em>Add "Example"</em></strong></p>
    Go to <mark>about:preferences#search</mark> to see your installed search engines.</p>

    <button id="close" class="btn btn-primary">Go back</button>
  </div>
</div>
</div>

<div id="main">
<div class="py-5 text-center">
<img src="icons/search.svg" width="35" height="35">
<h1>Add custom search engine</h1>
</div>

<form>
  <div class="form-group">
    <label for="input-name">Name</label>
    <input type="text" class="form-control" id="input-name" name="name" placeholder="Example Search" required>
  </div>

  <div class="form-group">
    <label for="input-url">Search URL</label>
    <input type="text" class="form-control" id="input-url" name="url" placeholder="https://example.org/search?q=%s" required>
    <p class="form-text text-muted"><b>%s</b> is substituted with the entered search query</p>
  </div>

  <div class="form-group advanced adv-hidden">
    <div class="custom-control custom-checkbox" id="post-checkbox">
      <input type="checkbox" class="custom-control-input" id="use-post" name="use-post">
      <label class="custom-control-label" for="use-post">Use <code>POST</code> query parameters <span class="text-muted">(Optional)</span></label>
    </div>
    <input type="text" class="form-control" id="input-post" name="post" placeholder="q={searchTerms}&foo=bar" disabled>
  </div>

  <div class="form-group">
    <label for="input-icon">Icon <span class="text-muted">(Optional)</span></label>

    <div class="row">
      <div class="col-sm-9">
        <input type="text" class="form-control" id="input-icon" name="icon" placeholder="https://example.org/favicon.ico">
      </div>
      <div class="col-sm-2">
        <label for="input-file-icon" class="btn btn-secondary">Browse</label>
        <input type="file" id="input-file-icon" class="btn btn-secondary">
      </div>
      <div class="col-sm-1">
        <img src="icons/search.svg" id="icon-preview">
      </div>
    </div>

    <p class="form-text text-muted">Icon should be at least 16×16 pixels -
    <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URLs</a> are also accepted here
    </p>
  </div>

  <div class="form-group">
    <label>Keyword</label>
    <p class="text-muted"><strong>Tip:</strong> A keyword can be added by going to <mark>about:preferences#search</mark> after adding the search engine and editing the <em>Keyword</em> column</p>
  </div>

  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="show-advanced">
      <label class="custom-control-label" for="show-advanced">Show advanced options</label>
    </div>
  </div>

  <div class="alert alert-info advanced adv-hidden">
    See the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/OpenSearch">OpenSearch</a> documentation on MDN for more information.
  </div>

  <div class="form-group advanced adv-hidden">
    <label for="input-suggest-url">Suggest URL <span class="text-muted">(Optional)</span></label>
    <input type="text" class="form-control" id="input-suggest-url" name="suggest-url" placeholder="https://example.org/suggestions?q={searchTerms}">
    <p class="form-text text-muted"><b>{searchTerms}</b> is substituted with the entered search query (<code>application/x-suggestions+json</code>)</p>
  </div>

  <div class="form-group advanced adv-hidden">
    <label for="input-encoding">Input Encoding <span class="text-muted">(Optional)</span></label>
    <input type="text" class="form-control" id="input-encoding" name="encoding" placeholder="UTF-8">
  </div>

  <div class="form-group advanced adv-hidden">
    <label for="input-description">Description <span class="text-muted">(Optional)</span></label>
    <input type="text" class="form-control" id="input-description" name="description">
  </div>

  <div class="form-group">
    <p>
    Due to a <a target="_blank" href="https://github.com/evilpie/add-custom-search-engine/wiki/Technical-Limitation">technical limitation with Firefox WebExtensions</a>, all data entered when creating your custom search engine is <b>uploaded to a third-party service</b>.
    You agree to the terms given by the service.
    After adding the search engine the data <i>should</i> be automatically removed.
    <b>The author of this extension is not responsible for the functionality of these services, and no warranty is provided.</b>
    You agree to these terms by selecting a service below.
    </p>

    <div class="row">
      <div class="col-sm-5">
        <select id="input-service" class="form-control">
          <option disabled>Select upload service</option>
          <option>paste.mozilla.org (dead)</option>
          <option>dpaste.org</option>
        </select>
      </div>
      <div class="col-sm-7">
        <button type="submit" class="btn btn-primary">Add custom search engine</button>
        <button type="submit" class="btn btn-secondary advanced adv-hidden" id="show-preview">OpenSearch XML preview</button>
      </div>
    </div>

    <p id="policy-link"></p>
  </div>
</form>

<pre id="preview" class="advanced adv-hidden">
</pre>
</div>

<script type="text/javascript" src="search.js"></script>
</body>
</html>