Google浏览器扩展程序开发案例展示(二)
2021-01-25 09:27:50

在上一小节中,我们完成了第一个案例:扩展程序中的HelloWorld,文章链接如下:
该扩展程序能够在键盘释放的时候,获取 input 标签中用户所输入的字符,并用该字符去替换我们在 h2 标签中设置的 World 值,在本小节中,我们再来看一个案例,首先,给各位小伙伴看一下做出来的效果:

效果展示

Budget Manager主界面

效果展示

Budget Manager options界面

接下来,我们来明确一下该扩展程序的主要功能,该扩展程序主要包括以下两个页面:

  • 默认启动界面(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 库,如图所示:

demo

完成了项目的准备工作之后,我们就可以开始来写代码了。

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"
}

上述配置文件中,我们对我们的扩展程序主要做了如下配置:

  1. 该扩展程序的名称(name)为 budget_manager,当前版本(version)为1.0版本,所使用的配置文件语法标准为MV2;
  2. 该扩展程序为 Browser Action 类型,通常在Chrome浏览器的工具栏中,地址栏的右侧,只要装了该Chrome扩展的浏览器,就会显示该图标,当点击该扩展程序的图标时,会弹出 popup.html 页面;
  3. 该扩展程序可用的权限包括 storage、storage、contextMenus;
  4. 该扩展程序有后台脚本文件,即 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. 一个1级标题,其文本内容是Budget Manager
  2. 两个2级标题,分别用来显示总花销(Total Spent)和预算(limit);
  3. 一个输入框,该输入框有一个 id 属性,其值为amount
  4. 一个提交按钮,该按钮有一个 id 属性,其值为spendAmount
  5. 关于页面样式文件的设计(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>

接着,我们来分析一下思路:

  1. 当用户打开该扩展程序的默认界面时,首先判断当前总花销是否存在,如果存在
  2. 判断用户是否从输入框中输入当前花销值,若该值不为空,则将对应的值与总花销相加,并重新更新总花销的值;

请看代码:

$("#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