Skip to main content
你將建立一個 Omnibox(網址列)捷徑。在網址列輸入 gh、再輸入查詢字串,就會直接前往 GitHub 搜尋結果。過程中你會串接一份 manifest.json,並在背景 service worker 中處理輸入。同時也會熟悉每個專案都會遵循的開發循環(createdevbuild)。

你會做出什麼

計畫

讓 GitHub 搜尋速度像瀏覽器原生捷徑一樣快。擴充功能會保留關鍵字 gh;當你輸入 gh 加上查詢字串後,會打開 GitHub 的搜尋結果。

步驟 1:建立擴充功能

使用 Extension.js 的 create 指令來建立一個名為 github-search 的最小擴充功能。

步驟 2:建立 manifest 檔案

每個擴充功能都從 manifest 檔案開始。它定義中繼資料、權限與執行階段檔案。根據上述計畫,設定 gh 捷徑並加入處理使用者事件的 service worker。
  • omnibox.keyword:當你輸入 gh 時,瀏覽器會觸發事件。
  • background.service_worker:監聽你觸發的事件。

步驟 3:建立背景 service worker

在瀏覽器擴充功能中,背景 service worker(一個獨立於任何可見頁面執行的腳本)負責處理瀏覽器事件。 在這個範例中,加入一段腳本來監聽 Omnibox 輸入,並把查詢字串導向 GitHub 搜尋。 建立 service_worker.js
上面這段腳本會在你於網址列輸入「gh」之後再輸入任何內容時,開啟一個顯示 GitHub 搜尋結果的新分頁。

步驟 4:載入你的擴充功能

你的 package.json 檔案現在看起來像這樣:
這些 script 是 Extension.js 預設的指令。第一次執行擴充功能:
如果設定正確,Extension.js 會啟動使用全新設定檔的 Chrome、以未封裝擴充功能的方式載入 github-search,並在終端機印出就緒訊息。Chrome 的網址列現在已認得 gh 為關鍵字。 輸入 gh 接著按一下空白鍵,輸入 extension.js,按下 Enter。會開啟新分頁前往 https://github.com/search?q=extension.js&type=issues
你現在有一個可以搜尋 GitHub 的可運作擴充功能了。

步驟 5:讓它變得更好

透過 Omnibox 輸入監聽器,在網址列直接顯示建議,藉此改善搜尋體驗。 更新 service_worker.js,在輸入時抓取 GitHub 建議並顯示出來。
service_worker.js
這段程式碼會在網址列直接加入即時的 GitHub 建議。 你現在有一個可運作的 GitHub 搜尋擴充功能。繼續迭代,調整成符合自己工作流程的版本。

後續步驟