- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

使用HTML，CSS和JavaScript创建Chrome扩展程序

海拥发表于 2021/08/05 14:06:41 2021/08/05

【摘要】谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了Google Chrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。除了可以在Internet上浏览以外，您还可以做很多事情。您可以测试您的网页和全部。通过使用扩展程序，谷歌浏览器变得更加强大。因此，今天，我们将研究如何使用HTML，CSS和JavaScript创建您的第一个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
}