在了解了前几章关于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 库,如图所示:
这里提醒两点:
- 请在官网下载 jQuery 相关文件(地址:https://jquery.com/download/)
- 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"
}
}
}
上述配置文件中,我们对我们的扩展程序主要做了如下配置:
- 该扩展程序的名称(name)为 你好,我是石璞东,简介(description)为hahaCoder,当前版本(version)为1.0版本,所使用的配置文件语法标准为MV2;
- 该扩展程序为 Browser Action 类型,通常在Chrome浏览器的工具栏中,地址栏的右侧,只要装了该Chrome扩展的浏览器,就会显示该图标,当点击该扩展程序的图标时,会弹出 index.html 页面;
- 打开该扩展程序的方法除了鼠标单击图标之外,还可以通过快捷键 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