Chrome浏览器插件开发视频教程第3课第一个插件Hello world

最新推荐文章于 2024-09-03 16:40:55 发布

__畫戟__

最新推荐文章于 2024-09-03 16:40:55 发布

阅读量536

点赞数

分类专栏：浏览器插件文章标签： chrome插件开发浏览器插件开发浏览器插件 chrome插件浏览器扩展

原文链接：https://www.toolchest.cn/?p=21

版权

浏览器插件专栏收录该内容

5 篇文章 1 订阅

订阅专栏

视频教程和源码见文章结尾

大家好，欢迎来到chrome浏览器插件开发，这是我们的第3课。现在，我们来创建我们的第一个chrome插件helloWorld，该插件的主要功能是，当我们点击插件时弹出hello world界面。

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>