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

Chrome扩展-当另一个页面更新时会通知后台脚本

Chrome扩展是一种可以增强Chrome浏览器功能的插件,可以通过添加自定义的功能和界面来满足用户的特定需求。当另一个页面更新时通知后台脚本是一种常见的需求,可以通过以下方式实现:

  1. 使用Chrome的消息传递机制:Chrome提供了一种消息传递机制,可以在不同的扩展页面之间发送消息。可以在需要通知的页面中监听更新事件,当页面更新时,发送消息给后台脚本。后台脚本可以通过监听消息的方式接收到更新通知,并执行相应的操作。
  2. 使用Chrome的事件监听机制:Chrome扩展可以通过监听特定的事件来实现页面更新的通知。可以在需要通知的页面中添加事件监听器,当页面更新时触发相应的事件,后台脚本可以通过监听该事件来接收更新通知。
  3. 使用轮询机制:如果无法通过事件监听或消息传递机制实现实时的更新通知,可以使用轮询机制来定期检查页面是否有更新。可以在后台脚本中设置定时器,定期访问需要监测的页面,比较页面的内容是否发生变化,如果有变化则发送通知。

对于Chrome扩展的开发,可以使用前端开发技术(如HTML、CSS、JavaScript)来实现用户界面和交互逻辑,后端开发技术(如Node.js)来实现后台脚本的逻辑。在开发过程中,可以使用Chrome提供的开发者工具来调试和测试扩展。

关于Chrome扩展的更多信息和开发指南,可以参考腾讯云的Chrome扩展开发文档:Chrome扩展开发文档

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

相关·内容

Service Worker最佳实践

有着独立的Javascript运行环境,分担、协助前端页面完成前端开发者分配的需要在后台悄悄执行的任务。基于它可以实现拦截和处理网络请求、消息推送、静默更新、事件同步等服务。...前端页面向内核发起注册时会脚本地址通知内核,内核会启动独立进/线程加载Service Worker脚本并执行Service Worker安装及激活动作。...Worker脚本中保存需要持久化的信息,可以借助localstorage),打开新的可管辖页面或者已管辖页面发起message等消息时,Service Worker进/线程会被重新唤起。...Service Worker脚本并push到测试页面服务器上之后,刷新页面并不能立即去网络更新脚本,给开发调试带来麻烦,但图2中的5可以帮助开发强行忽略本地Service Worker脚本cache,实时的去网络更新...图19 5.2.1 TBS后台云下发指令 1、前端业务需要验证业务在更新Service Worker脚本后是否可以正常访问 2、需要将提前预置的业务网址及Service Worker脚本url及宿主包名和更新时间间隔同步给

