在上一小节中，我们完成了第一个案例：扩展程序中的HelloWorld，文章链接如下：
该扩展程序能够在键盘释放的时候，获取 input 标签中用户所输入的字符，并用该字符去替换我们在 h2 标签中设置的 World 值，在本小节中，我们再来看一个案例，首先，给各位小伙伴看一下做出来的效果：
接下来，我们来明确一下该扩展程序的主要功能，该扩展程序主要包括以下两个页面：
- 默认启动界面（popup.html）
该页面为扩展程序主界面，用来处理用户操作。该页面中包含扩展程序名称（Budget Manager）、总花销（Total Spent）、预算（limit），输入框（用来输入用户的花销）、点击按钮； - 选项界面（options.html）
该页面有两个功能：设置预算上限、将花销清零；
主页面中包含总花销、预算两个重要信息，用户可以在主页面的输入框中输入当前花销，然后点击按钮（Spend）更新总花销的值，也可通过鼠标选中网页中的对应内容并通过单击鼠标右键找到 contextMenus 中对应的扩展程序来输入当前花销；在 options 界面中，用户可以设置预算的上限（limit）或重置总花销（Total Spent）；当总花销（Total Spent）的值超过预算上限时，浏览器会弹出对应通知信息，提醒用户。
接下来，我们就来看看完成该案例的具体细节，请看文章。
参考资料
➡️ Google API Reference：https://developer.chrome.com/docs/extensions/reference/
1. 新建项目
首先，我们新建一个文件，取名 google_demo2，该文件中包含扩展程序的图标、扩展程序默认相关界面（popup.html、popup.js）、扩展程序配置文件（manifest.json）、扩展程序 options 相关界面（options.html、options.js）后台脚本（eventPage.js）以及引入的 jQuery 库，如图所示：
完成了项目的准备工作之后，我们就可以开始来写代码了。
2. 扩展程序文件配置（manifest.json）
首先，我们新建一个 manifest.json 配置文件，并作如下配置，请看配置代码：
{
"manifest_version": 2,
"name": "budget_manager",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": ["storage","storage","contextMenus"],
"background": {
"scripts" : ["eventPage.js"],
"persistent":true
},
"options_page": "options.html"
}上述配置文件中，我们对我们的扩展程序主要做了如下配置：
- 该扩展程序的名称（name）为 budget_manager，当前版本（version）为1.0版本，所使用的配置文件语法标准为MV2；
- 该扩展程序为 Browser Action 类型，通常在Chrome浏览器的工具栏中，地址栏的右侧，只要装了该Chrome扩展的浏览器，就会显示该图标，当点击该扩展程序的图标时，会弹出 popup.html 页面；
- 该扩展程序可用的权限包括 storage、storage、contextMenus；
- 该扩展程序有后台脚本文件，即 eventPage.js，该扩展程序会持续运行，随时可以访问（persistent值为true）;
3. 扩展程序页面结构（popup.html）
对该扩展程序进行完配置之后，我们来设计一下该扩展程序默认弹出的界面，请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>budgetManager</title>
</head>
<body>
<h1>Budget Manager</h1>
<h2>
Total Spent:
<span id="total">0</span>
</h2>
<h2>
limit:
<span id="limit"></span>
</h2>
<h3>Enter Amount</h3>
<input type="text" id="amount"/>
<input type="submit" id="spendAmount" value="Spend">
</body>
</html>上述代码中，我们分别定义了一：
- 一个1级标题，其文本内容是Budget Manager；
- 两个2级标题，分别用来显示总花销（Total Spent）和预算（limit）；
- 一个输入框，该输入框有一个 id 属性，其值为amount；
- 一个提交按钮，该按钮有一个 id 属性，其值为spendAmount；
- 关于页面样式文件的设计（style.css）这里不再赘述，大家根据自己的喜好去定义不同的CSS样式即可，接下来我们定义一下页面的交互逻辑操作。
4. 扩展程序页面逻辑（popup.js）
首先，我们在 popup.html 文件中通过 script 标签引入下载好的 jQuery 文件和即将定义的 popup.js 文件，代码如下所示：
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>接着，我们来分析一下思路：
- 当用户打开该扩展程序的默认界面时，首先判断当前总花销是否存在，如果存在
- 判断用户是否从输入框中输入当前花销值，若该值不为空，则将对应的值与总花销相加，并重新更新总花销的值；
请看代码：
$("#spendAmount").click(function (){
chrome.storage.sync.get(["totalNum","limit"],function (budget){
var newTotal = 0;
if(budget.totalNum){
newTotal += parseInt(budget.totalNum)
}
var amount = $("#amount").val()
if (amount){
newTotal += parseInt(amount)
}
$("#total").text(newTotal)
$("#amount").val("")
})
})上述代码中，我们通过监听 input 标签，当键盘抬起时，用输入框中的值去代替 h2 标签中的World值。
5. options 页面结构（options.html）
首先，我们在 index.html 文件中通过 script 标签引入下载好的 jQuery 文件和即将定义的 index.js 文件，代码如下所示：
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>接着，我们打开 index.js 文件，并编写如下代码：
$(function (){
$("#name").keyup(function (){
$("#greet").text("Hello,"+$("#name").val())
})
})上述代码中，我们通过监听 input 标签，当键盘抬起时，用输入框中的值去代替 h2 标签中的World值。
6. options 页面逻辑（options.js）
首先，我们在 index.html 文件中通过 script 标签引入下载好的 jQuery 文件和即将定义的 index.js 文件，代码如下所示：
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>接着，我们打开 index.js 文件，并编写如下代码：
$(function (){
$("#name").keyup(function (){
$("#greet").text("Hello,"+$("#name").val())
})
})上述代码中，我们通过监听 input 标签，当键盘抬起时，用输入框中的值去代替 h2 标签中的World值。
7. 效果展示
当我们的所有代码编写完成之后，我们将该扩展程序安装在自己的本地计算机上，具体的安装步骤这里不再赘述，请看安装成功之后的效果图：
安装成功之后，我们将刚刚上传的扩展程序固定在工具栏中，我们通过快捷键或单击操作打开该扩展程序的默认页面，然后在输入框中输入任何值，即可看到如下所示的效果：
8. 文章最后
以上就是本文的所有内容，小伙伴们学会了嘛？快去实践一下吧！
「注」本文完整代码已上传至Github，地址：https://github.com/TURBO1002/GoogleExtensions