如何自己开发浏览器js插件

news2024/9/23 17:15:58

大家都知道在网页控制台编写的js脚本一刷新就没了下面教程教大家如何自己写一个js插件,此教程是小白在网上看到的的确认有效才发出来的,无需借助油猴。

最近工作需要小白研究了一下浏览器插件编写的过程下面分享给大家

步骤
在桌面创建一个文件夹,命名demo
在demo文件夹下创建一个文件夹,命名content
然后再content文件夹下创建一个js文件夹和一个manifest.json文件。
最后在js文件夹下创建一个index.js文件,最终目录格式如下

展示
举例在任意页面中打开网页能看到自己写的js代码生成结果

manifest.json文件配置插件适用的网页,也就是指定域名。

{
    "manifest_version": 2,
    "name": "弹窗",
    "version": "1.0",
    "description": "小白开发的一个插件",
    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["js/index.js"]
        }
    ]
}

matches:指定插件在哪些域名下生效。(此处*代表任意名称,就是所有网页都会生效)
js:引入index.js

1.在index.js 控制台打印日志并且三秒后有弹窗

console.log("成功加载自己开发的插件")
setTimeout(function(){
    alert("三秒后")
},3000)

2. 安装插件

一.打开谷歌浏览器,找到更多工具->扩展程序

二.点击“打包扩展程序”按钮

三.选择content文件夹,点击打包开始

注意!!打包好后在demo文件夹下生成两个文件。如果需要重新打包,则需要先删除这两个文件。

最后,安装打包的插件
选择“加载已解压的扩展程序”

选择content文件夹,插件就安装成功了。

验证
打开百度首页可看到弹窗内容了

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

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

相关文章

指针与数组---指针与一维数组的关系

C语言的高效得益于它指针功能的强大。然而C语言中的指针和数组的关系似乎很“纠结”,让人爱恨交织。指向数组的指针变量、指针数组等,似乎总是“你中有我,我中有你”。 目录 一、数组名的特殊意义及其在访问数组元素中的作用 二、指针运算…

Linux常用指令和知识(1)

目录 ls cd pwd 相对路径&绝对路径&特殊路径符 mkdir touch-cat-more cp-mv-rm which-find grep-wc 管道符 | echo 重定向符 tail 😶‍🌫️😘创作不易, 多多支持 前言: 我们学习的Linux命令, 其实他们的本体就是一个个…

ctf 逆向 专题题解

本文的目标是,记录一些不具备通用性的,或者比较进阶的题目。之前的另一篇文章则用于记录一些基础知识和通用性较强的基本手法。 文章目录 跨科题目buu fungame:reverse与pwn的结合reverseweb 反跟踪Easyhook:hook例题 vm类型总结一…

我的创作纪念日——512

机缘 没想到不知不觉在CSDN创作就512天了,想到一开始就仅仅想在CSDN记笔记,到现在成为一个小博主,认识到了很多志同道合的伙伴,中间创作我也曾经懒惰过,放弃过,但我一次又一次重新进行创作,虽然…

AcWing801: 二进制中1的个数(两种方法详解)

原题引出 方法一:使用lowbit 算法的时间复杂度为 O ( n l o g n ) O(nlogn) O(nlogn),使用lowbit操作,每次操作截取一个数字的最后一个1后面的所有位,每次减去lowbit得到的数字,直到数字减到0,就得到了最终…

【MySQL】选择专题(七)