2.4K10
  • Chrome 插件特性及实战场景案例分析

    ; background.js:用于定义一个后台页面,相当于一个常驻页面,生命周期和浏览器一致; content_scripts.js:用于向页面中注入 JS 脚本,它可以操作页面dom,但不会和页面中的脚本产生冲突...创建生成,浏览器打开时,会自动加载插件的background.js文件,它独立于网页并且一直运行在后台,它主要通过调用浏览器提供的API和浏览器进行交互; popup.html则不同,它有内容,是一个实实在在的页面...四、Chrome扩展插件能做什么 Chrome扩展插件的使用方向主要包含两个部分: 改变浏览器的外观: brower Actions page Actions content menus 桌面通知 Omnibox...值,而页面上面无法获取到key值,需要让开发提供,然后需要到多语言管理平台去更新对应key的值。 ...这样遇到两个问题: 不能所见即所得,看到页面不能知道key值; 所见无法直接修改,需要到另一个管理平台去修改 ; 目前这个在修改内容少的情况下,还是可以操作的,修改内容很多时,这样操作起来很繁琐,效率很低

    1.8K40

    Chrome Extension

    桌面通知 ? 多功能框 ? 页面按钮 ? 主题背景 ?...HTML文件,点击扩展图标,弹出的面板页面(如果在manifest.json中配置了default_popup为该文件的话) ├ demo.js //一个或多个js文件,popup面板加载的js脚本文件...,收发消息 history 历史记录控制 i18n 多语言国际化支持 idle 取得机器闲置状态 management 管理扩展与应用 notifications 通知控制 pageAction 具体的页面下控制扩展图标...单击打包扩展程序。打包程序将创建两个文件:一个 .crx 文件,是实际的可安装的扩展程序;另一个是 .pem 文件,包含私有密钥。 不要丢失私有密钥!确保 .pem 文件保密,并存放在安全的地方。...如果您今后需要做如下事情,您需要这一文件: - 更新扩展程序 - 将扩展程序上传至 Chrome 网上应用店 更新包 增加 manifest.json 中的版本号。

    2.8K30

    Chrome扩展程开发初探

    后台脚本: background:定义后台脚本,在 manifest_version 3 中使用 service_worker。后台脚本在浏览器启动时运行,管理扩展的生命周期和处理事件。...Chrome 扩展的安全性设计确实不允许在 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展的功能。Chrome 扩展通过内容安全性策略来限制可以在页面上执行的脚本。...; }); }); background background.js 文件是 Chrome 扩展后台脚本,用于处理长期运行的任务、事件和状态管理。它在浏览器的后台运行,并且在浏览器启动时加载。...通过这种方式,可以在后台脚本中实现复杂的逻辑和状态管理,同时与其他扩展组件进行通信。 下面是 background.js 主要的功能演示: 1....消息传递:与扩展的其他部分(如后台脚本 background.js、弹出页面 popup.js)进行消息传递和通信。 数据采集和分析:收集页面上的数据,进行分析或发送到后台进行处理。

    9710

    写html页面没意思,来挑战chrome插件开发

    背景脚本用于处理插件的后台逻辑,而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能,例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。...的service_workerAPI可以打开一个独立后台运行脚本。...此脚本会随着插件安装,初始化执行一次,然后一直在后台运行。可以用来存储浏览器的全局状态数据。background脚本是长时间运行在后台,随着浏览器打开就运行,直到浏览器关闭而结束运行。...某天不小心让你的女神生气了,为了能够道歉争取到原谅,你是否可以写一个道歉信贴到每一个页面上,女神打开网站,看到每个页面都会有道歉内容。...通过这些方法,您可以从内容脚本扩展程序发送一次性 JSON 可序列化消息,或者从扩展程序向内容脚本发送。如需处理响应,请使用返回的 promise。

    37511

    小技巧 | Get 到一个 Web 自动化方案,绝了!

    Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含:Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...background 用于定义一个后台页面,相当于一个常驻页面,生命周期和浏览器一致 content_scripts 用于注入 JS 脚本,它不会和页面中的脚本产生冲突 3. ...然后,设置浏览器插件的图标及后台页面 需要注意的是,后台页面 background 可以设置一个 HTML 页面,也可以设置 JS 脚本列表,且只能选择其中一种 # mainifest.json //...这里设置所有的页面都会执行 content.js 脚本匹配到第二个页面时,执行 content_vx.js 脚本 需要指出的是,run_at 设置为 document_end,代表页面加载完成后...JS 脚本、inject-scripts 引入脚本及他们之间的数据传输,这部分内容大家可以自行扩展 我已经将文中所有源码上传到后台,关注公众号后回复关键字「 crx 」获取完整源码 如果你觉得文章还不错

    1.1K00

    小技巧 | Get 到一个 Web 自动化方案,绝了!

    Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含:Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...background 用于定义一个后台页面,相当于一个常驻页面,生命周期和浏览器一致 content_scripts 用于注入 JS 脚本,它不会和页面中的脚本产生冲突 3....然后,设置浏览器插件的图标及后台页面 需要注意的是,后台页面 background 可以设置一个 HTML 页面,也可以设置 JS 脚本列表,且只能选择其中一种 # mainifest.json //...这里设置所有的页面都会执行 content.js 脚本匹配到第二个页面时,执行 content_vx.js 脚本 需要指出的是,run_at 设置为 document_end,代表页面加载完成后...JS 脚本、inject-scripts 引入脚本及他们之间的数据传输,这部分内容大家可以自行扩展 我已经将文中所有源码上传到后台,关注公众号后回复关键字「 crx 」获取完整源码 如果你觉得文章还不错

    1.1K20

    基于Chrome插件的开发工具链

    在项目开发过程中,时不时会碰上需要使用一些工具来做一些自动操作或者附加功能。...执行环境 chrome插件的执行环境主要有三种,一种是后台页,一种是popup页面,还有一种叫内容脚本( content script )。 这三种执行环境分别在三个不同的沙箱中执行。...后台后台页当然是运行在后台,也分两种,一种是按需加载的“事件页面”(生命周期的形式有点像手机应用开发),另一种是只要chrome进程存在就会一直保持在线的后台页。...调试 chrome的调试已经非常强大了,在扩展页面上打开开发者模式,可以载入正在开发中的插件的文件夹。 后台页的调试可以在扩张页面点击插件下面的地址打开调试面板。...content script可以在网页上打开网页的脚本调试面板,然后脚本列表那里有个tab是Content scripts 打包和自动更新 chrome浏览器自带了打包工具,在扩展页面上就有。

    66120

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

    "扩展" 和 "插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫 "扩展",另一个叫 "插件"。...chrome扩展程序将后台网页分为两种类型: 1.持续运行的后台网页 2.事件页面 是否持久存在是事件页面后台网页之间的根本区别。...(刚开始使用的时候可以理解为一个东西) 应用和扩展程序通常需要长时间运行的脚本来管理某些任务或状态,这就是后台页面的作用。...它的主要功能及适用场景,大致如下: 1.事件页面监听的某个事件触发 2.应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 3.内容脚本或其他扩展程序发送消息 4.扩展程序中的其他视图调用了...runtime.getBackgroundPage 以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面

    1K20

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

    ,重要工作是监听用户行为的插件 官方建议:如果要实现的功能只针对某一个页面有用则建议使用 page_action 否则使用 browser_action 8. background 用来定义后台脚本部分...扩展是基于事件的程序,这些事件包括导航到新页面、删除书签、或者关闭选项卡,扩展在他们的后台脚本中监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载...后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件后,会使用指定的指令响应(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了...content_script 或者其他扩展中调用了 sendMessage 当前扩展中的其他部分,例如弹窗中调用了 runtime.getBackgroundPage 后台脚本定义选项 {...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作,默认为 true, chrome 检测到离线时,程序会被高亮显示 14. permissions

    2.5K20

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

    "扩展" 和 "插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫 "扩展",另一个叫 "插件"。...chrome扩展程序将后台网页分为两种类型: 持续运行的后台网页 事件页面 是否持久存在是事件页面后台网页之间的根本区别。...(刚开始使用的时候可以理解为一个东西) 应用和扩展程序通常需要长时间运行的脚本来管理某些任务或状态,这就是后台页面的作用。...它的主要功能及适用场景,大致如下: 事件页面监听的某个事件触发 应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 内容脚本或其他扩展程序发送消息 扩展程序中的其他视图调用了 runtime.getBackgroundPage...以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url

    1.5K30

    Chrome扩展开发入门体验

    ,就是扩展的图标~~~ popup.html 点击扩展图标,弹出的面板页面(如果在manifest.json中配置了default_popup为该文件的话) popup.js popup...Chrome 申请的权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications)、存储(...,比较常用的是指定子属性 scripts,表示在扩展启动时自动创建一个包含所有指定脚本页面。.../public/js/background.js"] } } chrome_url_overrides chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面...background顾名思义呢就是扩展程序的后台脚本,该脚本在程序运行之后一直处于后台运行状态。记录常用的API。

    1K40

    Chrome扩展开发

    扩展demo", // 图标,一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128"...: "img/icon.png" }, // 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式,如果指定JS,那么会自动生成一个背景页 "page":...插件", "default_popup": "popup.html" }, // 某些特定页面打开才显示的图标 /*"page_action": { "default_icon": "...} ], // 权限申请 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "notifications", // 通知...”, or "document_idle"自动注入 但是脚本运行在与页面独立的上下文中,无法访问到原页面脚本上下文资源 如需访问原页面脚本上下文,可在content_scripts脚本中将web_accessible_resources

    87720

    Chrome】931- 何从零开始开发一个 Chrome 插件?

    另外,background拥有的权限比较高,几乎可以调用所有的Chrome扩展API(除了devtools),同时拥有直接跨域的能力。 page:指定一个网页为后台页面。...比如安装、更新插件的时候,或者有其他页面与background通信的时候才会被加载。...content-scripts content-scripts能够在合适的时机(页面载入前、载入后、空闲时)注入脚本,允许内容脚本更改其JavaScript环境,而不与页面或其他内容脚本发生冲突。...,脚本内容也会在插件定义的时间运行,页面点击按钮时,会出现两次弹窗。...permissions 插件后台有的操作需要配置相应的权限,例如本地存储、网络请求、通知等等,示例: { ...

    1.8K60

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

    "扩展" 和 "插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫 "扩展",另一个叫 "插件"。...chrome扩展程序将后台网页分为两种类型: 持续运行的后台网页 事件页面 是否持久存在是事件页面后台网页之间的根本区别。...(刚开始使用的时候可以理解为一个东西) 应用和扩展程序通常需要长时间运行的脚本来管理某些任务或状态,这就是后台页面的作用。...它的主要功能及适用场景,大致如下: 事件页面监听的某个事件触发 应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 内容脚本或其他扩展程序发送消息 扩展程序中的其他视图调用了 runtime.getBackgroundPage...以我上面的 URLHelper 为例子,在这个扩展中,我使用的是持续运行的后台网页,浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url

    1.9K30

    异步JS中的Web Workers

    因此 Workers 是不能访问 DOM(窗口、文档、页面元素等等)的. 2、Web Wokers 通过使用 Web Workers,Web 应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。...二、Dedicated Workers 通常所说的 Worker 是指Deicated Workers, 其接口是 Web Workers API 的一部分, 他可以由脚本创建后台任务, 在任务执行的过程中...如果你使用的是chrome, 在地址栏输入chrome://inspect/#workers即可打开后台工具, 可以看到当前的一些workers, worker的名称是调用 new SharedWorker...他们旨在(除开其他方面)创建有效的离线体验, 拦截网络请求, 以及根据网络是否可用采取合适的行动, 更新驻留在服务器上的资源. 他们还将允许访问推送通知后台同步 API....因此为了更好的管理, 我们可以手动调用 caches.delete 方法删掉对应 key 值的Cache 条目. 3) 更新 重新进入 SW 页面, 或者在 SW 上的一个事件被触发并且过去 24 小时没有被下载时会触发更新

    1.6K20

    浏览器架构的温故知新

    此外,进程可以通过信号进行通信,相互通知特定的事件或请求。socket利用网络协议将 IPC 扩展到不同的机器。 多进程浏览器增强了稳定性,隔离进程可以防止崩溃影响到整个浏览器。...最后,在屏幕上绘制元素,在用户交互期间不断更新。 4 插件机制 使用插件时,浏览器的操作比普通网页还要简单。...ServiceWorker 功能允许扩展操作,而无需一直驻留在后台。这样可以回收扩展资源,有效地减少总体浏览器开销。对规则计算的限制作为一种控制机制,确保单个扩展不会过度消耗资源。...4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期,并且在浏览器打开时连续运行。它拥有广泛的权限,允许访问大多数 Chrome 扩展 API 和跨源请求,而不受 CORS 限制。...后台脚本,在后台独立运行的脚本,涉及多种方法,例如 chrome.tabs.sendMessage、 chrome.tabs.connect、 chrome.tension.getBackoundPage

    14610
    领券