5分钟学会开发浏览器扩展

最新推荐文章于 2024-08-05 14:40:49 发布

weixin_42088434

最新推荐文章于 2024-08-05 14:40:49 发布

阅读量3.8k

点赞数 1

分类专栏：前端文章标签： chrome扩展 chrome

本文链接：https://blog.csdn.net/weixin_42088434/article/details/84528157

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写在前面

做web开发的同学，经常会用到各种chrome浏览器插件，那么我们寄几怎么开发一个插件呢（其实是浏览器扩展）？其实很简单，你意想不到的简单。只要有web开发基础，会写基本的html，css和js就可以做。
那面就跟着我一起开始吧！

1.创建项目

首先新建一个文件夹，比如叫 plugin-demo

 mkdir plugin-demo
cd plugin-demo/

2.manifest.json

chrome浏览器对插件基本要求就一个，就是要有一个manifest.json的文件。这个文件内容如下：

{
    "name": "plugin-demo",
    "version": "0.9.0",
    "manifest_version": 2,
    "description": "chrome plugin demo",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "5分钟学会开发浏览器插件",
        "default_popup": "popup.html"
    }
}

这只是一个最基本的配置，详细的配置参看这里.

3.创建界面

我们注意到，在manifest.json的配置中，有一个default_popup的选项，它的值是 popup.html,所以我们需要新建这么一个页面。
在当前项目下新建popup.html
内容我们尽可能的简单了，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 400px;
            background: #fff;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    

    <div class="container">

        <h1>这是一个chrome 插件案例</h1>
        
        <p>created by Davie</p>

    </div>
</body>
</html>

页面中，基本就是一个div以及内容展示，很简单，你自己写也可以。
然后我们的插件还需要一个图标，图标你可以自己制作，也可以去找一张图。比如这里.
我下载了一个苹果的图片作为我的这个插件的图标。放在项目根目录。把图标名字命名为icon.png(或者修改配置也可以)。

下面就是最激动人心的时刻了！

4、安装插件

现在我们就可以让chrome浏览器来安装我们的插件了。
点击浏览器最右侧的三个点图标，选择更多工具->k扩展程序，或者直接在地址栏输入 chrome://extensions/，打开扩展程序安装界面。

扩展界面：

打开开发者模式，然后选择 “加载已解压的扩展程序”

找到我们刚才新建的项目，打开就可以了。
如图，我们的插件已经安装好了

5、查看效果

点击苹果?图标就能看到我们刚刚写的插件页面啦。

啦啦啦 ~啦 ~啦，啦啦啦 ~啦 ~啦，哈哈哈哈哈。。。。。。。。

什么？图片是哪来的？
是我后来偷偷加的，就问你骚不骚？?

6、打包插件

插件一般都会打包成crx格式文件，方便安装。下面我们就把刚才我们开发的这个插件打包一下。
还是扩展安装界面，中间有个打包扩展的按钮不知道你看到没有

点击这个按钮，

点击第一个浏览，打开刚才我们的插件项目，

点击打包扩展程序按钮，

非常快，就打包好了。点击确定关闭。找到我们的扩展程序

7、使用crx格式文件安装

找到我们刚才安装好的插件

点击删除，卸载我们直接通过源码安装的插件。
然后把刚才打包好的crx文件直接拖入扩展安装页面，是的，就是直接拖过来，就这这么暴力。

然后我们就可以看到插件安装好了。

写在后面

好了，如何去开发一个chrome插件已经介绍完了。下面就是你根据自己的需要，去写一个属于自己的chrome插件了。
代码我就不给了，上面已经写了。主要就是一个manifest.json文件。
更高级的功能实现，比如消息通信，开发者工具等等，参考这篇文章：
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#injected-script

其他参考：https://www.w3cschool.cn/kesyi/kesyi-m5uo24rx.html

扫描下方二维码，关注微信公众号：H5开讲啦，获取更多学习资料。

weixin_42088434

关注

1
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
5分钟学会开发浏览器扩展

写在前面做web开发的同学，经常会用到各种chrome浏览器插件，那么我们寄几怎么开发一个插件呢（其实是浏览器扩展）？其实很简单，你意想不到的简单。只要有web开发基础，会写基本的html，css和js就可以做。那面就跟着我一起开始吧！1.创建项目首先新建一个文件夹，比如叫 plugin-demo mkdir plugin-democd plugin-demo/2.manifest...
复制链接

扫一扫