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

Chrome扩展-当本地html页面不在活动选项卡中时,background.js可以访问它吗?

当本地HTML页面不在活动选项卡中时,Chrome扩展的background.js无法直接访问该页面。background.js是Chrome扩展的后台脚本,它主要用于处理扩展的生命周期事件和后台任务,而不直接与页面交互。

然而,可以通过消息传递机制实现background.js与本地HTML页面之间的通信。具体而言,可以在background.js中使用chrome.runtime.sendMessage()方法发送消息,而在本地HTML页面中使用chrome.runtime.onMessage.addListener()方法监听消息,并在收到消息时执行相应的操作。

这种方式可以实现background.js与本地HTML页面之间的数据传递和交互。例如,可以在本地HTML页面中发送消息给background.js,请求执行某些操作或获取数据,然后background.js接收到消息后进行相应的处理,并通过chrome.runtime.sendMessage()方法将结果返回给本地HTML页面。

需要注意的是,为了使background.js能够与本地HTML页面进行通信,需要在扩展的清单文件(manifest.json)中声明相应的权限,例如:"permissions": ["tabs"]。

关于Chrome扩展的开发和消息传递机制,可以参考腾讯云的Chrome扩展开发文档和相关示例:

  1. 腾讯云Chrome扩展开发文档:https://cloud.tencent.com/document/product/862/37514
  2. Chrome扩展开发官方文档:https://developer.chrome.com/docs/extensions/
  3. Chrome扩展消息传递机制官方文档:https://developer.chrome.com/docs/extensions/mv3/messaging/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

html badges “徽章” 就是小图标上的一个标记,用来展示一些状态 7. page_action 代表可以在当前页面执行的操作,不活动显示灰色,对应接口 chrome.pageAction...在一个特殊的环境运行,可以称之为隔离环境,在这里可以访问所注入页面的DOM,但是不能访问里边的任何 javascript 变量和函数,反之,页面的js 也不能访问 content_script 的变量和函数...,可以针对当前活动选项卡运行,获取临时访问权限 permissions: ["tabs"] 编程方式注入会在 chrome.tabs.executeScript(tabId, details, callback...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作,默认为 true, chrome 检测到离线,程序会被高亮显示 14. permissions...允许用户在调用扩展临时访问当前活动选项卡, background 后台权限,可以用来增加Chrome 运行时间,即开机即运行(虽然是不可见的) bookmarks 书签操作权限 browsingData

2.2K20

如何实现一个谷歌浏览器插件

准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSS和JS等开发出来的web页面,用来增强浏览器的功能。..."default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, // 某些特定页面打开才显示的图标,例如vue-devtools...,但是也可以包含CSS文件,但是在注入CSS文件,要小心,否则会覆盖网页原本的样式。...content-scripts的JS程序和原始页面共享DOM,但是和原始页面的JS不是在同一个环境下运行的,所以我们是无法访问到原始页面定义的变量的因为是是注入到页面的,所以在安全策略上不能访问大部分的...插件", // 图标悬停的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, tips:打开的任何页面都会运行插件程序

1.4K31

【干货】Chrome插件(扩展)开发全攻略

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。 ?...扩展可以替代如下页面: 历史记录:从工具菜单上点击历史记录访问页面,或者从地址栏直接输入 chrome://history 新标签页:创建新标签的时候访问页面,或者从地址栏直接输入 chrome...devtools页面可以访问一组特有的DevTools API以及有限的扩展API,这组特有的DevTools API只有devtools页面可以访问,background都无权访问,这些API包括:...由于devtools本身就是开发者工具页面,所以几乎没有方法可以直接调试,直接用 chrome-extension://extid/devtools.html"的方式打开页面肯定报错,因为不支持相关特殊...tabs[0].id: null); }); } 获取当前选项卡id的另一种方法,大部分时候都类似,只有少部分时候会不一样(例如窗口最小化时) // 获取当前选项卡ID function getCurrentTabId2

11.5K40

认识Chrome扩展插件

扩展 API允许扩展代码访问浏览器本身的功能:激活选项卡、修改网络请求等。...对于开发和测试,您可以使用扩展开发者模式将这些“解压”加载到 Chrome ,或者直接拖动crx文件到管理扩展插件页面。...如果扩展感到满意,也可以打包并分享给小伙伴使用。 6、popup弹出窗口 popup.html可以在里面放置任何html元素,的宽度是自适应的。...和popup.html, backgrount.html没有任何内容,是通过background.js创建生成,浏览器打开,会自动加载插件的background.js文件,独立于网页并且一直运行在后台...渲染进程主要运行Web Page,打开页面,会将content_script.js加载并注入到该网页的环境和网页引入的Javascript一样,可以操作该网页的DOM Tree,改变页面的展示效果

1.1K10

Chrome扩展开发入门体验

****前言**** Chrome浏览器扩展开发算是相当简单的,基本只要掌握HTML+CSS+Javascript,即可快速开发一个属于你的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 相应默认的页面

1K40

用 Vue 开发自己的 Chrome 扩展

可以用你已经熟悉的 Web 技术(HTML、CSS 和 JavaScript)创建 —— 就像普通网页一样。但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方。...; 3}); 最后安装扩展程序。打开 Chrome 并在地址栏输入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。...你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome 的新标签页 为了在打开新选项卡迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。...你可以通过在 Chrome扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。 ? 重新加载扩展 现在,当你打开新标签页,你的自定义消息会出现。...样板文件将扩展构建到 dist 文件夹,它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

