Google Chrome开发插件,在特定网页执行js脚本

杂记(3)chrome扩展程序开发之在目标页面执行JS脚本 一、背景说明在杂记(2)中,我们写了JS脚本在chrome浏览器的开发者模式console页面执行,用于抢bus票,但这个脚本有个弊端是当页面刷新后,脚本会自动清除,无法再执行,如何解决呢?我们可以开发一个chrome插件,启动这个插件,当chrome浏览器一打开目标页面就去执行脚本。二、插件开发1、json文件然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是manifest.jso... 阅读详情

Google Chrome开发插件,在特定网页执行js脚本

当想在某些网页网页之中执行自己写的js脚本文件,而又无法直接嵌入别人的源码之中怎么办?可以利用Chrome的插件功能,自己开发配置一款插件,使其浏览器每次打开特定页面时,执行特定的js脚本。具体步骤如下:
1.创建一个新的文件夹
在这里插入图片描述
2.在文件夹中创建配置文件,名称固定为:manifest.json
可以利用记事本创建,后缀名改为.json,文件内容如下:
在这里插入图片描述
{
“name”: “punchtheclock”,
“manifest_version”: 2,
“version”: “1.0”,
“description”: “punchtheclock”,
“browser_action”: {
“default_icon”: “m.jpg”
},
“permissions”: [
“tabs”, “http:///”,“https:///”
],
“content_scripts”: [
{
“matches”: [“http://login.cuit.edu.cn/Login/xLogin/Login.asp”],
“js”: [“punchtheclock.js”]
}
]
}

字段解释:
manifes_version:声明是我们使用的版本。

name和description:分别代表我们插件的名称和描述,version则是插件本身的版本号,这些是用来向用户展示所安装的插件的相关信息。

permissions:是插件使用的权限,tabs允许使用chrome.tabs和chrome.windows的api,后面则是匹配模式,指可以和该模式的网站运行的代码进行交互。

Content scripts:是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。其中js指的是要注入的脚本,marches定义了在哪些页面注入Content scripts。

3.在该文件夹下创建好对应的资源文件:这里是需要执行的脚本文件:punchtheclock.js和m.jpg
在这里插入图片描述
4.打开Chrome浏览器扩展程序面板,选择开发者模式,点击:加载已解压扩展程序,选择创建的文件夹,确定,至此扩展程序就创建好了,当打开对应网页时就会执行自己写的这个js文件
在这里插入图片描述

Chrome插件开发入门与Manifest V3实战指南 浏览器扩展开发是Web技术的重要应用领域,通过Chrome插件可以扩展浏览器功能或修改网页行为。其核心技术原理基于浏览器提供的扩展API体系,包括内容脚本注入、后台服务运行和安全的跨域通信机制。Manifest V3作为最新规范,引入了Service Worker替代传统后台页面,强化了安全限制,开发者需要掌握其配置要点。在工程实践中,合理设计插件架构、优化性能表现、确保跨版本兼容是关键挑战。本文以Chrome插件开发为例,详细解析Manifest V3配置、内容脚本注入等核心技术,并演示如何开发网页内容分 阅读详情

相关推荐

Chrome插件开发实战指南:从入门到发布

Chrome插件开发是基于Web技术栈(HTML、CSS、JavaScript)构建浏览器扩展的实践领域。其核心原理是通过Chrome提供的API与浏览器深度集成,实现功能扩展。在技术价值上,插件开发既能解决特定场景的定制化需求(如数据提取、页面增强),又能作为Web技术工程化的实践案例。随着Manifest V3规范的强制实施,开发者需要掌握Service Worker、声明式网络请求等新技术点。典型的应用场景包括自动化工具、生产力增强、数据分析等。本文通过Vite构建工具配置、Manifest V3详解

cihongmo6452的博客 397

chrome V3插件入门到放弃,Plasmo不完全使用指南

本文介绍了Plasmo这个工具,可以用来适应各种的技术框架,让你快速上手插件开发。同时也说了一下chrome插件升级到V3需要注意的内容和分享了一些快速入门的优秀文章和文档

Jioho的博客 1万+

Chrome插件开发深度解析:从Manifest V3到实战通信与性能优化

浏览器扩展开发是现代Web技术栈中的重要组成部分,它允许开发者突破网页沙箱限制,与浏览器底层API深度交互,实现自动化、功能增强与个性化定制。其核心原理基于模块化架构与安全沙箱,通过清单文件定义权限与组件,利用内容脚本、后台脚本及UI页面等独立但可通信的部件协同工作。这项技术的核心价值在于极大地提升了用户在浏览器环境中的工作效率与体验,广泛应用于广告拦截、数据抓取、开发工具、AI助手集成等场景。随着Manifest V3的普及,开发范式转向更安全、高性能的事件驱动模型,Service Worker替代了常驻

weixin_30897079的博客 429

如何在 Chrome 中执行 JavaScript 代码

你虽然知道怎么用 Chrome 上网,但你知道怎么用 Chrome 执行 JavaScript 代码么?

村雨遥 9019

Chrome Gemini增强插件:绕过官方限制的网页端AI协作者

Gemini作为Google推出的先进大语言模型,其网页端能力受限于域名白名单、上下文隔离与交互单一等结构性约束,导致在GitHub、MDN、Stack Overflow等高频开发场景中无法调用。本文聚焦浏览器扩展技术,解析如何通过Content Script环境感知、结构化上下文模板与合规API代理,将Gemini深度嵌入真实工作流——不依赖账号灰度、不突破OAuth沙箱、不上传网页内容,实现所见即所得的智能分析。核心价值在于补全AI能力与开发者阅读、调试、评审等行为之间的‘最后一公里’,适用于技术文档理

weixin_30697239的博客 399

安卓手机安装Chrome插件与油猴脚本:基于Yandex浏览器的完整方案

浏览器扩展(如油猴Tampermonkey)通过注入JavaScript脚本,能够深度定制网页功能、拦截广告与自动填充,极大提升了浏览效率与个性化体验。其技术原理在于利用浏览器提供的扩展API,在页面加载时或运行时修改DOM与网络请求。在移动端,尤其是安卓系统上,由于官方Chrome for Android未开放完整扩展支持,这一能力长期缺失。通过选用基于Chromium且保留扩展支持的第三方浏览器(如Yandex Browser),用户可以在移动设备上安全、便捷地访问Chrome网上应用店,直接安装和管理

weixin_33910759的博客 366

chrome浏览器网页通过插件形式,自动调用js脚本

chrome浏览器编写自定义插件 新建一个manifest.json文件,写入以下内容: { "name": "Hello Extensions", "description" : "Hello world Extension", "version": "1.0", "manifest_version": 5, "content_scripts": [ ...

qq_41368391的博客 1万+

Chrome 自动执行 JS 脚本 | Tampermonkey 插件

进入网站后,想要自动执行某些JS脚本,那么你需要 Tampermonkey 插件!

甘蓝的专栏 3405

开发google浏览器chrome的JS插件

这篇文章,实际上是回答我的上篇博文之《WEB攻击技巧之网页脚本攻击》所留下的问题,见网址:http://my.oschina.net/hetiangui/blog/135462 本篇博文测试网址,就是上篇博文中的网址: http://58.22.105.164:7002/jdha-client/flowassistant/3.jsp 做测验,目标是编写一个JS插件,并安装在chr

rrr4578的专栏 4153

uniapp+uniCloud实现微信小程序一键登录

(用户唯一标识),用户登录成功后,开发者服务器可以将openid和session_key保存,生成一个自定义登录态的token令牌响应给微信小程序,通过token可以查询openid和session_key,小程序下次请求只要携带着token就可以证明已经登录。这个API就是获取用户信息,每次请求都会弹出授权窗口(这个可能会不弹,这个要看你的版本,根据版本来定,不懂的可以留下评论),用户同意后会返回。到这里就可以实现微信一键登录了,快去试试吧,有问题可以在评论区留言,我看见会尽我知道的为你解答。

lb2917的博客 2577

从零开始:小鼠Bulk RNA-seq全流程实战指南

本文提供了一份详尽的小鼠Bulk RNA-seq全流程实战指南,涵盖从软件环境搭建、原始数据质控与清洗、序列比对、基因定量到下游差异表达分析与功能富集。内容面向生物信息学新手,通过清晰的代码示例和步骤解析,帮助读者系统掌握Bulk RNA-seq数据分析的核心技能,并产出可靠的生物学洞见。

lake5的博客 719

chrome启用插件_如何在Google Chrome中启用JavaScript?

chrome启用插件JavaScript is a de facto scripting language for web programming. JavaScript is used to create actions, validation, animation, and communication for web pages and web applications. JavaScript...

cunjiu9486的博客 1747

TransUnet官方代码训练自己数据集(彩色RGB3通道图像的分割)

官方代码:https://github.com/Beckschen/TransUNet 目的:训练5个类别的汽车部件分割任务(测试在另一篇博客中) 实现效果: 1. github下载代码,并解压。 项目里的文件可能跟你下载的不一样,不急后面会讲到! 2. 配置数据集(尽最大努力还原官方数据集的格式)。 通常自己手上的数据集分images和labels文件夹,分别存放着原始图像和对应的mask图像,如下图所示; mask图像中的像素有0,1,2,3,4 分别代表背景,车身,轮子,车灯,窗户,一共五个

qq_37652891的博客 5万+

在Chrome插件中访问原始网页中的变量

转自:http://www.keakon.net/2011/11/02/%E5%9C%A8Chrome%E6%8F%92%E4%BB%B6%E4%B8%AD%E8%AE%BF%E9%97%AE%E5%8E%9F%E5%A7%8B%E7%BD%91%E9%A1%B5%E4%B8%AD%E7%9A%84%E5%8F%98%E9%87%8F 今天凌晨在写Reader Sharer插件时遇到个问题。

Freewind的专栏 8658

Ansys Zemax | 公差分析中的补偿器优化:如何提升系统良率?

本文深入探讨了在Ansys Zemax公差分析中如何有效设置与优化补偿器以提升系统良率。文章指出,补偿器是连接理想设计与现实生产的关键,通过模拟实际装配中的调整(如后焦距),能显著改善公差分析的“悲观”预测。详细介绍了补偿器的添加方法、多补偿器策略、评价函数设计以及通过灵敏度分析和蒙特卡洛档案优化补偿效果,旨在帮助光学工程师制定更符合生产实际的公差策略,从而有效提升产品良率。

weixin_28419039的博客 621

【红外技术】DDE算法:HE在红外图像可视化上的应用(附源码)

并且数据一般是以 8 的整数倍的位宽在电子系统中应用,因此大多数的显示器的显示位宽为 8bit,共 256 个灰阶。为了使红外图像可视化,因此需要一种“数据压缩”技术,还需要既可能的不丢失原始图像信息。HE后的图像直方图分布比较均匀离散,图像对比度好。但是HE算法只是适用某些图像,它是将灰度集中区域进行拉伸得到,也会放大该集中区域的噪声,它是一种“不公平”的映射。以下是红外细节增强算法的演示,很明显右边的图像,展现了更多的图像细节,对于小目标的观测非常友好。文章已于2019-12-02修改。

sunwindl91181的博客 911

强推 20 款实用的 Chrome 插件

沉浸式网页双语翻译扩展,支持PDF翻译,双语Epub电子书制作,Youtube/Netflix/Udemy 等平台双语字幕,支持Deepl/Google等多个翻译服务,免费使用。Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台,定位 Postman + Swagger + Mock + JMeter。捕捉、标注、缩放、模糊、编辑视频等功能 - 无需登录,保护隐私。JSON自动格式化、手动格式化,支持排序、解码、下载等,更多功能可在配置页按需安装!

guoqkmiss的博客 7707

对MixPad精灵(触屏语音开关)进行解剖分析

概述 最近有点忙,已经很久没有更新文章了,对不起各位网友啦~ 这次对ORVIBO的新产品:MixPad精灵款的来个剖析,希望对大家有所帮助! 首先,我买了一台对应的设备,直接去官网采购,价格吗还算OK,400多的价格。 拆箱的过程我就不写了,简单的上个图就行了。 一、拆包: 主屏板包装盒(顶部): 主屏板包装盒(底部): 后盖电源部分无内容,我就不拍了,给优快云空间省点存储位置。 二、设备剖析开始 接下来,我们开始对设备进行剖析,步骤如下: 1、拆掉主屏板后盖板,...

LeeKwen的专栏 3947

chrome extensions开发

Chrome插件开发是一个非常有趣和富有挑战性的领域。它允许开发者在浏览器中创建各种增强功能和实用工具,以及改善用户体验和提高生产力

ZHAO______的博客 2389

Apollo Planning决策规划算法代码详细解析 (2):Scenario执行

上一章节讲Scenario的决策逻辑,当确认当前Scenario后,本章节继续深入讲解在代码中,Scenario的执行过程。Scenario的Process()函数根据配置文件顺序执行stage,并判断目前处于哪个stage。当确认好stage后调用该stage对应的Process()函数,来进行具体的规划任务。 码字不易,喜欢的朋友们麻烦点个关注与赞。 在本文你将学到下面这些内容: Scenario的Process()函数的作用于调用方式; Scenario对象的初始化方法; 如何给每个Scen

自动驾驶Player的博客 5609

保姆级教程:一步步创建 ABAP Text Table

有朋友反馈,问有没有一个自己动手创建 Text Table 的例子,因为自己没有动手实践过,总觉得心里不踏实。这个行为的语义是,ZAI_TYPE_T 这张表的 AI_TYPE 字段值,不能随便维护,必须是表。然后另一个需要添加的字段是 AI_TYPE 这个字段值对应的文本值,本例笔者采用 SAP 标准的。也是自己创建的,很简单的一个 Data Element,类型为 CHAR,长度为 2.依次给主表的 01,02,03 三个字段值维护对应的描述信息,最后效果如下。按照下面的字段结构,创建另一。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 4278

Chrome自动运行Js去广告,利用插件网页自动运行Js脚本,油猴去广告教程【去处指定部位的广告】

目的页面:https://m.dmzj.com/view/33353/61162.html 可以看到由这两个网页元素组成了网页广告,一个灰度div,一个倒计时且禁止滑动的div,我们需要做的就是用Chrome里的Console来运行Js,去处这两个div。 我百度了一下去处DIV的JS代码,找到了两种去处元素的方法。第一种是直接通过ID删除元素,第二种是如果元素没有ID,找到他特有的类...

CaliXz的博客 1万+

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

从零写一个基于油猴脚本的 Google 辅助插件(文末附完整代码)

大家好,我是松柏!不知道大家平时开发的时候喜不喜欢用快捷键呢?我本人是一个重度快捷键用户,在使用 Google 的时候发现,只能点击而不能通过快捷键选中搜索结果。比如这里我想看第二个搜索结果,那只能通过点击的方式,于是我就在想能不能通过一个简单的脚本给这些搜索结果绑定上快捷键呢?

weixin_52258854的博客 1438

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

你了解Chrome插件?

Chrome插件,也被称为Chrome扩展,是专为Google Chrome浏览器设计的小型软件程序。这些插件利用HTML、CSS和JavaScript等Web技术进行开发,在独立的沙盒环境中运行,并与Chrome浏览器进行安全交互。总之,学习Chrome插件开发不仅可以提升用户的浏览体验,还为开发者提供了一个展示其创造力和技术能力的平台。通过不断学习和实践,开发者可以开发出更加复杂和功能丰富的插件,为Chrome浏览器带来更多的可能性。

hello_global的博客 719

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

上一篇: Angular cli搭建项目
下一篇: Three.js基础-简单几何体
大兵的猫
博客等级 码龄7年 364粉丝 49原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大兵的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值