视频教程和源码见文章结尾
大家好,欢迎来到chrome浏览器插件开发,这是我们的第3课。现在,我们来创建我们的第一个chrome插件helloWorld,该插件的主要功能是,当我们点击插件时弹出hello world界面。
本套课程我们使用的是vs code作为编辑器,您也可以使用其它编辑器。主要目录结构如下:
开发步骤:
1.新建文件夹存放源码
每一个插件必须有一个专门的文件夹存放源码,当我们用浏览器安装插件时,需要进入到该文件夹下进行安装。本例中为G:\chromeExt\code\lesson3_helloWorld。
2.编写manifest.json文件
注意:由于json文件不能添加注释,源码中需要将以//开始的行删除掉,否则报错
{
// manifest的版本号,该号由google确定
"manifest_version": 2,
//插件名称
"name": "helloWorld",
//插件版本
"version": "1.0",
// 插件描述介绍
"description": "hello world 插件",
// 插件的图标,分为3种分辨率
"icons":{
"128":"img/logo.png",
"48":"img/logo.png",
"16":"img/logo.png"
},
//浏览器右上角插件图标及其被点击时弹出的界面
"browser_action":{
"default_icon":"img/logo.png",
"default_popup":"popup.html"
}
}
3.编写popup.html文件
<html>
<head>
<title>hello world</title>
<meta charset="utf-8"/>
</head>
<body style="width: 200px;height:200px;">
<h1 id="message">你好</h1>
</body>
</html>
4.插件安装
在浏览器地址栏中输入chrome://extentions并按Enter键,在打开的页面中点击打开“开发者模式”,点击“加载已解压的扩展程序”,进入到插件源码文件夹内点击“选择文件夹”,点击浏览器“扩展程序”图标,选择安装的插件并将其固定到浏览器工具栏。
5.测试
点击浏览器右上角工具栏上的插件图标,测试插件
打开视频教程
关注公众号查看作者学习方法和心得, 快速上手高效学习
源码下载
链接:百度网盘 请输入提取码
提取码:g3sd
版权声明:本文为博主「ROSHAN」的原创文章