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

在多页chrome扩展中,脚本如何相互通信?

在多页Chrome扩展中,脚本可以通过以下方法相互通信:

  1. 使用扩展程序消息传递API:Chrome提供了chrome.runtime.sendMessage()和chrome.runtime.onMessage()方法,用于不同脚本之间的消息传递。通过sendMessage()方法发送消息,通过onMessage()方法接收消息。消息可以是任意类型的数据,包括字符串、对象等。该方法适用于不同扩展页面之间的通信。
  2. 使用事件页:事件页是扩展的一个特殊页面,可以在manifest.json文件中指定。不同脚本可以通过事件页来进行通信。通过chrome.runtime.getBackgroundPage()方法可以获取到事件页的引用,从而实现跨脚本的通信。
  3. 使用共享的本地存储:多个脚本可以通过共享的本地存储(例如Chrome的localStorage或者chrome.storage API)来进行通信。一个脚本可以将数据存储在本地存储中,另一个脚本可以监听存储的变化来获取数据。
  4. 使用内容脚本和页面脚本之间的通信:扩展中的内容脚本可以通过DOM事件或者消息传递的方式与当前页面中的脚本进行通信。内容脚本可以通过chrome.runtime.sendMessage()方法向扩展发送消息,页面脚本可以通过window.postMessage()方法向内容脚本发送消息。
  5. 使用自定义事件:可以使用JavaScript中的自定义事件机制来实现不同脚本之间的通信。一个脚本可以通过dispatchEvent()方法触发自定义事件,其他脚本可以通过addEventListener()方法监听该事件并做出相应的响应。

需要注意的是,在多页Chrome扩展中,不同页面的脚本是运行在不同的上下文环境中的,因此不能直接访问对方的变量和函数。以上方法都是通过Chrome提供的API来实现跨脚本的通信。同时,根据实际需求,可以选择适合的方式进行通信。

附带推荐的腾讯云相关产品和产品介绍链接地址(仅供参考):

  • 云服务器(ECS):提供安全、高性能、稳定可靠的云服务器实例,适用于网站托管、应用程序部署等场景。产品介绍
  • 云数据库MySQL版(CDB):支持高可靠性、可扩展的MySQL数据库服务,适用于Web应用、大中型网站、移动应用等场景。产品介绍
  • 云对象存储(COS):提供安全、高可靠、低成本的云端存储服务,适用于图片、音视频、备份存储等场景。产品介绍
  • 腾讯云CDN:提供全球加速服务,提高网站访问速度,减少用户访问延迟。产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浏览器渲染(进程视角)

这篇文章主要站在浏览器进程架构模型的发展史来聊一下页面的渲染,及渲染过程,进程之间是如何通信的。 浏览器任务管理器.png 这些进程的职责是什么,怎么来的呢?为什么这么设计呢?...,由进程来管理 线程阻塞:进程的线程是阻塞的(如果此线程操作了公共内存区),任意线程执行出错都会导致进程崩溃 数据共享:线程之间共享进程的数据 进程隔离:进程之间是相互隔离相互独立的内存空间,可以通过...,如果要换一个操作系统、换一个设备,依然能够让chrome稳定运行如何做到呢?...1.4 面向服务架构 image.png 这有些关键字:更内聚、松耦合、易维护和扩展,简单、稳定、高速、安全、设备,其他的可以自己思考一下了,这不就是一个小型的操作系统要做的事情么,目前很多微服务的...- 我们切换到local.test.com页面(local.test.com页面是新标签打开),控制台查看window.opener发现为null 会发现在不同进程,不具有同一浏览上下文组的页面之间是相互隔离的

2.7K131

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

你可以 chrome 应用商店下载到它: 开发它的原因是因为,我们的业务开发,开发过程经常需要面对超长的 URL,带有 N 多个参数,它可能长这样: 不是开玩笑,真实情况可能比这个还长。...的微格式数据 我们可以这样理解它,页面加载完毕之后,我们的扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问的 web 页面的详细信息。...接下来,我们的扩展要灵活地完成各种功能,最重要的就是互相间的通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境运行,所以它们通常需要某种方式与扩展程序的其余部分通信。...打开浏览器,试一下,chrome 对象其实包含了非常的功能: 各种类型的消息传递都是通过这个 chrome 对象进行,分为: 1.简单的一次性请求 2.长时间的连接 3.跨扩展程序消息传递 4.

