开发Chrome扩展插件

news2024/10/5 18:28:18

1.首先开发谷歌chrome扩展插件,没有严格的项目结构目录,但是需要保证里面有一个mainfest.json文件 (必不可少的文件)。在这个文件里有三个属性必不可少:name、version、mainfest_version;

    // 清单文件的版本,这个必须写,而且必须是2 也可以是3 不一定必须是2
	"manifest_version": 2,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",

2.页面结构目录

3.具体配置

3-1  manifest.json

4.具体如何在chrome配置

4-1 谷歌游览器点击右上方竖向...,进入到扩展程序配置页

4-2 Edge游览器点击右上方横向...,进入到扩展程序配置页

4-3 点击 加载已解压的扩展程序 可能选取文件夹时,明明里面是有文件的,但是选的时候里面是没有的,是正常的,就这样选就可以了

4-4 插件图标显示问题

4-4-1 第一个红框框 点一下 就会在导航哪里显示出来这个插件

4-4-2 第二个红框框 点击会出来一些配置 选中'检查弹出窗口' 会出现你再插件控制台打印的一些日志

4-4-3 每次更改完文件 需要在扩展程序页面点击重新加载 再点击检查弹出窗口 保持实时更新(图一、图二刷新按钮后的开关,再第一次加载完插件要保持为开启状态)

图一为Edge游览器

图二为谷歌游览器

5.具体插件功能根据实际需求在app.js或者content.js或者backgound.js写就可以了。

6.不管是在哪个js里写 再manifest.json中"content_scripts"引入即可,多个逗号隔开就行了

    // 需要直接注入页面的JS
    "content_scripts": [  
        {
          // 多个JS按顺序注入
          "matches": ["<all_urls>"],
          // 多个JS按顺序注入
          "js": ["app.js","content.js"]
        }
    ],

7.如果有啥疑问可以私信作者,写的有点仓促,欢迎大家补充。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

消息队列-Kafka-消费方如何分区与分区重平衡

消费分区 资料来源于网络 消费者订阅的入口&#xff1a;KafkaConsumer#subscribe 消费者消费的入口&#xff1a;KafkaConsumer#poll 处理流程&#xff1a; 对元数据重平衡处理&#xff1a;KafkaConsumer#updateAssignmentMetadataIfNeeded 协调器的拉取处理&#xff1a;onsum…

java常用排序算法——冒泡排序,选择排序概述

前言&#xff1a; 开始接触算法了&#xff0c;记录下心得。打好基础&#xff0c;daydayup! 算法 算法是指解决某个实际问题的过程和方法 排序算法 排序算法指给混乱数组排序的算法。常见的有&#xff1a;冒泡排序&#xff0c;选择排序 冒泡排序&#xff1a; 冒泡排序指在数组…

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…

SpringCloud-SpringBoot读取Nacos上的配置文件

在 Spring Boot 应用程序中&#xff0c;可以使用 Spring Cloud Nacos 来实现从 Nacos 服务注册中心和配置中心读取配置信息。以下是如何在 Spring Boot 中读取 Nacos 上的配置文件的步骤&#xff1a; 1. 引入依赖 首先&#xff0c;在 Spring Boot 项目的 pom.xml 文件中添加 …

JAVA虚拟机实战篇之内存调优[3](诊断问题:MAT工具分析堆内存快照)

文章目录 版权声明解决内存溢出的思路诊断 – 内存快照 MAT内存泄漏检测原理基础知识支配树深堆和浅堆string案例分析 MAT内存泄漏检测原理 导出运行中系统内存快照分析超大堆的内存快照 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&am…

回溯算法题解(难度由小到大)(力扣,洛谷)

目录 注意&#xff1a; P1157 组合的输出&#xff08;洛谷&#xff09;https://www.luogu.com.cn/problem/P1157int result[10000] { 0 }; 216. 组合总和 IIIhttps://leetcode.cn/problems/combination-sum-iii/ 17. 电话号码的字母组合https://leetcode.cn/problems/lett…

YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information

paper: https://arxiv.org/abs/2402.13616 code YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 一、引言部分二、问题分析2.1 信息瓶颈原理2.2 可逆函数 三、本文方法3.1 可编程梯度信息 四、实验4.1消融实验部分 今天的深度学习方法关注的…

ELK介绍使用

文章目录 一、ELK介绍二、Elasticsearch1. ElasticSearch简介&#xff1a;2. Elasticsearch核心概念3. Elasticsearch安装4. Elasticsearch基本操作1. 字段类型介绍2. 索引3. 映射4. 文档 5. Elasticsearch 复杂查询 三、LogStash1. LogStash简介2. LogStash安装 四、kibana1. …

