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

您將學到什么：

• 啟用Chrome的開發(fā)人員模式進行測試和調(diào)試。
• 創(chuàng)建manifest.json文件 - 擴展程序控制中心。
• 合并以進行語言選擇的標志圖標。
• 構建用于用戶交互的彈出菜單。
• 在擴展中添加和管理語言。
• 將您的擴展名發(fā)布到Chrome網(wǎng)絡商店（需要注冊和費用）。

1。設置Chrome開發(fā)人員模式：

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

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

2。 manifest.json文件：

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

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

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

3。添加語言標志圖標：

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

4。 background.js服務工作者：

使用此代碼創(chuàng)建background.js ：

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

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

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

5。創(chuàng)建彈出菜單（ popup.html和popup.css ）：

創(chuàng)建popup.html ：

 


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


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

創(chuàng)建popup.css ：

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

6。彈出JavaScript（ popup.js ）：

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

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


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

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

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

注冊為Chrome網(wǎng)絡商店開發(fā)人員（需要費用）以發(fā)布您的擴展名。

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

以上是開發(fā)Google Chrome Extensions的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！