chrome/edge浏览器插件开发入门与加载使用

同学们可以私信我加入学习群!


正文开始

  • 前言
  • 一、插件与普通前端项目
  • 二、开发插件——manifest.json
  • 三、插件使用
    • edge浏览器中使用/加载插件
    • chrome浏览器中使用/加载插件
  • 总结


前言

chrome插件的出现,初衷可能是为了方便用户更好地控制浏览器,只是经过漫长的发展,如今已经出现各种骚操作与黑科技。

有了插件,可以说人操作浏览器的动作,都可以通过代码来自动化实现。

比如大学那些无聊的网课,可以通过插件来刷新页面;某些网站无聊的问答,可以通过插件+AI的方式自动回复;某些网站的自动签到,可以通过插件自动打开页面+签到;浏览器屏蔽广告……本系列所有工具,都可通过博主的个人主页:https://lizetoolbox.top:8080/#/qrCode_contact来获取。

具体能实现什么,需要同学们自行探索,说的太多,我就从一个分享者,变成可刑之路的引领人。

其实很多同学的基础知识扎实,上手插件开发可能只需要十分钟,但是因为缺乏这方面的了解,而感觉它很神秘。类似的还有爬虫、各类脚本……心疼那些花钱学这些的同学一秒钟。

一、插件与普通前端项目

学习插件开发前,我们先看一下普通的前端项目,以vue为例,最终打包后的目录是什么样的:
在这里插入图片描述
dist就是打包后的目录,对前端有所了解的同学都知道,把dist部署到Nginx或者tomcat中,就可以作为一个web站点运行了。

它里面有assets、img、favicon.ico、index.html四个部分。其中img文件夹、favicon.ico都是和我业务相关的文件,如果你是最干净的vue项目,不一定有这些文件,所以每个同学都会遇到,真正基础的文件只有两个:

  • assets
  • index.html
    有HTML基础的同学看到这里就会感觉很熟悉了,这不就是一个最简单的html页面吗,html文件只有一个:index.html,所有的js、css文件都放在assets中,html中通过标签,写入js和css,index的代码如下:
    在这里插入图片描述
    其中
  <script type="module" crossorigin src="/assets/index-BywMMX96.js"></script><link rel="stylesheet" crossorigin href="/assets/index-sDuVFabf.css">

就是在引入assets中的js和css。

上面就是一个最简单的vue项目打包编译后的代码结构。不管你是通过什么方式开发前端,最终得到的都是类似关系的HTML、css、js文件,这三类文件组成了前端的基础。

可能有同学会有疑惑,文章不是要讲解chrome插件吗,为什么花这么大篇幅介绍前端?

因为chrome插件就是99%的前端+1%的配置,简而言之就是,chrome插件就是在一个完整的前端项目中,写入一个描述chrome插件的配置文件。最终的文件结构如下:

在这里插入图片描述
对比普通前端的文件结构,我们就会发现,上面的图片和普通前端项目,最重要的不同就是多了个manifest.json。

二、开发插件——manifest.json

既然我们已经知道关键文件就是manifest.json,那我们研究一下这个文件,基本就学会了chrome插件开发的大部分知识,文件内的代码如下:

