写点什么

使用 HTML,CSS 和 JS 创建 Chrome 扩展程序

  • 2021 年 12 月 01 日
  • 本文字数:3198 字

    阅读完需:约 10 分钟

使用HTML,CSS 和 JS 创建 Chrome 扩展程序

介绍

谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了 Google Chrome 浏览器,它可以帮助我同步书签,浏览器历史记录,密码管理器等等。


对于台式机,除了可以在 Internet 上浏览以外,您还可以做很多事情。您可以测试您的网页和全部。通过使用扩展程序,谷歌浏览器变得更加强大。


因此,今天,我们将研究如何使用 HTML,CSS 和 JavaScript 创建您的第一个 Google Chrome 扩展程序。

设置

要求

Chrome 扩展入门的要求很少。列表在这里:


  • Google Chrome 扩展程序(用于测试)

  • 文本编辑器(我更喜欢 VS Code,您可以根据需要使用其他编辑器)

  • 有关 HTML,CSS 和 JavaScript 的基础知识

Chrome 扩展程序

我们将为第一个 Chrome 扩展程序开发一个计算器应用程序。如果您知道如何为网络应用程序制作计算器,那么本教程将对您来说很容易。现在,您只需要知道“如何设置扩展名?”即可。

manifest.json

每个应用程序都需要一个清单---一个描述该应用程序的 JSON 格式文件,名为manifest.json。此文件将帮助您的应用管理权限,存储,清单版本,登录页面,名称,图标等。


这是清单的代码


{    "manifest_version" : 2,    "name" : "Calculator",    "version" : "1.0",    "description" : "Calculate Anywhere",    "icons" : {        "128" : "img/icons128.png",        "48" : "img/icons48.png",        "16" : "img/icons16.png"    },    "browser_action" : {        "default_icon" : "img/icons16.png",        "default_popup" : "popup.html"    },    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"}
复制代码

解释

  • manifest_version:您正在定义要使用的清单的版本。我们目前使用的是 2,但最近 Google 推出了版本 3。

  • name:这是您的应用程序的名称。目前,我们称其为“计算器”。

  • description:顾名思义,您将在此处描述扩展名。很少有描述扩展名的句子就足够了。现在,我们将其命名为“随时随地计算”。

  • icons:您需要为扩展程序的图标提供 src。您需要提供图标大小不同的来源。

  • browser_actions:我们使用 browser_actions 将扩展名放置在工具栏上,该工具栏位于地址栏的右边。浏览器操作具有图标,工具提示,徽章和弹出窗口。

  • default_icon:图标图像的来源。

  • default_popup:它是扩展程序登录页面的源。它必须为 HTML 格式。您可以根据自己的名字命名。对我来说,它是“popup.html”。

  • content_security_policy:声明允许 chrome 扩展视为其他功能。我使用eval()函数来计算我不建议用于商业目的的方程式。您可以使用单独的函数进行计算。

popup.html,popup.js 和 style.css

这里我不会随意更改 HTML,CSS 和 JavaScript 部分。不过您可以自由编写

popup.html

<!DOCTYPE html><html lang="en"><head>    <link rel="stylesheet" href="style.css">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Wanghao | Calculator</title></head>
<body> <div class="inputButton"> <input type="text" id="textField"> </div> <div class="inputButton"> <div class="rowField"> <button id="7b" class="small">7</button> <button id="8b" class="small">8</button> <button id="9b" class="small">9</button> <button id="+b" class="small">+</button> </div>
<div class="rowField"> <button id="4b" class="small">4</button> <button id="5b" class="small">5</button> <button id="6b" class="small">6</button> <button id="-b" class="small">-</button> </div>
<div class="rowField"> <button id="1b" class="small">1</button> <button id="2b" class="small">2</button> <button id="3b" class="small">3</button> <button id="*b" class="small">*</button> </div>
<div class="rowField"> <button id="0b" class="medium">0</button> <button id="/b" class="small">/</button> </div>
<div class="rowField"> <button id="submit" class="large">Calculate</button> </div> </div> <script src="popup.js"></script></body>
</html>
复制代码

style.css

* {    margin: 0;    padding: 0;}
body{ background-color: #2b3252;}
#textField{ border: none ; border-radius: 2rem; padding: 0.25em; color: #2b3252}
.inputButton{ margin : 0.5rem; max-width: 90%;}
.rowField{ display: flex; justify-content: space-between;}
.small,.medium,.large{ margin: 0.2rem; background-color: #fce77d; border: none ; border-radius: 2em; color: #2b3252}
.small:hover,.medium:hover,.large:hover{ background-color: #ef5455}
.small{ width : 30%}
.medium{ width : 100%}
.large{ width:100%}
复制代码

popup.js

document.getElementById("submit").addEventListener("click", calculate)document.getElementById("7b").addEventListener("click", () => (des(7)))document.getElementById("8b").addEventListener("click", () => (des(8)))document.getElementById("9b").addEventListener("click", () => (des(9)))document.getElementById("4b").addEventListener("click", () => (des(4)))document.getElementById("5b").addEventListener("click", () => (des(5)))document.getElementById("6b").addEventListener("click", () => (des(6)))document.getElementById("1b").addEventListener("click", () => (des(1)))document.getElementById("2b").addEventListener("click", () => (des(2)))document.getElementById("3b").addEventListener("click", () => (des(3)))document.getElementById("0b").addEventListener("click", () => (des(0)))document.getElementById("+b").addEventListener("click", () => (des("+")))document.getElementById("/b").addEventListener("click", () => (des("/")))document.getElementById("-b").addEventListener("click", () => (des("-")))document.getElementById("*b").addEventListener("click", () => (des("*")))
function calculate(){ var input = document.getElementById("textField").value const value = eval(input) document.getElementById("textField").value=value}
function des(val){
document.getElementById("textField").value+=val}
复制代码


您可以在我的 Github 存储库中查看整个代码。


https://github.com/wanghao221/extension-calculator


或者 Gitee 存储库


https://gitee.com/haiyongcsdn/extension-calculator

在 Chrome 中安装扩展程序

为了进行检查,我们首先将代码下载解压到我们的电脑中。



首先,访问 chrome://extensions 打开扩展程序管理器



单击加载解已解压的扩展程序按钮。出现一个文件对话框。



在文件对话框中,选择extension-calculator(目录包含 manifest.json 的文件夹)。除非出现错误对话框,否则您现在已经安装了该应用程序。如下图就是成功了



成功安装后,在右上角可以看到,如果没有,点开右边像拼图一样的东西,里面就可以找到


最后注

至此我们自制的计算器就完成了



本人也在学习进行中,如果文章中出现错误或者大家遇到一些问题,都可以在评论区中指出。

发布于: 2021 年 12 月 01 日阅读数: 31
用户头像

公众号:海拥 2021.11.29 加入

【个人网站】haiyong.site 【软件技能】Java,Python,JS 【兴趣爱好】学习使我快乐,编程令我永生 【个人称号】HDZ核心组成员,CSDN原力作者

评论 (2 条评论)

发布
用户头像
学到了。
2021 年 12 月 01 日 09:35
回复
多谢认可
2021 年 12 月 01 日 09:40
回复
没有更多了
使用HTML,CSS 和 JS 创建 Chrome 扩展程序