本頁說明如何產生及設定基本 Looker 擴充功能範本，然後新增功能。
如要建立新的 Looker 擴充功能，請執行下列工作：
下列程序說明如何建構上述元素。
為擴充功能設定 Looker
每個 Looker 擴充功能都需要 LookML 專案，其中包含模型檔案和資訊清單檔案才能執行。
為擴充功能建立空白專案。
在新專案中，使用 Looker IDE 檔案瀏覽器頂端的
+建立模型檔案。系統會產生新的模型檔案，其中包含
connection參數和include參數：
將
connection參數中的connection_name替換為執行個體上有效資料庫連線的名稱。擴充功能需要有效的模型檔案，因為 Looker 權限資料是透過 LookML 模型存取。如要管理擴充功能的存取權，您必須將擴充功能與有效的 LookML 模型建立關聯，並授予使用者存取該模型的權限。編輯完模型檔案後，按一下「儲存變更」。由於擴充功能不需要檢視畫面檔案，請刪除
include: "/views/*.view.lkml"參數，或在行首加入#字元，將該行設為註解。如果保留include: "/views/*.view.lkml"參數，LookML 驗證工具就會產生錯誤。使用 Looker IDE 檔案瀏覽器頂端的
+，建立專案資訊清單檔案。專案資訊清單檔案一開始會是空白，但稍後您會將產生的內容複製到專案資訊清單檔案中，其中會包含
application參數。application參數會為擴充功能提供標籤、告知 Looker 擴充功能 JavaScript 的位置，並提供擴充功能的權利清單。授權會定義擴充功能可存取的 Looker 資源。除非 Looker 資源列於授權中，否則擴充功能無法存取該資源。不過，您現在可以保留資訊清單檔案，因為稍後您會將檔案的其餘內容複製到其中。
為新專案設定 Git 連線。
如要存取「設定 Git」頁面，請按一下 Looker IDE 右上角的「設定 Git」按鈕，或使用「專案設定」頁面，如「設定及測試 Git 連線」說明文件頁面所述。
為擴充功能設定專案並連結至 Git 後，即可產生擴充功能範本檔案。
產生擴充功能範本檔案
產生擴充功能範本程式碼檔案的方法有兩種：
這兩個程序都需要 Yarn，因此請務必安裝 Yarn。
使用 create-looker-extension 建立擴充功能範本
create-looker-extension 公用程式會建立基本 Looker 擴充功能，其中包含所有必要的擴充功能檔案和依附元件。然後以此為基礎，加入其他程式碼和功能，完成擴充功能。
如要產生擴充功能範本，請按照下列步驟操作：
執行
create-looker-extension公用程式，並將<extension_name>替換為擴充功能的名稱：yarn create looker-extension <extension_name>確認擴充功能名稱或提供其他名稱，然後選取要用來建構擴充功能的語言和架構：
接著，
create-looker-extension公用程式會使用您指定的架構填入基礎範本，並將所有產生的檔案放入以擴充功能名稱命名的新目錄：
前往為擴充功能建立的目錄：
cd <extension_name>安裝擴充功能依附元件：
yarn install啟動開發伺服器：
yarn develop擴充功能現已開始執行，並在本機的
http://localhost:8080/bundle.js提供 JavaScript。擴充功能目錄中會有
manifest.lkml檔案。複製這個檔案的內容。在 LookML 專案中，將
manifest.lkml的內容貼到專案資訊清單檔案：
按一下「儲存變更」，儲存專案資訊清單檔案。
在 LookML IDE 中，依序點選「驗證 LookML」、「提交變更並推送」和「部署至正式環境」。
使用瀏覽器的重新載入功能重新載入 Looker。
在 Looker 主選單的「Applications」(應用程式) 部分，您會看到新擴充功能的名稱。
從「應用程式」部分選取擴充功能，即可查看擴充功能的輸出內容。
複製 Git 存放區來建立擴充功能範本
Looker 在 https://github.com/looker-open-source/extension-examples 維護含有多個擴充功能範本的 Git 存放區。如要使用其中的範例，請前往該範例的存放區，然後按照接下來的指示操作。
這個程序需要 Yarn，請確認您已安裝 Yarn。
在本地指令列中，使用下列指令複製 Git 存放區：
git clone git@github.com:looker-open-source/extension-examples.git前往內含要在系統上安裝範本的目錄。在本範例中，我們將使用 React 和 JavaScript「Hello World」擴充功能：
cd extension-examples/react/javascript/helloworld-js安裝擴充功能依附元件：
yarn install您可能需要更新 Node 版本，或使用 Node 版本管理工具變更 Node 版本。
擴充功能目錄中會有
manifest.lkml檔案。複製這個檔案的內容。在 LookML 專案中，將
manifest.lkml的內容貼到專案資訊清單檔案：
按一下「儲存變更」，儲存專案資訊清單檔案。
在 LookML IDE 的右上角，依序點選「驗證 LookML」、「提交變更並推送」和「部署至正式環境」。
在終端機中啟動開發伺服器：
yarn develop擴充功能現已開始執行，並在資訊清單檔案的
url參數中指定的本機開發伺服器上提供 JavaScript：http://localhost:8080/bundle.js。使用瀏覽器的重新載入功能重新載入 Looker。
在 Looker 主選單的「應用程式」部分，您會看到新擴充功能的名稱，這是由專案資訊清單檔案中的
label參數決定。從「應用程式」部分選取擴充功能，即可查看擴充功能的輸出內容。
修改擴充功能
建立基本擴充功能後，您可以修改適當的 JavaScript 或 TypeScript 檔案，藉此修改或新增程式碼。
擴充功能目錄下的 src 目錄包含原始碼檔案，您可以在其中新增程式碼。在先前的範例中，如果是 React 和 JavaScript「Hello World」範本，檔案會稱為 HelloWorld.js。修改或新增該檔案的程式碼，就會修改或新增擴充功能的函式。
以下是 React 和 JavaScript HelloWorld.js 檔案的輸出內容：
import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const HelloWorld = () => {
const { core40SDK } = useContext(ExtensionContext)
const [message, setMessage] = useState()
useEffect(() => {
const initialize = async () => {
try {
const value = await core40SDK.ok(core40SDK.me())
setMessage(`Hello, ${value.display_name}`)
} catch (error) {
setMessage('Error occured getting information about me!')
console.error(error)
}
}
initialize()
}, [])
return (
<>
<ComponentsProvider>
<Space p="xxxxxlarge" width="100%" height="50vh" around>
<Text p="xxxxxlarge" fontSize="xxxxxlarge">
{message}
</Text>
</Space>
</ComponentsProvider>
</>
)
}
在先前的範例中，您可以變更以下程式碼行的文字，藉此變更擴充功能的文字輸出內容：
setMessage(`Hello, ${value.display_name}`).
請注意，新增功能時，您可能需要在專案資訊清單檔案的
application參數中，修改授予擴充功能的權利。