首页
学习
活动
专区
工具
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.3K10

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.7K40

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

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

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

27911

小技巧 | 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 」获取完整源码 如果你觉得文章还不错

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浏览器自带了打包工具,在扩展页面上就有。

64520

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

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

95720

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

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

2.2K20

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 扩展程序的开发与发布 -- 手把手教你开发扩展程序

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

1.4K30

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.8K30

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

82720

异步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.5K20

浏览器架构的温故知新

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

9610

那些有趣实用的 Chrome 扩展神器

谷歌浏览器一直是我推荐的浏览器,之前也写过几篇文章: 如何让你的搜索更高效 实用油猴脚本推荐,让你的谷歌浏览器更强大 谷歌浏览器安装的 Chrome 扩展越来越多,怎么管理?...二管家 这是一个管理扩展扩展 ,可以获取扩展更新通知并记录拓展历史,自动开启/关闭拓展,根据当前网站获取二管家社区推荐,Chrome 扩展地址 https://chrome.google.com/webstore...还有更新通知。 ? 扩展只在指定网页才启用,比如只有打开百度网盘页面才开启网盘助手扩展。 ? 识别浏览器播放歌曲 这首歌是什么?...(由于没有上架谷歌商店,公众号后台回复 公众号 获取),支持文章列表导出为 CSV文件。...打开一篇文章,然后点击扩展图标会跳转到详情页,点击scroll start 页面会自动下拉。 ?

1.9K21
领券