Labs/Ubiquity/Writing A Search Command: Difference between revisions

From MozillaWiki
< Labs‎ | Ubiquity
Jump to navigation Jump to search
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{draft}}
{{draft}}


Author: Christian Sonne
Author: Christian Sonne, satyr


== Documentation of CmdUtils.makeSearchCommand ==
== Documentation of CmdUtils.makeSearchCommand ==
Line 12: Line 12:
The url of the search provider, with the string "{QUERY}" (without the quotes representing the search word, ie: "http://www.google.com/search?q={QUERY}".
The url of the search provider, with the string "{QUERY}" (without the quotes representing the search word, ie: "http://www.google.com/search?q={QUERY}".
If the provider uses POST instead of GET, see [[#postData]].
If the provider uses POST instead of GET, see [[#postData]].
=== defaultUrl ===
An optional url string that will be opened in the case where the user has not provided a search string.


=== icon ===
=== icon ===
Line 25: Line 28:


=== charset ===
=== charset ===
If you intended input and response cannot be represented properly by UTF-8, you can provide the required charset as a string. It must be a charset supported by [https://developer.mozilla.org/en/nsIScriptableUnicodeConverter nsIScriptableUnicodeConverter] which means one of:
If your intended input and response cannot be represented properly by UTF-8, you can provide the required charset as a string. It must be a charset supported by [https://developer.mozilla.org/en/nsIScriptableUnicodeConverter nsIScriptableUnicodeConverter] which means one of:


<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4;white-space:nowrap">
* Big5
* Big5
* Big5-HKSCS
* Big5-HKSCS
Line 119: Line 122:


=== postData ===
=== postData ===
Supplying postData will make Ubiquity use POST instead of GET when retrieving the results. It can be either a string ie: "q={QUERY}&hl=en" or as an object ie:
Supplying postData will make Ubiquity use POST instead of GET when retrieving the results. It can be either a string or an object. i.e.:
<code>{"q": "{QUERY}", "hl": "en"}</code>
* <code>"q={QUERY}&amp;hl=en"</code>
* <code>{q: "{QUERY}", hl: "en"}</code>


=== parser ===
=== parser ===
Line 127: Line 131:
Via a number of options, you can tell mSC how to parse the data returned by the search provider.
Via a number of options, you can tell mSC how to parse the data returned by the search provider.


'''NB:''' all selectors used in the following sections are either paths into the json data in dot-notation, or [http://docs.jquery.com/Selectors jQuery selectors]. Note that the latter are '''''NOT''''' CSS selectors albeit very similar. Some features you might be used to from CSS are missing, whilst others still are added. Which you should use depend on your choice of [[#type]]
All selectors used in the following sections are either paths into the JSON data in dot-notation, or [http://docs.jquery.com/Selectors jQuery selectors]. Note that the latter are '''''NOT''''' CSS selectors albeit very similar. Some features you might be used to from CSS are missing, whilst others still are added. Which you should use depend on your choice of [[#type]].
 
Each selector can alternatively be a function that receives its context and returns the expected result for each mode.
* jQuery mode: jQuery object
* JSON mode: String if [[#container]] is specified. Object/Array otherwise.


==== type ====
==== type ====
mSC supports two types of parsers, namely "json" and "html". If not specified, it assumes you want the html parser.
Specifies the type of remote data to retrieve. (same as <code>[http://api.jquery.com/jQuery.ajax/ jQuery.ajax()]</code>'s <code>dataType</code> option). If <code>"json"</code> is passed, the parser switches to JSON mode.


==== url ====
==== url / postData ====
Alternative url used in case the preview uses a different service or API than the execute function, ie: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}"
Alternative URL and/or POST Data used in case the preview uses a different service or API than the execute function. i.e.: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}"


==== container ====
==== container ====
If using the html parser, this must be a selector that matches each result, thus returning a list of result containers. When using the json parser it must match the parent of all the results, ie: "responseData.results".
If using the jQuery parser, this must be a selector that matches each result, thus returning a list of result containers. When using the json parser it must match the parent of all the results, ie: "responseData.results".
 
It is important to note that in the case of the jQuery parser, all details for each individual result must be contained in each container.


It is important to note that in the case of the html parser, all details for each individual result must be contained in each container.
'''NB:''' Whilst this is not strictly speaking a required option for the jQuery parser, it is highly recommended that you use it. If not present, mSC will attempt to consolidate the lists of titles, previews and thumbnails into individual results as best it can, but it is a much more fragile method of parsing.


==== title ====
==== title ====
Selector for the title of the result. If using the html parser, it can alternatively be a function that receives a single argument (the jQuery result object) and must return a string that will be used as title.
Selector for the title of the result. If using the jQuery parser, it can alternatively be a function that receives a single argument (the jQuery result object) and must return a string that will be used as title.


'''NB:''' This options is required if you use the parser.
'''NB:''' This options is required if you use the parser.


==== preview ====
==== body ====
Selector for the preview of the result. If using the html parser, it can alternatively be a function that receives a single argument (the jQuery result object) and must return a string that will be used as preview.
Selector for the content of the result.


==== href ====
==== href ====
Selector for the preview of the result. If using the html parser, it can alternatively be a function that receives a single argument (the jQuery result object) and must return a string that will be used as preview.
Selector for the URL of the result.


'''NB:''' This option can usually be left out. If not present, mSC will attempt to find an anchor in the result matched by the [[#title]] option.
'''NB:''' This option can usually be left out. If not present, mSC will attempt to find an anchor in the result matched by the [[#title]] option.


==== thumbnail ====
==== thumbnail ====
Selector for the preview of the result. If this does not match an image element, mSC will look for a child element that is an image, and use the first found as thumbnail.
Selector for the thumbnail image of the result. If this does not match an image element, mSC will look for a child element that is an image, and use the first found as thumbnail.


==== maxResults ====
==== maxResults ====
Integer specifying the maximum number of results displayed in the Ubiquity preview. If not specified, it will default to 4.
Integer specifying the maximum number of results displayed in the Ubiquity preview. If not specified, it will default to 4.


==== baseurl ====
==== baseUrl ====
String used as base url if [[#href]] is found to be relative. If not provided, [[#url]] will be used instead.
String used as base URL if [[#href]] and/or [[#thumbnail]]'s src is found to be relative. If not provided, [[#url]] will be used instead.
 
==== plain ====
Array of strings naming selector properties (<code>"title", "body", "href", "thumbnail"</code>) that should be treated as plain text.
 
==== log ====
Function to which the command logs the reponse data and parsed results.
 
=== Other ===
mSC passes on the options it gets to CmdUtils.CreateCommand, so most options not mentioned here but available in CreateCommand can be passed as well. Most notably are the meta data documented in [[Labs/Ubiquity/Ubiquity_0.5_Author_Tutorial#Documentation_and_Metadata]].


== Examples ==
== Examples ==


=== The bare essentials ===
=== The bare essential ===
CmdUtils.makeSearchCommand({
<pre>CmdUtils.makeSearchCommand({url:"http://google.com/search?q=%s"})</pre>
  name: "Google",
  url: "http://www.google.com/search?q={QUERY}",
});


=== Adding a preview ===
=== Adding preview ===
CmdUtils.makeSearchCommand({
<pre>
  name: "YouTube",
CmdUtils.makeSearchCommand({
  url: "http://www.youtube.com/results?search_type=&search_query={QUERY}&aq=f",
  name: "YouTube",
  parser: {container: "div.video-entry",
  url: "http://www.youtube.com/results?search_query={QUERY}",
            title: "div.video-long-title a",
  parser: {
            preview: "div.video-description",
    container: "div.video-entry",
            thumbnail: "img.vimg120"}
    title: "div.video-long-title a",
});
    body: "div.video-description",
    thumbnail: "img.vimg120",
  },
});
</pre>


=== Using the JSON parser ===
=== Using the JSON parser ===
CmdUtils.makeSearchCommand({
<pre>
  name: "Google",
CmdUtils.makeSearchCommand({
  url: "http://www.google.com/search?q={QUERY}",
  name: "Google",
  parser: {type: "JSON",
  url: "http://www.google.com/search?q={QUERY}",
            url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}",
  parser: {
            container: "responseData.results",
    type: "json",
            title: "titleNoFormatting",
    url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}",
            preview: "content",
    container: "responseData.results",
            href: "url"}
    title: "titleNoFormatting",
});
    body: "content",
    href: "url",
    html: ["body"],
  },
});
</pre>


=== Using functions in the parser ===
=== Parsing XML / Using functions in the parser ===
CmdUtils.makeSearchCommand({
<pre>
  name: "MovieZoo",
CmdUtils.makeSearchCommand({
  url: "http://www.moviezoo.dk/alle-produkter/soeg/{QUERY}",
  url: "http://wunderground.com/cgi-bin/findweather/getForecast?query=%s",
  parser: {
  parser: {
    container: "table.nyhedsbrev_tabel2",
    type: "xml",
    title: "tr:nth-child(2) tr tr:first-child b",
    url: "http://api.wunderground.com/auto/wui/geo/ForecastXML?query=%s",
    href: function(c) {return jQuery("a.nyhedsbrev",c).attr("href");},
    container: "simpleforecast > forecastday",
    preview: function(c) {var p = ""; jQuery("table table tr:not(:first)",c).each(function(){p += jQuery(this).text()+"<br>";});return p;},
    title: "pretty",
    thumbnail: "img.lister_img",
    body: function() $("<div>").append(
    maxResults: 3
      $("conditions", this), "<br/>",
  }
      $("<b>", {
});
        text: $("low > celsius", this).text() + "\u2103",
        style: "color:#66f",
      }),
      " \uFF5E ",
      $("<b>", {
        text: $("high > celsius", this).text() + "\u2103",
        style: "color:#f66",
      })),
    thumbnail: function() $("<img>", {
      src: "http://icons-pe.wxug.com/i/c/a/" + $("icon", this).text() + ".gif",
    }),
  },
});
</pre>


=== Searching with a different charset ===
=== Searching with a different charset ===
CmdUtils.makeSearchCommand({
<pre>
  names: ["video.baidu", "百度视频"],
CmdUtils.makeSearchCommand({
  url: "http://video.baidu.com/v?word={QUERY}",
  names: ["video.baidu", "百度视频"],
  charset: "gb2312",
  url: "http://video.baidu.com/v?word={QUERY}",
  parser: {
  charset: "gb2312",
    container: "#result td",
  parser: {
    title: ".r a",
    container: "#result td",
    thumbnail: "img",
    title: ".r a",
    maxResults: 20,
    thumbnail: "img",
  },
    maxResults: 20,
});
  },
});
</pre>

Latest revision as of 12:45, 21 March 2010

Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

Author: Christian Sonne, satyr

Documentation of CmdUtils.makeSearchCommand

In the rest of this document, we will refer to makeSearchCommand as "mSC".

name/names

The name(s) of the search command, ie: name: "Youtube" or names: ["Youtube", "Video"]

url

The url of the search provider, with the string "{QUERY}" (without the quotes representing the search word, ie: "http://www.google.com/search?q={QUERY}". If the provider uses POST instead of GET, see #postData.

defaultUrl

An optional url string that will be opened in the case where the user has not provided a search string.

icon

The icon used for the search command. If not provided, the favicon (favicon.ico) located at the root of the search providers domain will be used instead.

description

A description of your search command. If not provided, one will be generated from a localized template and the name of your search command.

preview

An optional preview string or function that can be used to display results in the Ubiquity preview. For more info see Labs/Ubiquity/Ubiquity_0.5_Author_Tutorial#Adding_a_Preview

To provide a consistent search experience, mSC can generate a preview for you with minimal work on your part. For more information on this, see #parser. If you leave out both preview and parser, the provided or generated description will be used instead.

charset

If your intended input and response cannot be represented properly by UTF-8, you can provide the required charset as a string. It must be a charset supported by nsIScriptableUnicodeConverter which means one of:

  • Big5
  • Big5-HKSCS
  • EUC-JP
  • EUC-KR
  • GB2312
  • GEOSTD8
  • HZ-GB-2312
  • IBM850
  • IBM852
  • IBM855
  • IBM857
  • IBM862
  • IBM864
  • IBM864i
  • IBM866
  • ISO-2022-CN
  • ISO-2022-JP
  • ISO-2022-KR
  • ISO-8859-1
  • ISO-8859-10
  • ISO-8859-11
  • ISO-8859-13
  • ISO-8859-14
  • ISO-8859-15
  • ISO-8859-16
  • ISO-8859-2
  • ISO-8859-3
  • ISO-8859-4
  • ISO-8859-5
  • ISO-8859-6
  • ISO-8859-6-E
  • ISO-8859-6-I
  • ISO-8859-7
  • ISO-8859-8
  • ISO-8859-8-E
  • ISO-8859-8-I
  • ISO-8859-9
  • ISO-IR-111
  • KOI8-R
  • KOI8-U
  • Shift_JIS
  • T.61-8bit
  • TIS-620
  • UTF-16
  • UTF-16BE
  • UTF-16LE
  • UTF-32
  • UTF-32BE
  • UTF-32LE
  • UTF-7
  • UTF-8
  • VISCII
  • armscii-8
  • gb18030
  • us-ascii
  • windows-1250
  • windows-1251
  • windows-1252
  • windows-1253
  • windows-1254
  • windows-1255
  • windows-1256
  • windows-1257
  • windows-1258
  • windows-874
  • windows-936
  • x-euc-tw
  • x-gbk
  • x-imap4-modified-utf7
  • x-johab
  • x-mac-arabic
  • x-mac-ce
  • x-mac-croatian
  • x-mac-cyrillic
  • x-mac-devanagari
  • x-mac-farsi
  • x-mac-greek
  • x-mac-gujarati
  • x-mac-gurmukhi
  • x-mac-hebrew
  • x-mac-icelandic
  • x-mac-roman
  • x-mac-romanian
  • x-mac-turkish
  • x-user-defined
  • x-viet-tcvn5712
  • x-viet-vps
  • x-windows-949

postData

Supplying postData will make Ubiquity use POST instead of GET when retrieving the results. It can be either a string or an object. i.e.:

  • "q={QUERY}&hl=en"
  • {q: "{QUERY}", hl: "en"}

parser

The parser makes it easy for you as a developer to provide an interactive preview with search results, consistent with other Ubiquity search commands.

Via a number of options, you can tell mSC how to parse the data returned by the search provider.

All selectors used in the following sections are either paths into the JSON data in dot-notation, or jQuery selectors. Note that the latter are NOT CSS selectors albeit very similar. Some features you might be used to from CSS are missing, whilst others still are added. Which you should use depend on your choice of #type.

Each selector can alternatively be a function that receives its context and returns the expected result for each mode.

  • jQuery mode: jQuery object
  • JSON mode: String if #container is specified. Object/Array otherwise.

type

Specifies the type of remote data to retrieve. (same as jQuery.ajax()'s dataType option). If "json" is passed, the parser switches to JSON mode.

url / postData

Alternative URL and/or POST Data used in case the preview uses a different service or API than the execute function. i.e.: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}"

container

If using the jQuery parser, this must be a selector that matches each result, thus returning a list of result containers. When using the json parser it must match the parent of all the results, ie: "responseData.results".

It is important to note that in the case of the jQuery parser, all details for each individual result must be contained in each container.

NB: Whilst this is not strictly speaking a required option for the jQuery parser, it is highly recommended that you use it. If not present, mSC will attempt to consolidate the lists of titles, previews and thumbnails into individual results as best it can, but it is a much more fragile method of parsing.

title

Selector for the title of the result. If using the jQuery parser, it can alternatively be a function that receives a single argument (the jQuery result object) and must return a string that will be used as title.

NB: This options is required if you use the parser.

body

Selector for the content of the result.

href

Selector for the URL of the result.

NB: This option can usually be left out. If not present, mSC will attempt to find an anchor in the result matched by the #title option.

thumbnail

Selector for the thumbnail image of the result. If this does not match an image element, mSC will look for a child element that is an image, and use the first found as thumbnail.

maxResults

Integer specifying the maximum number of results displayed in the Ubiquity preview. If not specified, it will default to 4.

baseUrl

String used as base URL if #href and/or #thumbnail's src is found to be relative. If not provided, #url will be used instead.

plain

Array of strings naming selector properties ("title", "body", "href", "thumbnail") that should be treated as plain text.

log

Function to which the command logs the reponse data and parsed results.

Other

mSC passes on the options it gets to CmdUtils.CreateCommand, so most options not mentioned here but available in CreateCommand can be passed as well. Most notably are the meta data documented in Labs/Ubiquity/Ubiquity_0.5_Author_Tutorial#Documentation_and_Metadata.

Examples

The bare essential

CmdUtils.makeSearchCommand({url:"http://google.com/search?q=%s"})

Adding preview

CmdUtils.makeSearchCommand({
  name: "YouTube",
  url: "http://www.youtube.com/results?search_query={QUERY}",
  parser: {
    container: "div.video-entry",
    title: "div.video-long-title a",
    body: "div.video-description",
    thumbnail: "img.vimg120",
  },
});

Using the JSON parser

CmdUtils.makeSearchCommand({
  name: "Google",
  url: "http://www.google.com/search?q={QUERY}",
  parser: {
    type: "json",
    url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={QUERY}",
    container: "responseData.results",
    title: "titleNoFormatting",
    body: "content",
    href: "url",
    html: ["body"],
  },
});

Parsing XML / Using functions in the parser

CmdUtils.makeSearchCommand({
  url: "http://wunderground.com/cgi-bin/findweather/getForecast?query=%s",
  parser: {
    type: "xml",
    url: "http://api.wunderground.com/auto/wui/geo/ForecastXML?query=%s",
    container: "simpleforecast > forecastday",
    title: "pretty",
    body: function() $("<div>").append(
      $("conditions", this), "<br/>",
      $("<b>", {
        text: $("low > celsius", this).text() + "\u2103",
        style: "color:#66f",
      }),
      " \uFF5E ",
      $("<b>", {
        text: $("high > celsius", this).text() + "\u2103",
        style: "color:#f66",
      })),
    thumbnail: function() $("<img>", {
      src: "http://icons-pe.wxug.com/i/c/a/" + $("icon", this).text() + ".gif",
    }),
  },
});

Searching with a different charset

CmdUtils.makeSearchCommand({
  names: ["video.baidu", "百度视频"],
  url: "http://video.baidu.com/v?word={QUERY}",
  charset: "gb2312",
  parser: {
    container: "#result td",
    title: ".r a",
    thumbnail: "img",
    maxResults: 20,
  },
});
Retrieved from "https://wiki.allizom.org/index.php?title=Labs/Ubiquity/Writing_A_Search_Command&oldid=210004"