Google浏览器扩展程序开发案例展示(一)
2021-01-24 21:26:50

在了解了前几章关于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