{"manifest_version": 2,"name": "中二少年工具箱","version": "1.0","description": "中二少年学编程开发的工具箱,微信公众号【前端系列教程】,微信小程序【中二少年工具箱】,csdn/掘金/知乎【中二少年学编程】","browser_action": {"default_icon": {"132": "log.ico"},"default_title": "中二少年学编程","default_popup": "index.html"},"permissions": ["storage","tabs"],"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

上面是我开发的插件配置,大部分配置,相信大家看示例就能猜到用途。这里简单讲解其中比较重要的几个:

  • manifest_version :扩展的清单版本号,一般是一个整数,按照开发其它软件的经验,这个应该会在自动升级时被获取,我的插件一般都是离线版并未上架商城,所以我对这个没有深入研究。
  • name:插件名称
  • description:对插件的描述
  • default_icon:插件的图标,这个注意路径,如果没有特殊情况,最好就放在根目录下,和index.html同级
  • default_title:插件在浏览器中显示的名称。
    在这里插入图片描述
  • permissions:插件的权限,按我上面配置,就是指插件可以操作浏览器的缓存和标签页。
  • content_security_policy:插件的安全策略,类比于普通前端项目设置在index.html页面的meta标签,这里有没有效果其实我还没有测试。

上面就是插件配置的所有内容,只要大家在自己index.html页面同级目录,放入上面的配置文件,那么就可以把我们的前端项目,变成一个插件了。

三、插件使用

以谷歌和edge浏览器为例,其它浏览器插件使用和开发,请自行探索。

edge浏览器中使用/加载插件

edge浏览器的扩展通过打开浏览器右上角的设置对话框,就可以快速找到:
在这里插入图片描述
当然,也可以直接在浏览器的地址栏输入地址:edge://extensions/在这里插入图片描述
最终打开的页面如下:
在这里插入图片描述
可以看出,上面的只显示了我们浏览器中存在的插件,但是没有添加插件的入口。这时候打开左侧开发人员模式,打开后,页面就会出现“加载插件”按钮:
在这里插入图片描述
点击加载解压缩的扩展,选择我们刚才的dist文件夹:
在这里插入图片描述
最终在扩展列表,会出现我们的插件:
在这里插入图片描述
直接在当前页面,就可以看到扩展对话框中存在我们的插件了:
在这里插入图片描述

chrome浏览器中使用/加载插件

chrome浏览器与edge浏览器的内核都是chrome内核,所以插件完全兼容,加载、使用方式也大同小异。

打开扩展程序:
在这里插入图片描述
或者在地址栏输入:chrome://extensions/
在这里插入图片描述
打开后的页面,类似于edge浏览器:

在这里插入图片描述
只要打开右上角的开发者模式,就会出现对应的加载插件按钮。

然后参考上面edge浏览器的操作,加载插件即可。


总结

大家如果需要联系博主,或者获取博主各系列文章对应的资源,可以通过私信博主来获取。

浏览器插件功能会形成一个系列,后续会有各类浏览器插件免费提供给大家使用,有定制需求的小伙伴可以私信博主,反正免费的,来薅一波羊毛吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/390797.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ | 类和对象(下)(static成员、友元、内部类、匿名对象)

目录 ​编辑 static成员 static性质简介 static属于整个类&#xff0c;属于所有对象 static成员的声明与定义 static函数 友元friend 友元特性简介 友元关系讲解 内部类 特性一 特性二 匿名对象 结语 static成员 static性质简介 static成员在类里面是非常独特的…

Golang之OpenGL(一)

使用OpenGL实现窗口中绘制三角形&#xff08;纯色|彩色&#xff09;、正方形&#xff08;变色&#xff09; 一、简单实现窗口绘制三角形二、绘制的多颜色三角形&#xff08;基于 ‘ 简单实现窗口绘制三角形 ’ &#xff09;1、在顶点着色器和片段着色器中添加了颜色的输入和输出…

反制攻击者-蚁剑低版本

目录 安装 攻击者获取防守方的权限 防守方反制攻击者 防守方获取攻击者的shell权限 安装 安装蚁剑2.0.7版本 链接&#xff1a;https://pan.baidu.com/s/1t40UxkZ2XuSWG6VCdGzvDw?pwd8888 提取码&#xff1a;8888 下载好后先打开Loader文件夹下的.exe文件&#xff0c;打…

赛蓝企业管理系统 AuthToken/Index 身份认证绕过漏洞复现

0x01 产品简介 赛蓝企业管理系统是一款为企业提供全面管理解决方案的软件系统&#xff0c;它能够帮助企业实现精细化管理&#xff0c;提高效率&#xff0c;降低成本。系统集成了多种管理功能&#xff0c;包括但不限于项目管理、财务管理、采购管理、销售管理以及报表分析等&am…

【iOS】——GCD总结

同步和异步的区别 同步执行等待操作完成&#xff0c;而异步执行允许程序在操作完成前继续运行&#xff0c;提高了效率和响应性。这里的关键就是上一个操作需不需要等待当前操作的执行&#xff0c;如果需要就是同步&#xff0c;如果不需要就是异步。 异步有开启新线程的能力但…

合作伙伴中心Partner Center中添加了Copilot预览版

目录 一、引言 二、Copilot 功能概述 2.1 Copilot 简介 2.2 Copilot 的核心功能 2.3 Copilot 的访问和使用 三、Copilot 的使用方法 3.1 Copilot 功能区域 3.2 Copilot 使用示例 3.2.1 编写有效提示 3.2.2 使用反馈循环 四、负责任的人工智能 4.1 Copilot 结果的可…

Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签

本教程主要实现【Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签】。 本文源码&#xff1a;https://gitee.com/songfayuan/go-zero-demo 教程源码分支&#xff1a;master 分支&#xff08;_examples/word-template/fill-word-template.go&…

win 10 局域网共享

1&#xff0c;打开共享 控制面板\网络和 Internet\网络和共享中心\高级共享设置 &#xff08;在控制面板界面建议使用大图片或小图标容易找到目标&#xff09; 或者直接复制红色部分&#xff0c;然后打开此电脑&#xff0c;粘贴到地址栏直接回车即可直接到达几面 打开如下2个…

达梦数据库一体机在宜昌市财政局上线了!

财政作为国家治理的基础和重要支柱&#xff0c;其数字化转型已成为构建现代财政制度的必由之路&#xff0c;引领着财政管理体系向更高效、更智能的方向迈进。 达梦数据全面助力财政信息化转型与智能化发展&#xff0c;采用 DAMEGN PAI I 系列数据库一体机&#xff0c;为宜昌市财…

Unity Camera

课程目标 1. 了解摄像机&#xff08;camera&#xff09;不同视角的设计与实现&#xff1b;2. 感受在不同摄像机视角下观察虚拟场景。 喜欢玩游戏或者看3D动漫的朋友可以回忆在虚拟场景中摄像头的运动变化带来的视觉感受&#xff0c;例如&#xff1a;摄像头给场景中的主角来个…

马来西亚原生静态IP注册的账号稳定吗?

马来西亚作为东南亚重要的经济体之一&#xff0c;其网络基础设施和互联网服务水平在近年来有了显著提升。静态IP作为一种固定的互联网协议地址&#xff0c;对于某些特定的网络应用和需求非常重要。本文将围绕马来西亚原生静态IP注册的账号稳定性进行探讨&#xff0c;分析其在不…

【Python系列】Python 字典合并

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

pytorch基础模块:Tensorboard、Dataset、Transforms、Dataloader

Tensorboard、Dataset、Transforms、Dataloader 该文档主要参考【土堆】的视频教程&#xff1a;pytorch入门教程–土堆 一、Tensorboard 安装tensorboard&#xff1a;pip install tensorboard 使用步骤&#xff1a; 引入相关库&#xff1a;from torch.utils.tensorboard i…

LinkedList接口源码解读

LinkedList 接口源码解读&#xff08;一&#xff09; 前言 因为追求质量&#xff0c;所以写的较慢。大概在接下来的三天内会把LinkedList源码解析出完。大概还有两篇文章。废话不多说&#xff0c;正片开始&#xff01; 大家都知道&#xff0c;LinkedList是在Java底层中是由 …

手机上音乐如何转换成MP3格式?分享5款音频格式转换APP

手机上音乐如何转换成MP3格式&#xff1f;相信很多外出办公或者不经常使用电脑的工作人士&#xff0c;学生党&#xff0c;媒体从业者都有这样的疑惑和需求。不同设备和应用可能支持不同的音频格式&#xff0c;导致某些情况下需要将音乐文件转换为MP3格式以确保兼容性。下面&…

操作系统|day4.Linux、Linux内核、Linux负载、Linux文件存储

文章目录 LinuxLinux内核定义功能态 Linux负载定义 Linux文件存储链接分类区别使用场景 拷贝 Linux Linux内核 定义 内核是操作系统的核心&#xff0c;具有很多最基本功能&#xff0c;它负责管理系统的进程、内存、设备驱动程序、文件和网络系统&#xff0c;决定着系统的性能…

.NET周刊【7月第4期 2024-07-28】

国内文章 .NET 高性能缓冲队列实现 BufferQueue https://mp.weixin.qq.com/s/fUhJpyPqwcmb3whuV3CDyg BufferQueue 是一个用 .NET 编写的高性能的缓冲队列实现&#xff0c;支持多线程并发操作。 项目地址&#xff1a;https://github.com/eventhorizon-cli/BufferQueue 项目…

【虚拟仿真】Unity3D中实现2DUI显示在3D物体旁边

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群:398291828大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 这篇文章来实现2DUI显示在3D物体旁边,当我们需要在3D模型旁边显示2DUI的时候,比如人物的对…

grep工具的使用

grep [options]…… pattern [file]…… 工作方式&#xff1a; grep 在一个或者多个文件中搜索字符串模板&#xff0c;如果模板中包括空格&#xff0c;需要使用引号引起来&#xff0c;模 板后的所有字符串会被看作是文件名。 工作结果&#xff1a;如果模板搜索成功&#xf…

Springboot+Vue在线水果(销售)商城管理系统-附源码与配套论文

1.1 研究背景 互联网概念的产生到如今的蓬勃发展&#xff0c;用了短短的几十年时间就风靡全球&#xff0c;使得全球各个行业都进行了互联网的改造升级&#xff0c;标志着互联网浪潮的来临。在这个新的时代&#xff0c;各行各业都充分考虑互联网是否能与本行业进行结合&#xf…