2.8K30

提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

它们在单独的沙盒执行环境运行并与Chrome浏览器进行交互。插件允许我们通过使用API修改浏览器行为和访问Web内容来扩展和增强浏览器的功能。...在manifest.json文件可以配置点击插件图标弹出的小窗口的页面。这里配置了index.html页面。...,的生命周期是插件中所有类型页面中最长的;这里设置background.js 用来作为后台管理,处理通知等、刷新、徽章等数据。...至于action配置之前也提到了,可以配置弹出页面,最后的permissions可以配置权限。 基础配置之后,就可以background.js来进行我们的处理啦。...此外还可以选择在浏览器选项卡打开任务列表。

3.3K10

浏览器架构的温故知新

网络进程检查请求的资源的本地缓存,如果找到该资源,则将其返回给浏览器进程。 如果不在缓存,网络进程将向 Web 服务器发起一个 HTTP 请求。...4 插件机制 使用插件,浏览器的操作比普通网页还要简单。...同时,存储进程为插件提供了本地存储功能,使用chrome.storage.local在chrome扩展本地存储和检索数据。...4.3.3 后台脚本 Chrome 扩展的后台脚本具有最长的生命周期,并且在浏览器打开连续运行。拥有广泛的权限,允许访问大多数 Chrome 扩展 API 和跨源请求,而不受 CORS 限制。...表示通过 DOM 操作注入到页面的 JavaScript。内容脚本虽然能够操作 DOM,但由于访问限制,DOM 不能直接调用它。这种限制在事件绑定是显而易见的。

9610

Chrome Extension

严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension) 什么叫Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,其实就是一个由HTML、...background的权限非常高, 几乎可以调用所有的Chrome扩展API(除了devtools), 而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS event-pages...然后找到extension目录 打包 您为扩展程序打包扩展程序将获得唯一的密钥对,扩展程序的标识符基于公钥的散列,私有密钥用来为每一个版本的扩展程序签名,必须严格保护,不能由公众访问。...注意千万不要将您的私有密钥包含在扩展程序! 创建包 进入以下URL,打开扩展程序管理页面:chrome://extensions 确保右上角的开发者模式复选框已选中....执行环境称为 isolated world, 和正常页面的 JS 不在相同环境 // 保证不同 script 不会冲突, 也不会和网页本身冲突 // 也说明互相无法访问或使用其中的变量或函数

2.8K30

15分钟手摸手教你写个可以操控 Chrome 的插件

> 然后在 chrome扩展程序页加载我们的文件目录 即可 2.png 然后我们启用插件 随手打开一个页面就发现我们的插件已经生效了 3.png 4.png 第二步 在本地创建 websocket...这个主要功能就是 Chrome 插件页面注入脚本 在第一步的操作中正是该文件在别的页面控制台中打印出了我们期望的 log content-scripts 和 原始页面共享 DOM,但是不共享 JS...但是这个功能足以让我们去操作目标页面background.js 是一个常驻的页面的生命周期是插件中所有类型页面中最长的,随着浏览器的打开而打开, 随着浏览器的关闭而关闭,所以通常把需要一直运行的...我们将相应的写在 background.js 即可 我们这里将需要的 js 库 和 background.js 引入到 background.html <script src="....` window.open(backgroundURL) 现在我们只需要在 <em>background.js</em> <em>中</em>编写相应代码,建立长链接就<em>可以</em>了 // <em>background.js</em> class BackgroundService