hv静态资源web服务

在实际工作中&#xff0c;为了保证App的高可用性&#xff0c;服务端需要缓存一部分静态资源&#xff0c;通过web服务来分发资源。hv即可快速实现web服务。 hv静态资源服务。 HttpService router; router.Static("/statics", "smart-yi-ui");目录结构(sma…

kafka 可视化工具

kafka可视化工具 随着科技发展&#xff0c;中间件也百花齐放。平时我们用的redis&#xff0c;我就会通过redisInsight-v2 来查询数据&#xff0c;mysql就会使用goland-ide插件来查询&#xff0c;都挺方便。但是kafka可视化工具就找了半天&#xff0c;最后还是觉得redpandadata…

javaSE-----继承和多态

目录 一.初识继承&#xff1a; 1.1什么是继承&#xff0c;为什么需要继承&#xff1a; 1.2继承的概念与语法&#xff1a; 二.成员的访问&#xff1a; 2.1super关键字 2.2this和super的区别&#xff1a; 三.再谈初始化: 小结&#xff1a; 四.初识多态&#xff1a; 4.1多…

Java Web开发---复试Tips复习

***********&#xff08;自用&#xff0c;摘录自各种文章和自己总结&#xff09;********** 小知识点理解 Web Web应用开发主要是基于浏览器的应用程序开发。一个Web应用由多部分组成 java web就是用java语言开发出可在万维网上浏览的程序 Web应用程序编写完后&#xff0c;…

【自然语言处理六-最重要的模型-transformer-上】

自然语言处理六-最重要的模型-transformer-上 什么是transformer模型transformer 模型在自然语言处理领域的应用transformer 架构encoderinput处理部分&#xff08;词嵌入和postional encoding&#xff09;attention部分addNorm Feedforward & add && NormFeedforw…

在哪里能找到抖音短视频素材?推荐热门的抖音短视频素材下载资源

哎呦喂&#xff0c;小伙伴们&#xff0c;是不是在短视频的大海里划船&#xff0c;想找到那颗能让你起飞的珍珠&#xff0c;但又觉得素材难寻如针海捞针&#xff1f;别急&#xff0c;今天我就来给你们送上几个超实用的宝藏素材网站&#xff0c;让你的短视频创作不再愁素材 1&am…

从零开始的LeetCode刷题日记:142.环形链表II

一.相关链接 视频链接&#xff1a;代码随想录&#xff1a;142.环形链表II 题目链接&#xff1a;142.环形链表II 二.心得体会 这道题是一道链表题&#xff0c;但他没有对头结点的操作&#xff0c;所以不用虚拟头结点。这道题要分两步进行&#xff0c;第一步是判断链表有没有环…

如何获取国外信用卡?需要国外银行卡支付怎么解决?如何订阅国外产品?

当国内的用户想要使用国外的产品时&#xff0c;很多产品是需要订阅付费的。其中有些产品还没有引入国内&#xff0c;只能用国外的信用卡支付&#xff0c;对于在国内的朋友&#xff0c;如何获取一张国外的信用卡呢&#xff1f; 这里推荐一个平台&#xff1a;wildCard waildCard…

基于Java的生活废品回收系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨在鼓…

安泰ATA-4014高压功率放大器的特点有哪些呢

高压功率放大器是一种用于放大高压和高功率信号的电子设备&#xff0c;具有特殊的性能和特点。下面安泰电子将详细介绍高压功率放大器的特点和应用。 高压功率放大器具有较高的输出电压和功率能力。相比于普通的放大器&#xff0c;高压功率放大器可以提供更高的输出电压和功率&…

Day16:信息打点-语言框架开发组件FastJsonShiroLog4jSpringBoot等

目录 前置知识 指纹识别-本地工具-GotoScan&#xff08;CMSEEK&#xff09; Python-开发框架-Django&Flask PHP-开发框架-ThinkPHP&Laravel&Yii Java-框架组件-Fastjson&Shiro&Solr&Spring 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/…

Decontam去污染:一个尝试

为了程序运行的便利性&#xff0c;不想将Decontam放到windows的Rstudio里面运行&#xff0c;需要直接在Ubuntu中运行&#xff0c;并且为了在Decontam时进行其他操作&#xff0c;使用python去运行R 首先你需要有一个conda环境&#xff0c;安装了R&#xff0c;Decontam&#xff0…