首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome扩展-只在刷新页面后运行脚本

Chrome扩展是一种可以在Google Chrome浏览器上添加额外功能的插件。它可以通过自定义脚本来增强浏览器的功能和用户体验。

只在刷新页面后运行脚本是指在页面刷新时自动执行特定的脚本。这种功能可以用于自动化操作、数据采集、页面修改等场景。

在Chrome扩展中实现只在刷新页面后运行脚本的方法如下:

  1. 创建一个新的Chrome扩展项目,包括manifest.json和脚本文件。
  2. 在manifest.json文件中添加"content_scripts"字段,用于指定脚本的注入时机和范围。例如:
代码语言:json
复制
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["script.js"],
    "run_at": "document_idle"
  }
]

上述代码中,"matches"字段指定了脚本注入的页面范围,"<all_urls>"表示所有页面。"js"字段指定了要运行的脚本文件,可以是单个文件或多个文件。"run_at"字段指定了脚本的执行时机,"document_idle"表示在页面加载完成后执行。

  1. 在脚本文件中编写需要在刷新页面后执行的代码。例如:
代码语言:javascript
复制
// 在页面刷新后执行的代码
console.log("页面已刷新");
// 这里可以编写其他需要执行的脚本逻辑
  1. 将扩展加载到Chrome浏览器中进行测试。在Chrome浏览器的扩展管理页面,开启开发者模式,点击"加载已解压的扩展程序",选择扩展项目的文件夹即可加载。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供灵活可扩展的云服务器实例,满足不同规模和需求的应用场景。产品介绍
  • 云函数(SCF):无服务器计算服务,支持在云端运行代码,无需管理服务器。产品介绍
  • 云数据库 MySQL版(CDB):提供稳定可靠的云数据库服务,支持高可用、备份恢复、性能优化等功能。产品介绍
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能开发工具和服务,包括图像识别、语音识别、自然语言处理等。产品介绍

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vuex页面刷新数据被清除

用vuex来做全局的状态管理, 发现当刷新网页,保存在vuex实例store里的数据会丢失 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store...而第二种可以保证刷新页面数据不丢失且易于读取。...vue是单页面应用,操作都是一个页面跳转路由;sessionStorage可保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。...因为我们是只有刷新页面时才会丢失state里的数据,想法点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件页面刷新时先触发的。...$store.state,JSON.parse(sessionStorage.getItem("store")))) } //页面刷新时将vuex里的信息保存到sessionStorage