1.4K20

Chrome扩展开发入门

而提到 Chrome 就绕不开扩展,或者叫插件(Chrome Extension)。 可以从 应用商店下载安装。应用商店除了有 Chrome 扩展程序,也有丰富的 Chrome主题背景。...所以说,Chrome 扩展开发并不是什么新鲜玩意儿,只是一个挂载到 Chrome 浏览器上的一个“扩展”模块,比起微信小程序开发还简单。 这不就是网页应用?...注入的 js 代码能够操作页面 DOM,可以调用浏览器原生API,可以发起页面请求,但是具有独立的执行空间,也就是说注入的 js 和页面本身的js脚本不能够直接互相调用。...这段代码是位于“后台脚本”的一段代码,大概意思就是扩展安装加载完成之后将 color 变量存储在本地 storage 。...> 下面这段代码是弹窗 popup.js 文件的代码,点击按钮之后读取前面 background.js 设置的颜色值,并设置为 popup.html扩展弹窗模块)的背景色

3.9K30

如何快速地开发一个chrome扩展插件

chrome扩展结构 chrome扩展是以.crx结尾的安装包,如果你把下载下来,并把重命名为.rar压缩包文件,然后你就可以使用压缩软件对进行解压,加压之后,就会发现其实chrome扩展包里面就是一些...js,css,html文件,可以说你只要会写前端,那么开发一个chrome扩展插件将会非常容易。..."background": { "scripts": ["background.js"], "persistent": false/true } 当我们的扩展想要访问浏览器当前页面的dom..."devtools_page": "devtools.html" 我们在devtools.html只需要添加一个js引入语句就可以。...扩展的调试 在我们本地开发好扩展之后,我们可以通过本地浏览器进行调试。 首先,我们需要先进入扩展程序页面,打开开发者模式 然后,我们可以通过选择加载已解压的扩展程序加载我们的扩展

40020

写个自己的chrome插件

png", "128": "images/icon-128.png" } } 让当前网页加载一个脚本 content_scripts指定加载对应脚本js,css注意matches匹配的是当前访问的..." } } background.js与content.js通信 background.js在插件页面加载,background.js调用onMessage.addListener接收content.js.../popup.js"> 当你打开浏览chrome://extensions/然后添加插件04-demo 在打开一个测试页面 我通过插件的popup.js...与content.js通信,就可以修改我当前页面上的元素了 另外推荐一个chrome插件官方的例子chrome-extensions-samples[4],看完一些例子多插件哟更深刻的认识,在下一节里,...是独立于插件外部脚本,匹配对应网页可以利用content.js控制当前网页 background.js是运行插件增强js,我们可以在这background.js控制chrome插件,或者与popup.js

1.9K10

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

Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问可以获得更改网站的功能和行为。...内容脚本只能使用 Chrome API 的一个子集,但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...有多种类型的事件,例如导航到新页面、删除书签或关闭选项卡。...它可以使用所有的Chrome API,但不能直接与网页内容交互;这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件,例如弹出窗口、选项页面和其他 HTML 页面。...所有这些页面可以访问 Chrome API 实现阅读时长提示 通过开发chrome expansion实现在掘金文章页面提示读者完成阅读所需要的大概时间。

77610

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

1)扩展进程运行Extension Page,Extension Page主要包括backgrount.html和popup.html: backgrount.html没有任何内容,是通过background.js...创建生成,浏览器打开,会自动加载插件的background.js文件,独立于网页并且一直运行在后台,主要通过调用浏览器提供的API和浏览器进行交互; popup.html则不同,它有内容,是一个实实在在的页面...2)渲染进程主要运行Web Page,打开页面,会将content_script.js加载并注入到该网页的环境和网页引入的Javascript一样,可以操作该网页的DOM Tree,改变页面的展示效果...实例3:标签控制  使用chrome.tabs API与浏览器的标签系统进行交互,可以查询,创建、修改和重新排列浏览器的标签页;我们在使用浏览器,经常会打开很多标签页,显得很混乱,中途想要找打开的某个页面...如果对Chrome扩展插件熟悉,会发现Chrome就是为这量身定制,可以完美解决这些问题。 实现方案:  1)对页面涉及文案dom进行修改,绑定多语言key值。

