本頁說明如何產生及設定基本 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 連線。
您可以透過兩種方式存取「Configure Git」頁面：點選 Looker IDE 右上角的「Configure Git」按鈕，或是使用「Project Configuration」頁面，如「設定及測試 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 維護的 Git 存放區包含多個擴充功能範本，網址為 https://github.com/looker-open-source/extension-examples。如果您想使用其中一個範例，請前往該範例的存放區，然後按照下方顯示的操作說明進行操作。
這個程序需要使用 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擴充功能現在會在資訊清單檔案
http://localhost:8080/bundle.js的url參數中指定的本機開發伺服器上執行並提供 JavaScript。使用瀏覽器的重新載入功能重新載入 Looker。
在 Looker 主選單的「Applications」部分，您會看到新擴充功能的名稱，這會由專案資訊清單檔案中的
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參數中授予擴充功能的授權。