開發Google Chrome Extensions

該教程通過使用HTML，CSS和JavaScript構建基本的Google Chrome擴展名來指導您。我們將創建一個簡單的語言選擇器，並在此過程中學習關鍵的擴展開發概念。

您將學到什麼：

• 啟用Chrome的開發人員模式進行測試和調試。
• 創建manifest.json文件 - 擴展程序控制中心。
• 合併以進行語言選擇的標誌圖標。
• 構建用於用戶交互的彈出菜單。
• 在擴展中添加和管理語言。
• 將您的擴展名發佈到Chrome網絡商店（需要註冊和費用）。

1。設置Chrome開發人員模式：

首先激活Chrome中的開發人員模式。這使您可以在開發過程中加載和測試擴展。通過單擊Chrome右上角的三個垂直點（更多工具），選擇“更多工具”>“擴展名”，然後啟用“開發人員模式”切換開關。

有關可用功能的詳細信息，請諮詢Chrome擴展API文檔。

2。 manifest.json文件：

為您的項目創建一個新的文件夾（例如“ LagenchalPicker”）。內部，使用此代碼創建manifest.json 。

 {
  “名稱”：“語言選擇器”，
  “描述”：“簡單的語言選擇擴展”，
  “版本”：“ 1.0”，
  “ castest_version”：3，
  “背景”： {
    “ service_worker”：“ background.js”
  }，，
  “權限”：[“存儲”]，，
  “行動”： {
    “ default_popup”：“ popup.html”
  }
}

該文件告訴Chrome您的擴展名：其名稱，描述，版本，背景腳本（ background.js ），所需的權限（訪問存儲）和彈出式HTML文件（ popup.html ）。

3。添加語言標誌圖標：

在項目文件夾中創建一個“標誌”子目錄。下載五個標誌圖像（例如，英語，中文， chinese.png等），並將其保存為english.png

4。 background.js服務工作者：

使用此代碼創建background.js ：

令語言='url（flags/english.png）';

chrome.runtime.oninstalled.addlistener（（）=> {
  chrome.storage.sync.set（{language}）;
  console.log（`默認語言設置為$ {language}`）;
}）;

安裝後，將默認語言設置為英語。

5。創建彈出菜單（ popup.html和popup.css ）：

創建popup.html ：

 


  <title>語言選擇器</title>
  <link rel="stylesheet" href="popup.css">


  <div id="flagOptions"></div>
  <script src="popup.js"></script>

創建popup.css ：

 .Container {width：300px; }
按鈕{高度：30px;寬度：30px;大綱：無；邊界：無；邊界拉迪烏斯：50％；保證金：10px;背景重複：無重複；背景位置：中心；背景大小：包含； }
.currentflag { / *添加當前選擇的標誌的樣式 * /}

6。彈出JavaScript（ popup.js ）：

創建popup.js （這是一個簡化的版本，需要進一步的完整功能開發）：

// ...（用於動態創建語言標誌的按鈕並處理單擊，類似於原始示例，但簡化為簡短的示例）... ...
``（本節將包含JavaScript，以動態生成``eacterlangs''數組的語言按鈕，處理單擊事件以更改所選的語言，並相應地更新UI。由於長度約束，該詳細代碼省略了，但可以從原始示例中推斷出該詳細的代碼。）


** 7。加載和測試：**

在“ chrome：// gettensions/`中，單擊“打開包裝”，選擇您的項目文件夾，然後測試您的擴展名。

** 8。出版（高級）：**

註冊為Chrome網絡商店開發人員（需要費用）以發布您的擴展名。

該簡化版本為創建基本的Chrome擴展名提供了更清晰，更簡潔的途徑。請記住，基於原始，更詳細的示例中介紹的邏輯填寫缺失的`popup.js'代碼。

以上是開發Google Chrome Extensions的詳細內容。更多資訊請關注PHP中文網其他相關文章！