(二)Chrome Extension入门教程----Budget Manager(预算管理)

zwf193071

已于 2022-01-30 14:14:12 修改

阅读量517

点赞数 1

文章标签： chrome 前端 javascript

于 2022-01-25 14:23:02 首次发布

本文链接：https://blog.csdn.net/zwf193071/article/details/122683633

版权

前言

紧接着上节课，我们成功创建了Hello World Extension程序，现在让我创建稍复杂一些的，即Budget Manager Extension，它谨遵Chrome定义的API规范，新增Chrome storage功能，Extension的名字可随意取值。

何为`Budget Manager Extension`

该插件的功能如下所示：

Browser Action（与Hello World Extension的类型一致）
Accept spending （能接受的花费量）
Display total spending （显示总花费）
Limit - Notify if reached （当达到限制时，Notify）
Option to reset total and limit （选择是否重置总数和限制）

搭建`Budget Manager Extension`

`manifest.json`

我们省略上节课的开始步骤，直接编写manifest.json文件，其内容如下所示：

{
    "manifest_version": 2,
    "name": "Budget Manager",
    "version": "1.0",
    "description": "This extension tracks your overall spendings.",
    "icons": {
        "128": "./assets/icon.png",
        "48": "./assets/icon.png",
        "16": "./assets/icon.png"
    },
    "browser_action": {
        "default_icon": "./assets/icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "storage"
    ]
}

上面的icons我只用了一个图片，且该图片是从iconfont网站里，随意找的money图标

与Hello World Extension不同的是，该文件多了下面这块代码，其功能是它需要能访问Chrome Storage：

"permissions": [
	 "storage"
 ]

若没有添加permissions，扩展程序会报错，如下图所示：
在这里插入图片描述

点击错误按钮，进入到错误的详情页面：
在这里插入图片描述

`popup.html`

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Manager Extension</title>
</head>
<body>
    <h1>Budget Manager Extension</h1>
    <h2>总花费: <span id="total">0</span></h2>
    <h2>限制: <span id="limit"></span></h2>
    <h3>输入数量</h3>
    <input type="text" id="amound" />
    <input type="submit" id="spendAmount" value="Spend">
</body>
</html>

完成之后，在chrome://extensions页面内，添加该程序，如下图所示：
在这里插入图片描述

`Chrome Storage`

在这里插入图片描述

上图的Spend对应popup.html里面的Spend按钮，当其点击时，会调用Chrome API的Set方法，将值存入Chrome Storage，同时，当我们需要其值时，亦可通过Get获取到

`popup.js`

该文件的完整代码如下所示：

window.onload= () => {
    const $spendAmount = document.querySelector('#spendAmount')
    const $amount = document.querySelector('#amount')
    const $total = document.querySelector('#total')
    chrome.storage.sync.get('total', function(budget) {
        $total.textContent = budget.total
    })

    $spendAmount.addEventListener("click", () => {
        chrome.storage.sync.get('total', function(budget) {
            let newTotal = 0
            if (budget.total) {
                newTotal += parseInt(budget.total)
            }
            const amount = $amount.value
            if (amount) {
                newTotal += parseInt(amount)
            }
            chrome.storage.sync.set({"total": newTotal})

            $total.textContent = newTotal
            $amount.value = ''
        })
    })
}

其中，这段代码chrome.storage.sync.get('total', function(budget) { $total.textContent = budget.total })的功能为：再次点击该插件图标时，界面会显示已存储的值，如下面动态图所示：

在这里插入图片描述

结语

今天的浏览器插件课程先到这里，咱们下节课再见

zwf193071

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(二)Chrome Extension入门教程----Budget Manager(预算管理)

前言紧接着上节课，我们成功创建了Hello World Extension程序，现在让我创建稍复杂一些的，即Budget Manager Extension，它谨遵Chrome定义的API规范。何为Budget Manager ExtensionBrowser Action（与Hello World Extension的类型一致）Accept spending （能接受的花费量）Display total spending （显示总花费）Limit - Notify if reached （
复制链接

扫一扫