1.7K40

chrome浏览器扩展v3版本配置项整理备忘

default_locale": "zh_CN", //内容安全政策,V2的value是字符串,V3是对象 "content_security_policy": { //原文:此政策涵盖您的扩展程序页面...js文件,v3是service_worker:'xxx',只能引入一个js,v3版最大的改动应该就是这里了,扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”,改动之后background.js.../ "background": { "service_worker": "background.js" }, //注入脚本,值是个数组对象,可以有多个对象 "content_scripts..., //什么时候注入的js脚本,document_start=页面加载开始,document_end=页面加载结束 "run_at": "document_end"...:chrome.action.onClicked.addListener, "action": { }, //通过网络访问的资源,v2是提供一个数组,v3得提供数组对象,每个对象可以映射到一组资源到一组

41840

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

安装油猴 以chrome浏览器扩展为例,点击这里先安装 安装完成之后可以看到右上角多了这个 image.png 2....登录时效只有2小,2小后,需要重新登录已无力回天 我们不好直接侵入各个系统去改造登录逻辑,改造其登录时效,但是却可以对登录页面(示例)做点手脚 image.png 最关键的是: 用户名输入框 密码输入框...分析和解决问题 通过上面的介绍您应该可以感觉到我们开发阶段遇到需要频繁切换账号做测试的烦恼,相对繁琐的ua生成过程导致了一定是个费时费力的麻烦事。...需求3:限定指定域,该ua才生效 需求4:使用到过期账号,可一键重新生成即可 为什么是chrome插件 浏览器中发送ajax请求的ua无法直接修改,但是chrome插件可以修改请求的ua(很重要的一点...热刷新 我们希望修改插件源代码进行打包之后,chrome插件对应的页面能主动更新。为什么叫热刷新而不是热更新呢?因为其实是全局刷新页面,并不会保存状态。

1.1K30

Chrome插件开发

Chrome 要求插件必须从Chrome 应用商店(需要翻墙)安装,其它任何网站下载的都无法直接安装,所以可以把crx文件解压,然后通过开发者模式直接加载。...background.htmlbackground.js可以理解为后台,同时这个页面会一直常驻在浏览器,而主要 background 权限非常高,几乎可以调用所有的 Chrome 扩展 API...inject.js​ 上文也说到了content是无法访问页面的 JS,可以操作 DOM,但是 DOM 却不能调用它,也就是无法在 DOM 通过绑定事件的方式调用content的代码(包括直接写onclick...,将对应的数据发送到对应的文件,主要也就如下四种通信方式: popup 和 background​ popup 可以直接调用 background 的 JS 方法,也可以直接访问 background...Chrome 扩展搞完。

3.8K20

Chrome扩展 实现自动页面Video下载 demo

background引入的 是一个常驻的页面的生命周期是插件中所有类型页面中最长的,随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background...background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置cors。...content_scripts就是本次开发的重点了,他是Chrome插件页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content_scripts我们可以实现通过配置的方式轻松向指定页面注入...当然还有popup即鼠标点击扩展弹出的页面,因为这次没用到,所以我没把这个配置项加进去。...(这个是小意思了,很简单) 加载扩展: demo做完了就可以加载到chrome,在chrome中找到扩展程序(chrome://extensions/),打开开发者模式,加载已解压的扩展程序,然后选择我们扩展的根目录即可

1.4K60

chrome插件 DIY

看完之后对chrome插件的基本配置和文件结构会有一个大致的认识,同时也学会了如何在chrome上加载自己在本地开发的插件。...chrome extention支持的扩展点以及扩展功能很多,对于初学者不可能一下子看完官方所有文档再去动手。而应该是先根据自己用过的插件,脑海中有个大致的印象:插件可以在哪些地方起到效果。...所以插件逻辑并不复杂,通常就将配置文件和插件代码直接放在同一层目录下。插件配置文件,配置了该插件扩展的描述信息、扩展的功能,以及插件的访问权限。...插件功能除了browser_action配置的popup页面外,还支持什么功能呢?用过鼠标手势类插件的肯定知道,插件可以访问和修改页面dom,因为这类插件本质就是在dom上绘制鼠标路径。..."background": { // 在浏览器运行环境运行的后台脚本,只要开启插件就会生效 "scripts": ["background.js"] } 了解了上面三种扩展点的配置方法后,

2.2K20
领券