3.1K00
  • 进阶|Chrome还不够神,但你写的扩展程序可以很神

    scripts -- 内容脚本 Content scripts 脚本是指能够浏览器已经加载的页面内部运行的 javascript 脚本。...以我上面的 URLHelper 为例子,在这个扩展中,当我点击扩展程序界面中的刷新页面按钮的时候,会从扩展界面的 DOM 上将修改参数取出拼好,并且通过 Chrome 的消息传递机制 传递给 Content...scripts,然 Content scripts 拿到新的参数,赋值给当前浏览器窗口页面的 document.location.href,实现页面刷新。...事件页面需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...runtime.getBackgroundPage 以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,当浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面

    1K20

    【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    -- 内容脚本 Content scripts 脚本是指能够浏览器已经加载的页面内部运行的 javascript 脚本。...以我上面的 URLHelper 为例子,在这个扩展中,当我点击扩展程序界面中的刷新页面按钮的时候,会从扩展界面的 DOM 上将修改参数取出拼好,并且通过 Chrome 的消息传递机制 传递给 Content...(刚开始使用的时候可以理解为一个东西) 应用和扩展程序通常需要长时间运行脚本来管理某些任务或状态,这就是后台页面的作用。...事件页面需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,当浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url

    1.5K30

    【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    -- 内容脚本 Content scripts 脚本是指能够浏览器已经加载的页面内部运行的 javascript 脚本。...以我上面的 URLHelper 为例子,在这个扩展中,当我点击扩展程序界面中的刷新页面按钮的时候,会从扩展界面的 DOM 上将修改参数取出拼好,并且通过 Chrome 的消息传递机制 传递给 Content...(刚开始使用的时候可以理解为一个东西) 应用和扩展程序通常需要长时间运行脚本来管理某些任务或状态,这就是后台页面的作用。...事件页面需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,当浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url

    1.9K30

    带你快速走进Chrome扩展开发的大门

    它还必须位于扩展程序的根目录中。清单记录重要的元数据,定义资源,声明权限,并标识哪些文件在后台和页面运行 2 content scripts 内容脚本在网页上下文中执行 Javascript。...它可以使用所有的Chrome API,但不能直接与网页内容交互;这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件,例如弹出窗口、选项页面和其他 HTML 页面。...扩展程序(chrome://extensions/) 打开开发者模式 加载已解压的扩展程序(包含清单文件的文件夹) PS:插件开发过程中会多次修改,修改需要在浏览器的扩展程序中重新刷新后生效 实现专注阅读模式..."suggested_key": { "default": "Ctrl+B", "mac": "Command+B" } } } } 扩展程序中刷新插件并测试.../popups/popup.html" } } 编写(编写页面、编写样式、编写脚本) 编写页面 <!

    80710

    我是如何用这3个小工具,助力小姐姐提升100%开发效率的。

    油猴脚本(Tampermonkey)是一个流行的浏览器扩展,可以运行用户编写的扩展脚本,来实现各式各样的功能,比如去广告、修改样式、下载视频等。 如何写一个油猴脚本? 1....,过滤剩3个,瞬间就找到你要调试页面,再也不用从几百个页面中寻找你自己的那个啦!...改写vue.config.js manifest.json对文件引用的结构基本决定了打包的文件路径 打包的路径 // dist目录用来chrome扩展导入 ├── dist │ ├── favicon.ico...热刷新 我们希望修改插件源代码进行打包之后,chrome插件对应的页面能主动更新。为什么叫热刷新而不是热更新呢?因为它其实是全局刷新页面,并不会保存状态。...参考 【干货】Chrome插件(扩展)开发全攻略 油猴脚本编写教程

    1.2K30

    如何更优雅地使用 bilibili(b站)

    Chrome 浏览器扩展神器油猴 ,安装油猴(公众号内回复 油猴 获取)可以参考之前的文章上不了谷歌如何安装 Chrome 扩展?...安装油猴扩展打开脚本地址 https://greasyfork.org/zh-CN/scripts/373563-bilibili-evolved ,直接安装就好。 ?...再次打开b站,页面左侧多出了个工具栏,av和BV号都直接显示出来了。 ? 选择顶栏布局,点击右侧的图标可以显示/隐藏它们。 ? 选择隐藏的元素,刷新页面上方都空白了。 ?...这就需要暴力猴扩展了,关于暴力猴之前写过文章介绍Chrome 浏览器扩展神器暴力猴 暴力猴 这也是个Chrome扩展 https://chrome.google.com/webstore/detail/...hl=zh-CN ,一款非常强大的浏览器脚本管理工具,安装打开b站点击扩展里的 为此站点查找脚本。 ?

    1.8K10

    玩转Microsoft Edge

    然后,Microsoft Edge(以下简称Edge)升级到新版以后活脱脱就是个Chrome的翻版,因为用的就是谷歌的内核,Edge也有自己的插件市场,所以,导入了Chrome的配置之后,我得以完美的从...安装完成,如果你之前用的是Chrome,那你可以直接导入Chrome的使用数据。点击Edge浏览器右上角的 。。。...而且和BBS论坛的刷新有冲突,安装了Dark Mode以后,BBS论坛评论了不会自动刷新,严重影响体验。...多线程下载工具可以参考这篇教程:基于NDM和TamperMonkey脚本实现高速下载 百度文库下载 这个脚本百度文库页面左上角加了一个下载按钮,点击后会自动跳转到别人提供的接口页面,因为接口是需要开发者自己付费建设的...写在最后 Atom安装和配置教程里就有提过,插件和脚本的探索是无止境的,只要还有富有想象力的开发者就会有无数种脚本和插件,所以尽量朝着把浏览器配置的更加方便的方向走就好,可不要为了追求花里胡哨而安装一大堆无用的装饰品来拖慢运行速度

    1.8K30

    H5 游戏开发 2:搭建 Egret 开发环境

    首先,我们 VSCode 中安装一个 Debugger for Chrome 扩展。...Egret 官方提供了一个 Chrome 扩展,安装完成,我们能通过 Chrome DevTools Egret 面板查看到具体的元素层级和布局信息。...使用时,需要注意两个问题: Egret 虚拟画布节点通常不会自动刷新,需要手动点击“选中点击对象”刷新按钮来强制刷新; 控制台偶尔会报错 Uncaught TypeError: this.addChild...Egret Live Reload 配置 进行 Web 项目开发时,很多时候我们需要一边编写代码,一边刷新预览页面的呈现效果,H5 游戏开发也不例外。...此时,Whistle Live Reload 进程正在实时监听 bin-debug 目录的变化,收到变化通知,通过 WebSocket 通知浏览器页面进行自动刷新,从而实现我们所需的开发体验。

    5K60

    chrome浏览器插件开发快速入门

    加载未封装的扩展程序 要在开发者模式下加载已解压的扩展程序,请执行以下操作: 新标签页中输入 chrome://extensions,转到“扩展程序”页面。..., ... } 保存文件,若要在浏览器中查看此更改,您还必须刷新扩展程序。...Worker 是 内容脚本 是(以及托管网页) 弹出式窗口 否 选项页面 否 其他扩展程序 HTML 网页 否 查找控制台日志和错误 控制台日志 开发过程中,您可以通过访问浏览器控制台日志来调试代码...本示例中,我们 可找到该弹出式窗口的日志。首先, hello.html 中添加脚本标记。...点击错误按钮,详细了解具体错误: 如需详细了解如何调试 Service Worker、选项页面和内容脚本,请参阅调试 扩展程序。

    12710

    浏览器用户脚本—打造自己的专属页面

    如何运行一个浏览器脚本 安装用户脚本管理器 首先需要安装一个脚本管理器插件,Tampermonkey支持Chrome、Firefox、Safari、Microsoft Edge等主流浏览器,可以https...[add penguin user script] 运行用户脚本 安装之后打开或刷新http://www.qq.com 页面就能看到页面已经改变!...,刷新搜索结果页面,可以看到右侧边栏已经隐藏掉了。...这是因为用户脚本默认是页面完成加载开始执行的,但是搜索结果页面再次搜索时,百度是通过ajax请求的方式来获取结果的,而在结果返回,head标签内的所有style标签会被重置掉。...我们可以脚本中增加对ajax请求的监控,监测到有搜索的ajax请求,再次把样式代码增加到head标签内即可。

    5.4K40

    chrome扩展应用开发快速科普

    从官方的介绍我们可以知道,Background Pages的作用就是浏览器运行时,会长时间执行的脚本。只要浏览器处于打开状态,Background Pages中的脚本就会在后台执行。...从上面官方的介绍我们可以知道,Content Script其实就是我们需要写的将会在我们希望的目标页面中执行的脚本文件。每次目标页面刷新时,这部分脚本也会重新加载执行。...(长时间执行脚本监听用户操作) 能够特定页面中将保存的表情发送出去(目标页面中使用脚本页面进行交互) 能够插件中管理已有表情(插件管理相关功能) 因此,需要完成上述功能,我们就需要用到上面我们提到的功能模块...background Background Pages文件 permissions 扩展应用所需权限 权限列表见此处。申请权限,可以使用chrome对象来进行访问该权限提供的API接口。...管理已有表情(Options) 通过Options,我们能够给chrome扩展应用开发一个“设置”页面。当我们指定options_page字段,它的值就是我们的“设置”页面

    96910

    Chrome插件manifest.json文件详解

    开发Chrome插件首先就是配置manifest.json文件了,利用它我们可以定义什么时机以及什么网页执行什么脚本,有一些什么行为,下面我一起来看看这个文件有哪些配置项以及有什么作用: {...URL "app": {}, // 指定扩展进程的background运行环境及运行脚本 "background": { "scripts": [..."chrome_url_overrides": { "pageToOverride": "html/overrides.html" }, // 指定在web页面运行脚本...用于扩展管理页面跳转到选项设置 "options_page": "aFile.html", // 申请权限 "permissions": [ "https://...点击图标时弹出的页面,以及插件的标题,建议始终保留一个,不设置这个属性图标会是灰色的,设置了才会亮起来; 7. background 背景页,扩展进程的背景运行环境,可以拦截修改请求等等; 8. content_scripts

    1.9K20

    浏览器插件开发-manifest文件解读「建议收藏」

    扩展页图标 (16 * 16) 最好是 png 格式 6. browser_action 可以用来定义点击图标展示的窗口,对应接口 chrome.browserAction,这项配置与 page_action...猜测 browser_action 适用于用户需要点击图标弹窗中操作的场景 page_action 试用与在后台运行,重要工作是监听用户行为的插件 官方建议:如果要实现的功能针对某一个页面有用则建议使用...page_action 否则使用 browser_action 8. background 用来定义后台脚本部分 扩展是基于事件的程序,这些事件包括导航到新页面、删除书签、或者关闭选项卡,...扩展在他们的后台脚本中监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载或者更新被加载 后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件,会使用指定的指令响应...注入之后,其他任何脚本或者 DOM 之前注入;document.end DOM 完成之后立即注入,但是图像等资源之前 编程方式注入,不需要指定可访问的域名,可以针对当前活动的选项卡运行,获取临时访问权限

    2.5K20

    B2C商城返利推广链接清洗脚本

    安装方法 1.目前仅在 Chrome 核心浏览器验证通过,Firefox 用户可以自行尝试使用油猴加载脚本。...2.点我安装用户脚本管理扩展 Tampermonkey(需访问国外网站),或点我下载CRX文件,拖动到扩展管理界面安装(提取码:6792) 3.点我安装脚本:“京东推广自动清除” 4.弹出的窗口中点击安装...使用说明 安装完成,自任意来源点击进入B2C商城返利链接时,页面会自动刷新一次用以清洗推广信息。...刷新完成即可开始购物。...由于亚马逊 cookies 写入时间特殊,页面会在加载完成1.5秒刷新易迅点击某些活动链接时也会有一次性刷新现象,属于已知问题,无实际影响。

    71120

    chrome插件手机上跑起来

    app的加载页面 书写加载页面的内容 使用chrome扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version...app的加载页面 由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,应用启动的时候,我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...的扩展插件出于安全考虑,是不能写内联的脚本的,内联样式是可以的 引用第三方的cdn服务器上得脚本也是不允许的 使用chrome扩展程序加载程序代码 打开chrome-工具(右上角条纹按钮)-更多工具...点击加载已解压扩展程序,指定到上面我们项目的根目录,加载成功即可启动程序。...web页面的调试,所以浏览器端可以做很多调试了,而只有少部分问题需要在模拟机或者真机上调试。

    69610

    浅谈xss的后台守护问题

    在出好HCTF2016的两道xss题目,就有了一个比较严重的问题就是,如何守护xss的后台,用不能人工一直在后台刷新吧(逃 一般来说,之所以python的普通爬虫不能爬取大多数的网站的原因,是因为大多数网站都把显示数据的方式改成了...,我的测试下,没桌面的情况下怎么都运行不起来,可能是需求桌面的,所以想要放在线上服务器的话,可能需要有桌面才可以(我想没人会在线上服务器装个桌面吧,这里估计还是windows服务器) 一个普通的守护脚本...等待页面加载完成,我们需要给时间来加载选手的js,所以这里的time.sleep是必须的。 我的测试下,这里只要没有弹窗,即使js没有加载完成,也会被quit关闭webdriver。...ps:改脚本的时候其实有一点儿问题,这里的phpsession其实可以复用,因为默认有效时间大概是3小时,可以把判断改为判断session失效调用登陆获取新的session。...2天48小时的时间内,我的bot挂了大概5次左右,其中两次是不小心被我们的运维ban了,有两次是发起请求的时候超时导致卡死退出,还有一次目测是有个选手发了大概20条刷新,导致webdirver直接卡死退出了

    54920

    chrome插件手机上跑起来

    app的加载页面 书写加载页面的内容 使用chrome扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version...app的加载页面 由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,应用启动的时候,我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...的扩展插件出于安全考虑,是不能写内联的脚本的,内联样式是可以的 引用第三方的cdn服务器上得脚本也是不允许的 使用chrome扩展程序加载程序代码 打开chrome-工具(右上角条纹按钮)-更多工具...点击加载已解压扩展程序,指定到上面我们项目的根目录,加载成功即可启动程序。...web页面的调试,所以浏览器端可以做很多调试了,而只有少部分问题需要在模拟机或者真机上调试。

    70920
    领券