1K20
  • 基于Chrome插件的开发工具链

    执行环境 chrome插件的执行环境主要有三种,一种是后台,一种是popup页面,还有一种叫内容脚本( content script )。 这三种执行环境分别在三个不同的沙箱执行。...但是可以通过chrome提供的消息管道的形式相互访问。...关于通信 由于不同的执行环境(后台、popup、centent script和网页原生的脚本环境)不同的沙箱,他们之间要进行通信可以使用chrome的消息管道API。...调试 chrome的调试已经非常强大了,扩展页面上打开开发者模式,可以载入正在开发的插件的文件夹。 后台的调试可以扩张页面点击插件下面的地址打开调试面板。...content script可以在网页上打开网页的脚本调试面板,然后脚本列表那里有个tab是Content scripts 打包和自动更新 chrome浏览器自带了打包工具,扩展页面上就有。

    66120

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

    Extension API 360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome插件之间的通信...扩展在他们的后台脚本监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件后,会使用指定的指令响应...(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了 content_script 或者其他扩展调用了 sendMessage...当前扩展的其他部分,例如弹窗调用了 runtime.getBackgroundPage 后台脚本定义选项 { ......使用 chrome_ui_overrides 配置,详细配置查看文档,可以设置一些书签方面的规则 内置页面替换 使用 chrome_url_overrides 配置,详细配置查看文档,标签、历史

    2.5K20

    浏览器架构的温故知新

    此外,进程可以通过信号进行通信相互通知特定的事件或请求。socket利用网络协议将 IPC 扩展到不同的机器。 多进程浏览器增强了稳定性,隔离进程可以防止崩溃影响到整个浏览器。...同时,呈渲染进程运行 JavaScript 也可以隔离其影响。如果脚本阻塞呈现进程,它只影响当前,浏览器和其他不受影响,因为每个都在其专用渲染进程运行脚本。...4.3.3 后台脚本 Chrome 扩展的后台脚本具有最长的生命周期,并且浏览器打开时连续运行。它拥有广泛的权限,允许访问大多数 Chrome 扩展 API 和跨源请求,而不受 CORS 限制。...4.4 Chrome 插件的通信机制 Chrome 插件通信依赖于五种类型的脚本: 注入脚本,表示动态注入到网页脚本,通常依赖于 window.postMessage。...内容脚本特定网页上下文中执行的脚本,利用 window.postMessage、 chrome.runtime.sendMessage 和 chrome.runtime.connect 进行脚本通信

    14610

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

    看完您可以会收获 用vue从零开始写一个chrome插件 如何用Object.defineProperty拦截fetch请求` 如何使用油猴脚本开发一个扩展程序 日常提效的一些思考 油猴脚本入门示例 因为接下来的两个小工具都是基于油猴脚本来实现的...油猴脚本(Tampermonkey)是一个流行的浏览器扩展,可以运行用户编写的扩展脚本,来实现各式各样的功能,比如去广告、修改样式、下载视频等。 如何写一个油猴脚本? 1....模拟手机设备来开发,所以往往会涉及到chrome浏览器模拟用户登录,其涉及以下三步(这个步骤比较繁琐)。...,我们会演示如何插入脚本并且在网页加载的时候弹一个hello world popup与background通信部分 popup完成用户的主要交互,viewA页面点击获取自定义的ua信息 修改ajax请求...参考 【干货】Chrome插件(扩展)开发全攻略 油猴脚本编写教程

    1.2K30

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

    开发自己的扩展程序 OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。 当然,首先我们要搞清楚为什么我们需要扩展程序,它有什么作用呢?...接下来,我们的扩展要灵活地完成各种功能,最重要的就是互相间的通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境运行,所以它们通常需要某种方式与扩展程序的其余部分通信。...使用 chrome.* API 消息传递,主要使用了 Chrome 浏览器的内置 chrome 对象进行。打开浏览器,试一下,chrome 对象其实包含了非常的功能: ?... chrome 浏览器访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下的扩展程序 (E),进入相同的页面)。

    1.9K30

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

    开发自己的扩展程序 OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。 当然,首先我们要搞清楚为什么我们需要扩展程序,它有什么作用呢?...接下来,我们的扩展要灵活地完成各种功能,最重要的就是互相间的通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境运行,所以它们通常需要某种方式与扩展程序的其余部分通信。...使用 chrome.* API 消息传递,主要使用了 Chrome 浏览器的内置 chrome 对象进行。打开浏览器,试一下,chrome 对象其实包含了非常的功能: ?... chrome 浏览器访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下的扩展程序 (E),进入相同的页面)。

    1.5K30

    Chrome扩展程开发初探

    常用功能 popup 页面 Chrome 扩展,popup 页面是指当用户点击扩展图标时弹出的界面。这个界面通常用于提供用户交互或展示信息。...Chrome 扩展的安全性设计确实不允许 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展的功能。Chrome 扩展通过内容安全性策略来限制可以页面上执行的脚本。... manifest_version 3 ,通过 manifest.json 文件定义 background 部分并引用 background.js 作为服务工作者,可以配置后台脚本来处理扩展的安装事件...通过这种方式,可以在后台脚本实现复杂的逻辑和状态管理,同时与其他扩展组件进行通信。 下面是 background.js 主要的功能演示: 1....Chrome 扩展,content.js 是内容脚本,用于匹配的网页上执行 JavaScript 代码。

    9710

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

    我们印象,它就像跑浏览器的应用,可以把浏览器想象成手机,那么插件就像是应用,我们从Chrome应用商店中下载,然后安装到Chrome浏览器,就可以浏览器中进行运行了。...,彼此之间如何进行通信?...实例3:标签控制  使用chrome.tabs API与浏览器的标签系统进行交互,可以查询,创建、修改和重新排列浏览器的标签;我们使用浏览器时,经常会打开很多标签,显得很混乱,中途想要找打开的某个页面时...,效率低且痛苦,如果能将这些标签进行整理并有序的展示该多好,这里给大家推荐一个Chrome扩展插件:OneTab,该插件将所有打开的标签新的页面中有序的排列出来,如下图,一目了然。...,出于安全考虑,tab的属性没有document, 因此无法扩展中直接获取某个标签页面的dom元素,但是可以通过发送事件请求来实现: chrome.tabs.sendRequest(tab_id,

    1.8K40

    写个自己的chrome插件

    像类似掘金插件又是怎么实现的,当我安装稀土掘金插件后,我的导航都被改掉了,因此你也可以做一个类似的插件,来导航你公司的一些产品,方便快捷的实现你的内部导航 开始本文之前,主要是从零认识一个chrome...chrome.runtime几个通信API 正文开始......content_scripts指定加载对应脚本js,css注意matches匹配的是当前访问的url,当选择时,匹配任何url,必须要有matches[3]否则不会生效 "content_scripts...({ text: inputColorValue }); // 扩展脚本向content发出信息 chrome.tabs.query({ active: true, currentWindow...与content.js通信,就可以修改我当前页面上的元素了 另外推荐一个chrome插件官方的例子chrome-extensions-samples[4],看完一些例子插件哟更深刻的认识,在下一节里,

    2K10

    从0开始入门Chrome Ext安全(一) -- 了解一个Chrome Ext

    所以Chrome Ext的代码也就是html、js、css这类,那我们如何获取插件的代码呢?...当我们访问扩展程序的页面可以获得相应的插件id 把crx改名成zip之后解压缩就可以了 manifest.json 插件的代码,有一个重要的文件是manifest.json,manifest.json...contextMenus 右键菜单 通过chrome调用chrome.contextMenus这个API,我们可以定义浏览器的右键菜单。...console选择相应的域 popup js: 插件右键的列表中有审查弹出内容 background js: 需要在插件管理页面点击背景然后调试 通信方式 在前面介绍过各类js之后,我们提到一个重要的问题就是...那么插件怎么和浏览器前台以及相互之间进行通信呢?

    1.1K10

    大型 web 应用公共组件架构思考

    1.1 难以预料第三方公共组件导致的卡顿 腾讯文档管理的公共组件(以下称FC)主要通过 script-loader 动态加载承载了各个页面的公共业务逻辑,然后将脚本注入到品类的 HTML ,比如登陆、...目前 excel 调用公共组件过程,会手动停止卡顿监控,从而让公共组件逻辑不影响详情的卡顿数据。然而,这无法从根本上改变用户主进程卡顿的体验问题。...插件体系有几个比较关键的点:第一是,第三方插件质量会参差不齐,如何约束插件的运行不会导致页面的卡顿。第二点是,插件如何调用文档SDK,也即使如何规范插件和主线程的通信问题。...初始化的过程注入到一个 API 服务工厂返回给一个缓存对象,提供给插件使用。这些对象如何暴露给插件?...2.5 如何兼容品类 公用组件插件化依赖品类有相同的服务化机制。但各个品类因为代码并不统一,插件化如何兼容各个品类呢?

    1.3K20

    Chrome扩展开发入门

    交互界面与组成模块 一个扩展的组成模块如下图所示,整个 Chrome 扩展主要包含六个模块:扩展图标、插件弹窗、选项、单独、注入页面脚本、后台脚本。...各个模块互通信、协作、配合,就构成了一个完整的 Chrome 扩展。 当然,除了上面的六大模块,还有一个非常非常重要的组成部分,那就是 manifest.json。...3)选项 选项的显示时机为当用户扩展图标上右键-选项可打开,点击之后打开新 Tab 如上 manifest.json 文件的 options_page 字段配置。...6)后台脚本 后台脚本如上 manifest.json 文件的 background.service_worker 字段配置。...这段代码是位于“后台脚本”的一段代码,大概意思就是当扩展安装加载完成之后将 color 变量存储本地 storage

    4K30

    从油猴脚本管理器的角度审视Chrome扩展

    从油猴脚本管理器的角度审视Chrome扩展 之前一段时间,我需要借助Chrome扩展来完成一个需求,当时还在使用油猴脚本与浏览器扩展之间调研了一波,而此时恰好我又有一些做的还可以的油猴脚本 TKScript...通信方案 Chrome扩展设计上有非常的模块和能力,我们常见的模块有background/worker、popup、content、inject、devtools等,不同的模块对应着不同的作用,协作构成了插件的扩展功能...,并且成为开发者并上架Chrome应用商店需要支付5$的注册费,如果我们只是希望Web页面中进行一些轻量级的脚本编写,使用浏览器扩展级别的能力会显得成本略高,所以没有特殊需求的情况,浏览器实现级别的轻量级脚本是很不错的选择...xmlHttpRequest 接着我们来聊最后一个问题,脚本管理器是如何做到的可以跨域请求,实际上因为在前边我们明确了用户脚本浏览器当前的页面执行的,那么理所当然的就会存在同源策略的问题,然后脚本管理器只要声明了链接的域名...那么解决这个问题的方式也比较简单,很明显在这里发起的通信并不是直接从页面的window发起的,而是从浏览器扩展发出去的,所以在这里我们就需要讨论如何做到在用户页面与浏览器扩展之间进行通信的问题。

    23810

    CVE-2019-12592:印象笔记Chrome扩展漏洞分析

    Evernote的代码注入链是从扩展的manifest (manifest.json)开始的,其中BrowserFrameLoader.js content脚本会被注入到所有页面和frame。...由于注入到frame的敏感性,只有这一个脚本使用了all_frames来减少攻击面。内容脚本的主要的主要目的是作为扩展的C2服务器来加载其他必需的代码到页面。...对通信信道来说,脚本使用通过postMessage API的Windows消息机制(Windows Messaging)。...最后,因为提供有效URL给扩展域名(chrome-extension://...)的_getBundleUrl函数的逻辑检查和输入检查不当,研究人员发现URL的第一部分可以被handler的resourcePath...用户可以复制chrome://extensions/?id=pioclpoplcdbaefihamjohnefbikjilc到Chrome扩展来检查是否是最新版本,并确保版本号大于7.1.1。

    97230

    糖大夫--测量流程性能监控自动化方案设计

    ,而测血糖页面(单Activity+Fragment)注册了对应的Handler,并在Handler.handleMessage回调函数,处理各类页面跳转等页面切换操作 通过采血加入测试模拟代码拿到采血注册的...那么现在又遇到新的问题,测试模拟代码采血内部执行,很容易拿到采血注册的Handler对象,但是测试代码不在采血内部,并且Activity的创建是由系统完成的,如何拿到测量Activity实例内的...对于自动化脚本来说,它并不关心通信的细节,而且如果暴露了通信细节,反而会加大自动化脚本的开发难度,所以通过封装成SDK的形式来屏蔽通信细节,自动化脚本只需要关注业务即可 SDK设计 sdk设计,把一次通信流程抽象为的...,从而导致自动化脚本crash 糖大夫APP内测试接口设计 糖大夫APP这一侧,结合已有工具并考虑到后续糖大夫项目会加入越来越多的自动化,通信的接口会越来越多,这一部分必须要易扩展,易维护 通过代码分层设计...接口的复合类型,考虑到序列化/反序列化操作难以程度,读取/解析效率,以及后续的可扩展性,选用了json这一常见数据交换方式作为通信协议载体(json和String可以很容易相互转换,json增加一个字段后

    84960

    30分钟开发一款抓取网站图片资源的浏览器插件

    你将收获 如何快速上手浏览器插件开发 浏览器插件开发的核心概念 浏览器插件的通信机制 浏览器插件的数据存储 浏览器插件的应用场景 开发一款抓取网站图片资源的浏览器插件 正文 开始正文之前,我们先来看看笔者总结的概览...不能直接使用script脚本,需要用引入脚本文件的方式.如下: <!...3.1 popup和background相互通信 由官方文档可知popup可以直接访问background的方法,所以popup可以直接与其通信: // background.js var getData...(); bgObj.getData(); // 访问bg的函数 复制代码 3.2 popup或者background和content_script通信 这里我们使用chrome的tabs API,如下...这里我们主要关注popup.js和content_script.js, popup.js主要用来获取从content_script传过来的图片数据,并展示popup.html,另外又一个需要注意的是当页面没有注入生成按钮时

    1.3K10
    领券