文章目录 选择题选择题 在关系R ( R # , RN , S # )和S ( S # , SN , SD )中, R 的主码是R # , S 的主码是S #,则S#在R 中称为( A )。 A 外码 B 候选码 C 主码 D 超码 设关系R和S的属性个数分别为2和3,那么等价于( B )。 A. σ1<2(RS) B. σ1<4(RS) C. σ1<2(R…

我们世界中的计算机——从大师视角诠释计算常识

计算机和通信系统&#xff0c;以及由它们所实现的许多事物遍布我们周围。其中一些在日常生活中随处可见&#xff0c;比如笔记本电脑、手机和互联网。今天&#xff0c;在任何公共场所&#xff0c;都会看到许多人在使用手机查询交通路线、购物以及和朋友聊天。与此同时&#xff0…

【大数据】大数据相关概念

文章目录 大数据&#xff1a;一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合&#xff0c;具有海量的数据规模、快速的数据流转、多样的数据类型以及价值密度四大特征。Hadoop&#xff1a;是一个能够对大量数据进行分布式处理的软件框…

15-3.自定义组件的生命周期函数

目录 1 组件自身的生命周期函数 1.1 使用lifetimes声明生命周期函数 1.2 不使用lifetimes声明生命周期函数 2 组件所在页面的生命周期函数 1 组件自身的生命周期函数 created 组件实例刚刚被创建后执行&#xff0c;可以理解为 html模板刚刚搞好attached 组件被放入节…

万物的算法日记|第六天

笔者自述&#xff1a; 一直有一个声音也一直能听到身边的大佬经常说&#xff0c;要把算法学习搞好&#xff0c;一定要重视平时的算法学习&#xff0c;虽然每天也在学算法&#xff0c;但是感觉自己一直在假装努力表面功夫骗了自己&#xff0c;没有规划好自己的算法学习和总结&am…

DJ4-2 数据报网络和虚电路网络

目录 一、连接和无连接服务 二、数据报网络 1、数据报网络的转发表 2、数据报网络的特点 三、虚电路网络 (Virtual Circuits)* 1、虚电路网络的工作方式 2、虚电路网络的特点 一、连接和无连接服务 任何网络中的网络层只会提供两种服务之一&#xff0c;不会同时提供 数…

Mysql数据库之事务(山高水远,他日江湖再见)

文章目录 一、事务的概念二、事务的ACID特点1.原子性&#xff08;Atomicity&#xff09;2.一致性&#xff08;Consistency&#xff09;3.隔离性&#xff08;lsolation&#xff09;4.持久性&#xff08;Durability) 三、并发访问表的一致性问题和事务的隔离级别1.并发访问表的一…

融合模型stacking14条经验总结和5个成功案例(互联网最全,硬核收藏)_机器学习_人工智能_模型竞赛_论文参考

我看了很多关于融合模型stacking文章&#xff0c;很多作者倾向于赞美融合模型stacking&#xff0c;对其缺点轻描淡写&#xff0c;这容易误导初学者。一叶障目就是这意思。 我的很多学员喜欢用融合模型作为论文或专利创新点&#xff0c;这是一个热门技术。 最近有个同学在论文…

设计模式之单例模式笔记

设计模式之单例模式笔记 说明Singleton(单例)目录单例模式之饿汉式-静态成员变量写法测试类 单例模式之饿汉式-静态代码块写法测试类 单例模式之懒汉式-线程不安全写法和线程安全写法测试类 单例模式之懒汉式-双重检查锁方式(推荐使用的方式)单例模式之懒汉式-静态内部类方式(推…

Mysql数据库之存储引擎(羡慕她人,不如提升自己)

一、存储引擎概念 MySQL中的数据用各种不同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎。 存储引擎是MySQL将数据存储在文件系统中的存储方…

ELK日志收集系统简述

一、概述 &#xff08;一&#xff09;ELK由三个组件构成 ELK是三个开源软件的缩写&#xff0c;分别是Elasticsearch、Logstash、Kibana ELK 架构基本组成 &#xff08;二&#xff09;作用 1、日志收集 2、日志分析 3、日志可视化 &#xff08;三&#xff09;为什么使用EL…

计网之应用层

因特网协议概述 常用协议应用层HTTP&#xff08;超文本传输协议&#xff09;、FTP&#xff08;文件传输协议&#xff09;、SMTP&#xff08;简单邮件传输协议&#xff09;、DNS&#xff08;域名系统&#xff09;、DHCP&#xff08;动态主机配置协议&#xff09;、SNMP&#xff…

15-6.自定义组件的代码共享

在微信小程序中使用 behaviors 进行代码共享&#xff0c;功能类似于vue的mixins 每个behavior可以包含一组属性、数据、生命周期函数和方法 每个组件可以引用多个behavior&#xff0c;behavior也可以引用其他的behavior 目录 1 创建behavior 2 使用behavior 3 behavio…

机器学习融合模型stacking14条经验总结和5个成功案例(互联网最全,硬核收藏)

我看了很多关于融合模型stacking文章&#xff0c;很多作者倾向于赞美融合模型stacking&#xff0c;对其缺点轻描淡写&#xff0c;这容易误导初学者。一叶障目就是这意思。 我的很多学员喜欢用融合模型作为论文或专利创新点&#xff0c;这是一个热门技术。 最近有个同学在论文…

MySQL:七种 SQL JOINS 的实现(图文详解)

MySQL&#xff1a;7种SQL JOINS的实现 前言一、图示表示二、代码举例1、INNER JOIN&#xff08;内连接&#xff09;2、LEFT JOIN&#xff08;左连接&#xff09;3、RIGHT JOIN&#xff08;右连接&#xff09;4、OUTER JOIN&#xff08;全连接&#xff09;5、LEFT EXCLUDING JOI…