在上一小节中,我们完成了第一个案例:扩展程序中的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