怎麼讓網站在輸入網址後按 tab 就可以直接搜尋網站內容(OpenSearch)

無意間注意到 Chrome 在網址列輸入 youtube 時會提示按下 tab, 按下 tab 後 網址列會出現 搜尋 YouTube 影片搜尋 的前綴,接著就可以直接搜尋 youtube 上的影片,覺得滿方便的,所以就來看看可以怎麼做吧

youtube 效果

1youtubetab

  • 直接搜尋 yoututbe 影片 youtubetab

設定方式

  1. 程式加上可接受查詢字串

    • 讓網站有位置可以接住帶進來的查詢字串
    • 這邊先不做事,查詢字串內容直接顯示出來

    searchfunction

  2. 設定 OpenSearch 描述文件

    • 2-1. 新增檔案

      • 專案右鍵–> Add –> New Item…

        newfile

    • 2-2. 選擇 XML 檔

      • Data–> XML File

        newxml

    • 2-3. 加入 OpenSearch 描述內容

      <?xml version="1.0" encoding="UTF-8"?>
       <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
        <ShortName>yowko Search</ShortName>
        <Description>Use localhost to search the Web.</Description>
        <Tags>example web</Tags>
        <Contact>yowko@yowko.com</Contact>
        <Url type="text/html"
            template="http://localhost:18735/search/index?q={searchTerms}"/>
      </OpenSearchDescription>
      

      editxml

  3. 引用 OpenSearch 描述文件

    • 在 head 區域中加上

      <link rel="search"
               type="application/opensearchdescription+xml"
               href="http://localhost:18735/opensearch.xml"
               title="Content search" />
      

    include

  4. 效果

    • 4-1. 網址列輸入關鍵字

    tab

    • 4-2. 可直接搜尋

    opensearch

    • 4-3. 搜尋結果

    result

  5. 其他設定

    • 5-1. 編輯搜尋引擎

      • 網址列右鍵 –> 編輯搜尋引擎

      rightclick

    • 5-2. 修改關鍵字

      • 可以修改成喜歡的字

      searchengine

整個設定的工並不多,但提升方便性非常多,太划算了!!

參考資料

  1. 在Chrome網址列搜尋Youtube
  2. opensearch.org
  3. For developers Specifications