【chrome插件开发一】初始chrome插件——helloWorld

好大一个绿菠萝

已于 2022-03-02 23:56:26 修改

阅读量1.3k

点赞数

分类专栏： chrome插件零基础入门文章标签： chrome 前端 javascript 插件 chrome devtools

于 2022-03-02 00:10:22 首次发布

本文链接：https://blog.csdn.net/weixin_46249441/article/details/123218125

版权

chrome插件零基础入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

💓 前言

chrome插件是为chrome浏览器添加功能的小程序，chrome插件可以获取网页内容并操作网页内容，如爬取网页数据、自动点击、修改网页内容等。

chrome是使用最多的浏览器，国内很多浏览器是基于chrome内核开发的，chrome插件可以用于许多其他的浏览器上，如360、百度等浏览器。

学习chrome插件开发只需要html、css和JavaScript基础知识即可。也可以使用如jQuery之类的JavaScript库，让开发变得更加简单。

1️⃣ 第一个chrome插件 Hello World

🎈 chrome插件的文件结构

在写第一个插件前，我们先来了解下插件的结构：一个chrome插件包含：css文件、img文件、js文件、manifest.json、popup.html。其中：

manifest.json是插件的配置文件，包含插件名称、版本号、图标、权限等信息。

*.html：用于向用户展示信息并与用户交互的界面，如插件的设置界面等。

js/*.js：用于实现插件的逻辑功能，并不要求必须放在js文件夹下。

img/*.png：插件需要的图片，如插件图标等，文件类型不必是png，文件夹非必须。

css/*.css：插件中用到的css，如对网页样式进行修改时用到的css文件，文件夹非必须。

🎈 配置 manifest.json 文件

现在，来创建第一个chrome插件helloWorld。主要目录结构如下：

接下来编写manifes.json文件，配置插件相关的配置信息

{
    "manifest_version": 2, // manifest的版本
    "name": "helloWorld", // 插件的名称
    "version": 1.0, // 插件的版本
    "description": "hello world 插件", // 插件的描述、介绍
    "icons":{  // 插件的图标、这里设置了3种尺寸的大小的插件图标，注意，只要logo的图片比前面的尺寸大就可以调整了
        "128": "img/logo.png",
        "48": "img/logo.png",
        "16": "img/logo.png",
    },
    "browser_action": {  // 把插件固定到浏览器的工具栏，就是浏览器的右上角
        "default_icon": "img/logo.png",  // 插件右上角的图标
        "default_popup": "popup.html"  // 点击图标的时候弹出来的界面
    }
}

🎈编写popup.html文件

<html>
    <head>
        <title>hello World</title>
        <meta charset="utf-8"> // 设置编码，以防乱码
    </head>
    <body>
        <h1 id="message">你好</h1>
    </body>
</html>

🎈安装chrome插件

点击浏览器右上角的三个点 ——> 选择更多工具 ——> 扩展程序

然后将开发者模式打开，点击加载已解压的扩展程序，选择我们刚编写的文件夹Hello World

加载了扩展程序后，点击右上角将其固定在右上角，然后点击，即可弹出popup.html种的“你好”，

现在这样弹出的比较小，我们回到popup.html文件里，简单设置下样式

<body style="width: 200px;height: 200px;">
    <h1 id="message">你好</h1>
</body>

这时候我们再点击刷新，然后重新点击扩展logo

这回可以看到弹出的 “你好” 和之前的变化。

🎈插件中的 JavaScript 用法

现在我们学习如何在插件中使用JavaScript，在popup.html文件中添加一个input标签，使得界面显示内容随着input中输入的内容而改变。

1. 新建js/popup.js文件

2. 在popup.html文件中引入js文件

3. 在popup.html文件中添加input标签

<html>
    <head>
        <title>hello World</title>
        <meta charset="utf-8">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/popup.js"></script>
    </head>
    <body style="width: 200px;height: 200px;">
        <h1 id="message">你好</h1>
        <input id="input1" type="text">
    </body>
</html>

4. 编写popup.js实现功能

popup.js里实现的功能是，当input输入的内容发生变化时，message的内容也发生变化，并显示到弹窗上

$(function(){
    $('#input1').keyup(function(){
        $('#message').text('你好，' + $('#input1').val());
    })
})

至此，第一个chrome插件完成啦！

接下来我们将继续学习chrome插件的其他语法内容！

好大一个绿菠萝

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【chrome插件开发一】初始chrome插件——helloWorld

第一个chrome插件案例！helloWorld
复制链接

扫一扫

专栏目录