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

您將學(xué)到什么：

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

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

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

有關(guān)可用功能的詳細(xì)信息，請咨詢Chrome擴(kuò)展API文檔。

2。 manifest.json文件：

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

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

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

3。添加語言標(biāo)志圖標(biāo)：

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

4。 background.js服務(wù)工作者：

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

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

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

安裝后，將默認(rèn)語言設(shè)置為英語。

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;背景重復(fù)：無重復(fù)；背景位置：中心；背景大小：包含； }
.currentflag { / *添加當(dāng)前選擇的標(biāo)志的樣式 * /}

6。彈出JavaScript（ popup.js ）：

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

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


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

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

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

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

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

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