当前位置: 首页 > news >正文

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浏览器的操作,加载插件即可。


总结

大家如果需要联系博主,或者获取博主各系列文章对应的资源,可以通过中二少年学编程的个人主页来获取。

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

相关文章:

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

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、插件与普通前端项目二、开发插件——manifest.json三、插件使用edge浏览器中使用/加载插件chrome浏览器中使用/加载插件 总结 前言 chrome插件的出现&#xff0c;初衷可能是为了方便用户更好地控制浏览器&#xff0c…...

【完美解决】 TypeError: ‘str’ object does not support item assignment

【完美解决】 TypeError: ‘str’ object does not support item assignment 在Python编程中&#xff0c;遇到TypeError: str object does not support item assignment这样的错误通常意味着你试图修改字符串中的某个字符&#xff0c;但字符串是不可变类型&#xff0c;不支持这…...

Android SurfaceFlinger——渲染开始帧(四十三)

通过前面的文章我们介绍了 SurfaceFlinger 图层合成的整体流程,已经对应步骤的前五步,这里我们开始介绍帧渲染流程的第一步——开始帧。 1.更新输出设备的色彩配置文件2.更新与合成相关的状态3.计划合成帧图层4.写入合成状态5.设置颜色矩阵6.开始帧7.准备帧数据以进行显示(异…...

fastadmin搜索栏实现某字段动态下拉搜索

记录&#xff1a;fastadmin搜索栏实现某字段动态下拉搜索 方式一&#xff1a;使用selectpicker组件&#xff0c;可多选 { field: travel_agency, title:__(Travel_agency),addClass:"selectpicker", operate:"IN",data:"multiple", searchList:…...

.NET未来路在何方?

简述 在软件开发的漫长旅程中&#xff0c;将代码打包成可执行的EXE文件是一项必不可少的技能。它不仅能够保护源代码&#xff0c;还能为用户提供便捷的安装体验。但手动打包过程繁琐且容易出错&#xff0c;自动化打包成为了开发者的福音。 在软件开发的浩瀚星空中&#xff0c;.…...

Vue开发环境搭建

文章目录 引言I 安装NVM1.1 Windows系统安装NVM,实现Node.js多版本管理1.2 配置下载镜像1.3 NVM常用操作命令II VUE项目的基础配置2.1 制定不同的环境配置2.2 正式环境隐藏日志2.3 vscode常用插件引言 开发工具: node.js 、npm 开发编辑器:vscode 开发框架:VUE I 安装NVM…...

【数据结构初阶】详解:实现循环队列、用栈实现队列、用队列实现栈

文章目录 一、循环队列1、题目简述2、方法讲解2.1、了解tail的指向2.2、了解空间是如何利用的2.3、如何判断队列是否为空&#xff08;假溢出问题&#xff09;&#xff1f;2.4、实现代码 二、用栈实现队列1、题目简述2、方法讲解2.1、讲解2.2、实现代码 三、用队列实现栈1、题目…...

【Hot100】LeetCode—31. 下一个排列

目录 题目1- 思路2- 实现⭐31. 下一个排列——题解思路 3- ACM 实现 题目 原题连接&#xff1a;31. 下一个排列 1- 思路 技巧题&#xff0c;分为以下几个步骤 ① 寻找拐点&#xff1a; i 1 &#xff1a;出现 nums[i1] > nums[i] &#xff0c;则 i 1 就是拐点 从右向左遍…...

找到学习的引擎,更让你进入心流状态的高效学习

一、心流状态的启动秘籍 1. 简单开始&#xff1a;找到学习的入口 从简单的任务开始&#xff0c;比如整理学习空间或列出学习计划&#xff0c;让大脑逐渐适应学习的节奏。 2. 环境塑造&#xff1a;打造专注的学习空间 清理桌面&#xff0c;减少干扰&#xff0c;比如将手机置…...

QItemDelegate QItemDelegate QItemDelegate

qtreeview点击某一行有颜色显示 c 在Qt中&#xff0c;要实现QTreeView点击某行有颜色显示&#xff0c;可以通过设置QTreeView的itemDelegate来自定义显示样式。以下是一个简单的例子&#xff0c;演示如何为QTreeView的项设置点击时的背景颜色。 #include <QApplication>…...

MySQL数据库 外键默认约束和action 基础知识【2】推荐

数据库就是储存和管理数据的仓库&#xff0c;对数据进行增删改查操作&#xff0c;其本质是一个软件。MySQL就是一种开源的关系型数库&#xff0c;也是最受欢迎的数据库之一&#xff0c;今天对MySQL数据的基础知识做了整理&#xff0c;方便自己查看&#xff0c;也欢迎正在学习My…...

JS正则表达式学习与实践

JS正则表达式学习笔记 1 学习笔记1.1 字符类1.2 量词和分支1.3 标志1.4 锚点1.5 断言 2 常用正则2.1 检查微信浏览器2.2 检查移动端浏览器2.3 检查中文字符2.4 手机号严格2.5 手机号比较宽松2.6 手机号宽松2.7 邮箱验证2.8 金额格式2.9 身份证号2.10 至少8为有数字、大小写字符…...

Java数据结构(五)——栈和队列

文章目录 栈和队列栈基本概念栈的模拟实现集合框架中的栈栈的创建栈的方法栈的遍历 栈的应用及相关练习括号匹配逆波兰表达式求值出栈入栈次序匹配最小栈 几个含"栈"概念的区分 队列基本概念队列的模拟实现循环队列双端队列集合框架中的队列队列的创建队列的方法队列…...

工具使用:nrm使用以及n模块

nrm nrm 是一个npm&#xff08;Node Package Manager&#xff09;的源管理器&#xff0c;它允许用户轻松地在不同的npm源之间进行切换。在Node.js的生态系统中&#xff0c;nrm 提供了一种方便的方式来管理registry源&#xff0c;这对于那些需要从不同的npm源下载或发布包的开发…...

匿名管道+进程池+命名管道

mkfifo name_pipe 创建管道文件。 命名管道&#xff1a; 路径文件名具有唯一性。 匿名管道&#xff1a; 进程池代码&#xff1a; #include<iostream> #include<unistd.h> #include<cstdlib> #include<cassert> #include<vector> #include&…...

【深度学习】【语音TTS】OpenVoice: Versatile Instant Voice Cloning,论文

https://github.com/myshell-ai/OpenVoice https://arxiv.org/abs/2312.01479 文章目录 摘要1 引言2 方法2.1 直观思路2.2 模型结构2.3 训练细节3 结果4 结论摘要 我们介绍了OpenVoice,一种多功能的即时语音克隆方法,只需参考说话者的短音频片段即可复制其声音,并生成多语…...

一六零、云服务器开发机配置zsh

切换shell 在Linux中默认使用/bin/bash&#xff0c;在用户创建时&#xff0c;会自动给用户创建用户默认的shell。默认的shell就是/bin/bash。要修改shell将其设置为/bin/ksh&#xff0c;有两种方法方法 # 方法一: chsh -s /bin/ksh chsh -s /bin/zsh # 方法二: usermod -s /b…...

[ZJCTF 2019]NiZhuanSiWei1

打开题目 php代码审计 .从代码中可以看出要求&#xff0c;以get方式传递text,file,password三个参数。 3.第一层验证if(isset($text)&&(file_get_contents($text,r)"welcome to the zjctf")) 传入text&#xff0c;而且file_get_contents($text,r)之后内容…...

【网络安全】副业兼职日入12k,网安人不接私活就太可惜了!

暑假来了&#xff0c;很多同学后台私信我求做兼职的路子&#xff0c;这里&#xff0c;我整理了一份详细攻略&#xff0c;请大家务必查收&#xff0c;这可能会帮你把几个学期的生活费都赚够&#xff01; Up刚工作就开始做挖漏洞兼职&#xff0c;最高一次赚了12k&#xff0c;后面…...

[STM32]HAL库实现自己的BootLoader-BootLoader与OTA-STM32CUBEMX

目录 一、前言 二、BootLoader 三、BootLoader的实现 四、APP程序 五、效果展示 六、拓展 一、前言 听到BootLoader大家一定很熟悉&#xff0c;在很多常见的系统中都会存在BootLoader。本文将介绍BootLoader的含义和简易实现&#xff0c;建议大家学习前掌握些原理基础。 …...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试,但是对于熟悉Java语言的开发或是测试人员,可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录,里面…...