该教程通过使用HTML，CSS和JavaScript构建基本的Google Chrome扩展名来指导您。我们将创建一个简单的语言选择器，学习关键的扩展开发概念。用于用户交互的弹出菜单。
首先要激活Chrome中的开发人员模式。这使您可以在开发过程中加载和测试扩展。通过单击Chrome右上角的三个垂直点（更多工具）来访问此问题，然后选择“更多工具”＆gt; “扩展”，然后启用“开发人员模式”在右上方的切换开关。
文档有关可用功能的详细信息。
2。 subtest.json 文件：
为您的项目创建一个新文件夹（例如，“ Leganagennapicker”）。内部，创建 subtest.json 使用此代码：
{“ name”：“ dangudic picker”，“ descript”：“一个简单的语言选择扩展”，“版本”，“ 1.0”，“ 1.0”，“ subtest_version”：3，“ 3，”背景“：services_worker”：{“ service_worker”：{“ service_js”：“ "default_popup": "popup.html" } }This file tells Chrome about your extension: its name, description, version, background script (background.js), required permissions (access to storage), and the popup HTML file (popup.html).
3.添加语言标志图标：
在项目文件夹中创建“标志”子目录。 Download five flag images (eg, English, Chinese, Italian, etc.) and save them as english.png, chinese.png, etc.
让语言='url（flags/English.png）'; chrome.runtime.oninstalled.addlistener（（（）=＆gt; {chrome.storage.sync.set（{language}）; console.log（`默认语言设置为$ {language}`）;};};
以安装为英语。创建弹出菜单（ popup.html 和 popup.css ）：
创建 popup.html ：
<pre class="brush:php;toolbar:false"> <pre class="brush:php;toolbar:false">＆lt;！ <html> <head> <Title>语言选择器</title> <link rel =“ stylesheet” href =“ popup.css”> </head> <body> <hody> <div id =“ flagoptions”> </div> </div> <src = src =“ popup.js”> <code> popup.css </code>：</p> <pre class="brush:php;toolbar:false"> .container {width：300px; }按钮{高度：30px;宽度：30px;大纲：无；边界：无；边界拉迪乌斯：50％；保证金：10px;背景重复：无重复；背景位置：中心；背景大小：包含； } .currentflag {/ *为当前选择的标志添加样式 */} 6。弹出javaScript（ popup.js ）：
创建 popup.js （这是一个简化的版本，需要进一步开发完整功能）：
// ...包含JavaScript以动态生成“其他langs”数组的语言按钮，处理单击事件以更改选定的语言，并由于长度约束而更新UI，可以从原始示例中推断出此详细的代码。）** 7。加载和测试：**在“ Chrome：// Extensions/`，单击“打开包装”，选择您的项目文件夹，然后测试扩展程序。 ** 8。发布（高级）：**注册为Chrome网络商店开发人员（需要费用）以发布您的扩展名。该简化版本为创建基本的Chrome扩展名提供了更清晰，更简洁的途径。请记住，基于原始，更详细的示例中介绍的逻辑填写缺失的`popup.js'代码。">
以上是开发Google Chrome Extensions的详细内容。更多信息请关注PHP中文网其他相关文章！
