google 浏览器插件开发简单学习案例：计算器

1、首先，我们需要创建扩展的文件结构
在这里插入图片描述

2、创建 manifest.json 文件
是Chrome插件的配置文件，定义了插件的基本信息和资源。

{"manifest_version": 3,"name": "Simple Calculator","version": "1.0","description": "A simple calculator extension for Chrome","action": {"default_popup": "popup.html","default_icon": {"16": "images/calculator-16.png","48": "images/calculator-48.png","128": "images/calculator-128.png"}},"icons": {"16": "images/calculator-16.png","48": "images/calculator-48.png","128": "images/calculator-128.png"}
}

3、创建 popup.html 文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Calculator</title><style>body {width: 230px;font-family: Arial, sans-serif;background-color: #f0f0f0;margin: 0;padding: 10px;}#calculator {background-color: #333;border-radius: 5px;padding: 10px;}#display {width: 100%;height: 40px;margin-bottom: 10px;font-size: 20px;text-align: right;background-color: #eee;border: none;border-radius: 3px;}.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 5px;}button {width: 100%;height: 40px;font-size: 18px;border: none;border-radius: 3px;cursor: pointer;background-color: #4CAF50;color: white;}button:hover {background-color: #45a049;}.operator {background-color: #ff9800;}.operator:hover {background-color: #e68a00;}#clear {background-color: #f44336;}#clear:hover {background-color: #da190b;}</style>
</head>
<body><div id="calculator"><input type="text" id="display" readonly><div class="buttons"><button id="clear">C</button><button class="operator">÷</button><button class="operator">×</button><button class="operator">-</button><button>7</button><button>8</button><button>9</button><button class="operator">+</button><button>4</button><button>5</button><button>6</button><button id="equals">=</button><button>1</button><button>2</button><button>3</button><button>0</button><button>.</button></div></div><script src="popup.js"></script>
</body>
</html>

4、创建 popup.js 文件以实现计算器的功能

document.addEventListener('DOMContentLoaded', function() {const display = document.getElementById('display');const buttons = document.querySelectorAll('button');let currentValue = '';let operator = '';let previousValue = '';buttons.forEach(button => {button.addEventListener('click', function() {const value = this.textContent;if (value >= '0' && value <= '9' || value === '.') {currentValue += value;display.value = currentValue;} else if (value === 'C') {currentValue = '';operator = '';previousValue = '';display.value = '';} else if (value === '=') {if (previousValue && operator && currentValue) {currentValue = operate(parseFloat(previousValue), parseFloat(currentValue), operator);display.value = currentValue;previousValue = '';operator = '';}} else {if (currentValue) {if (previousValue && operator) {previousValue = operate(parseFloat(previousValue), parseFloat(currentValue), operator);} else {previousValue = currentValue;}currentValue = '';operator = value;display.value = previousValue;}}});});function operate(a, b, op) {switch(op) {case '+': return a + b;case '-': return a - b;case '×': return a * b;case '÷': return b !== 0 ? a / b : 'Error';default: return b;}}
});

5、创建images文件夹
里面存放插件应用的图标，三个不同尺寸的图标文件，比如16是指16x16 像素
在这里插入图片描述

6、google浏览器加载使用

打开Chrome浏览器，进入 chrome://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择包含这些文件的文件夹

在这里插入图片描述

把imges文件夹下的图片按要求更改尺寸后图标显示正常：

在这里插入图片描述

7、上架插件

如何提交审核上架 Chrome 扩展

准备工作
- 确保您的扩展完全按预期工作。
- 准备一个简短的描述和详细的描述。
- 准备至少一张截图（1280x800 或 640x400 像素）。
- 准备一个 128x128 像素的高质量图标。
- 如果适用，准备一个宣传图片（440x280 像素）。
- 准备隐私政策（如果您的扩展收集用户数据）。
创建开发者账户
- 访问 Chrome Web Store 开发者控制台。
- 支付一次性的 $5 注册费。
创建新项目
- 在开发者控制台中，点击 “New item”（新建项目）。
上传您的扩展
- 将您的扩展文件打包成一个 ZIP 文件。
- 在表单中上传这个 ZIP 文件。
填写商店列表信息
- 输入扩展名称、简短描述和详细描述。
- 上传图标和截图。
- 选择适当的类别。
- 设置语言和目标国家/地区。
隐私和权限
- 如果适用，提供隐私政策 URL。
- 确认您遵守了开发者计划政策。
支付和分发
- 选择您的扩展是免费还是付费。
- 选择发布到公开还是私有。
提交审核
- 检查所有信息无误后，点击 “Submit for review”（提交审核）。
等待审核
- Google 通常会在几天内完成审核。
- 如果有问题，他们会通过电子邮件联系您。
发布
- 一旦审核通过，您的扩展就会在 Chrome Web Store 上发布。