Google浏览器扩展程序开发案例展示（一）
2021-01-24 21:26:50 # Google浏览器扩展程序开发 # 前端开发

在了解了前几章关于Google浏览器扩展程序开发的基础知识之后，我们来做几个简单的案例，在本小节中，我们就来讲解第一个案例：扩展程序中的HelloWorld，首先，给各位小伙伴看一下做出来的效果：

效果展示

接下来，我们开始本文内容的讲解。

参考资料

➡️ Google API Reference：https://developer.chrome.com/docs/extensions/reference/

1. 新建项目

首先，我们新建一个文件，取名 google_demo，该文件中包含扩展程序的图标（icon文件夹内）、扩展程序默认弹出界面（index.html）、扩展程序页面逻辑文件（index.js）、扩展程序配置文件（manifest.json）、扩展程序样式设置文件（style.css）以及引入的 jQuery 库，如图所示：

demo

这里提醒两点：

  1. 请在官网下载 jQuery 相关文件（地址：https://jquery.com/download/）

jquery

  1. icon图标可以自己进行设计制作，也可以直接使用阿里巴巴的矢量图标库（地址：https://www.iconfont.cn/）

阿里巴巴的矢量图标库

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

2. 扩展程序文件配置（manifest.json）

首先，我们新建一个 manifest.json 配置文件，并作如下配置，请看配置代码：

{
  "name": "你好，我是石璞东",
  "description" : "hahaCoder",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "icon/hello.png"
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens index.html"
    }
  }
}

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

  1. 该扩展程序的名称（name）为 你好，我是石璞东，简介（description）为hahaCoder，当前版本（version）为1.0版本，所使用的配置文件语法标准为MV2；
  2. 该扩展程序为 Browser Action 类型，通常在Chrome浏览器的工具栏中，地址栏的右侧，只要装了该Chrome扩展的浏览器，就会显示该图标，当点击该扩展程序的图标时，会弹出 index.html 页面；
  3. 打开该扩展程序的方法除了鼠标单击图标之外，还可以通过快捷键 Ctrl+Shift+F；

3. 扩展程序页面结构（index.html）

对该扩展程序进行完配置之后，我们来设计一下该扩展程序默认弹出的界面，请看代码：

<!doctype html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h2 id="greet">Hello,World</h2>
    <input type="text" id="name">
  </body>
</html>

上述代码中，我们定义了一个2级标题，其文本内容是Hello,World；还定义了一个输入框，该输入框有一个id属性，其值为name，关于页面样式文件的设计（style.css）
这里不再赘述，大家根据自己的喜好去定义不同的CSS样式即可，接下来我们定义一下页面的交互逻辑操作。

4. 扩展程序页面逻辑（index.js）

首先，我们在 index.html 文件中通过 script 标签引入下载好的 jQuery 文件和即将定义的 index.js 文件，代码如下所示：

<script src="jquery-3.5.1.min.js"></script>
<script src="index.js"></script>

接着，我们打开 index.js 文件，并编写如下代码：

$(function (){
    $("#name").keyup(function (){
        $("#greet").text("Hello,"+$("#name").val())
    })
})

上述代码中，我们通过监听 input 标签，当键盘抬起时，用输入框中的值去代替 h2 标签中的World值。

5. 效果展示

当我们的所有代码编写完成之后，我们将该扩展程序安装在自己的本地计算机上，具体的安装步骤这里不再赘述，请看安装成功之后的效果图：

谷歌扩展程序

安装成功之后，我们将刚刚上传的扩展程序固定在工具栏中，我们通过快捷键或单击操作打开该扩展程序的默认页面，然后在输入框中输入任何值，即可看到如下所示的效果：

6. 文章最后

以上就是本文的所有内容，小伙伴们学会了嘛？快去实践一下吧！
「注」本文完整代码已上传至Github，地址：https://github.com/TURBO1002/GoogleExtensions

2021-01-24 21:26:50 # Google浏览器扩展程序开发 # 前端开发
Next