开发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中文网其他相关文章！