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

Chrome扩展:从Background.js注入到选项卡中的Javascript即使选项卡重新加载也会继续运行。如何让注入的javascript只运行一次?

要让注入的JavaScript只运行一次,可以使用Chrome扩展的消息传递机制来实现。具体步骤如下:

  1. 在Background.js文件中使用chrome.tabs API来监听选项卡的加载事件,当选项卡加载完成时,向选项卡发送一条消息。
代码语言:txt
复制
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status === 'complete') {
    chrome.tabs.sendMessage(tabId, {action: 'runOnce'}, function(response) {
      // 接收来自选项卡的响应消息
    });
  }
});
  1. 在注入到选项卡中的JavaScript文件中,接收来自Background.js的消息,并根据消息执行相应的操作。同时,在第一次运行后,将自身从消息监听列表中移除,以确保只运行一次。
代码语言:txt
复制
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'runOnce') {
    // 执行只需要运行一次的操作

    // 将自身从消息监听列表中移除
    chrome.runtime.onMessage.removeListener(arguments.callee);
  }
});

这样,当选项卡加载完成时,Background.js会向选项卡发送消息,注入的JavaScript会接收并执行相应的操作。在第一次运行后,自身会从消息监听列表中移除,确保只运行一次。

推荐腾讯云相关产品:云服务器(ECS)和云函数(SCF)。

  • 云服务器(ECS)是一种弹性可扩展的计算服务,可提供稳定、可靠、安全和高性能的云计算能力,适用于网站托管、应用程序部署、服务器备份、大数据分析等场景。详情请访问:腾讯云服务器(ECS)
  • 云函数(SCF)是一种事件驱动的无服务器计算服务,可帮助您快速构建和部署云原生应用程序。它支持多种编程语言和触发器,无需管理服务器,灵活高效。详情请访问:腾讯云云函数(SCF)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

猜测 browser_action 适用于用户需要点击图标后在弹窗操作场景 page_action 试用与在后台运行,重要工作是监听用户行为插件 官方建议:如果要实现功能针对某一个页面有用则建议使用...page_action 否则使用 browser_action 8. background 用来定义后台脚本部分 扩展是基于事件程序,这些事件包括导航新页面、删除书签、或者关闭选项卡,...content_script 在一个特殊环境运行,可以称之为隔离环境,在这里可以访问所注入页面的DOM,但是不能访问里边任何 javascript 变量和函数,反之,页面js 不能访问...允许用户在调用扩展时临时访问当前活动选项卡, background 后台权限,可以用来增加Chrome 运行时间,即开机即运行(虽然是不可见) bookmarks 书签操作权限 browsingData...、修改、重新排列选项卡 webNavigation 请求进行过程操作权限 webRequest | webRequestBlocking 开放 正在运行请求 拦截、阻塞、或修改权限 15. web_accessible_resources

2.4K20

认识Chrome扩展插件

3、扩展如何工作 扩展是基于 HTML、JavaScript 和 CSS 等 Web 技术构建。它们在单独沙盒执行环境运行,并与 Chrome 浏览器交互。...对于开发和测试,您可以使用扩展开发者模式将这些“解压”加载Chrome ,或者直接拖动crx文件管理扩展插件页面。...、background.js、content_script.js 下图展示他们之间关系,以及如何通信 (图片来源网络,侵删) 运行三个进程: 扩展进程(Extension Process)...和popup.html, backgrount.html没有任何内容,是通过background.js创建生成,当浏览器打开时,自动加载插件background.js文件,它独立于网页并且一直运行在后台...渲染进程主要运行Web Page,当打开页面时,会将content_script.js加载注入该网页环境,它和网页引入Javascript一样,可以操作该网页DOM Tree,改变页面的展示效果

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

    右上角菜单->更多工具->扩展程序可以进入 插件管理页面,可以直接在地址栏输入 chrome://extensions 访问。 ?...开发,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R即可,以防万一最好还把页面刷新一下。...配置,background可以通过page指定一张网页,可以通过scripts直接指定一个JS,Chrome自动为这个JS生成一个默认网页: { // 一直常驻后台JS或后台页面 "background...://extensions 页面按下Ctrl+R重新加载插件,然后关闭再打开开发者工具即可,无需刷新页面(而且刷新页面不刷新开发者工具的话是不会生效)。...是针对插件全局即使你在background中保存数据,在content-script能获取到; chrome.storage.sync可以跟随当前登录用户自动同步,这台电脑修改设置自动同步其它电脑

    11.6K40

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

    Chrome扩展开发技能要求同创建Web应用程序相同Web技术编写,也就是作为前端程序员最为熟悉前端开发三件套,HTML、CSS 和 JavaScriptChrome扩展API?...它还必须位于扩展程序根目录。清单记录重要元数据,定义资源,声明权限,并标识哪些文件在后台和页面上运行 2 content scripts 内容脚本在网页上下文中执行 Javascript。...有多种类型事件,例如导航新页面、删除书签或关闭选项卡。...打开Chrome扩展程序(chrome://extensions/) 打开开发者模式 加载已解压扩展程序(包含清单文件文件夹) PS:插件开发过程中会多次修改,在修改后需要在浏览器扩展程序重新刷新后生效...总结 Chrome扩展开发入门指南就先介绍这么多,这三个案例包含了Chrome扩展开发几个重要概念,更多Chrome扩展开发学习可以通过阅读官方文档,当然包括这三个案例,好了动手操作一下吧。

    79510

    浏览器架构温故知新

    这也是本文由来之一,作为对runtime一次实例分析。 浏览器架构经历了单进程浏览器多进程浏览器转变。...页面或插件崩溃只会影响其特定进程,从而确保了其他页面和浏览器稳定性。同时,在呈渲染进程运行 JavaScript 可以隔离其影响。...为了安全起见,Chrome 在沙箱模式下为每个选项卡创建了一个单独渲染进程。 GPU 进程最初是为了3D CSS 效果,后来扩展绘制网页和 Chrome UI 界面。...渲染过程负责运行网页,打开页面时,contentscript.js被加载注入网页环境,操作类似于 JavaScript,操作 DOM 树并改变显示。...它表示通过 DOM 操作注入页面 JavaScript。内容脚本虽然能够操作 DOM,但由于访问限制,DOM 不能直接调用它。这种限制在事件绑定是显而易见

    13210

    Chrome扩展程开发初探

    下面正式进入正题,如何开发 Chrome 拓展。 准备 首先你需要具备一些知识:HTML 、CSS 、 JavaScript 等。其次需要了解 Chrome 拓展开发规范和API。...内容脚本: content_scripts:定义内容脚本,这些脚本将注入匹配网页运行。内容脚本可以修改网页内容或监听网页事件。...Chrome 扩展安全性设计确实不允许在 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展功能。Chrome 扩展通过内容安全性策略来限制可以在页面上执行脚本。...; }); }); background background.js 文件是 Chrome 扩展后台脚本,用于处理长期运行任务、事件和状态管理。它在浏览器后台运行,并且在浏览器启动时加载。...数据注入:在页面加载时向页面注入自定义 HTML、CSS 或 JavaScript,改变页面的外观或行为。 内容修改和过滤:根据特定规则修改页面内容,过滤广告、隐藏特定元素或修改网页样式。

    7710

    JavaScript 开发者需要了解15个 DevTools 技巧

    首先, DevTools 菜单 More tools 子菜单打开 Coverage 。重新加载页面,面板将用条形图显示未使用代码百分比: ?...DevTools 允许脚本被黑盒化,因此即使你选择进入调试器某个函数,它们不会在调试器打开。...使用条件断点 单击 Sources 面板打开文件行号添加一个断点。它会在执行这一行时候暂停脚本,这样你可以单步执行代码来检查变量,调用堆栈等。...断点有的时候并不好用,例如,如果在运行 1000 次循环最后一次循环报错了。这时你可以添加一个条件断点,它仅在满足特定条件时才触发断点,例如 i > 999 。...这些请求显示在 DevTools Network 面板,可以使用 XHR 按钮进行过滤。 DevTools 显示了很多信息,但是有时你需要重新运行一次 Ajax 调用。

    4.8K20

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

    如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行Chrome浏览器 上扩展程序,比如说vue-devtool。..."icons": { // 图标,一般偷懒全部用一个尺寸没问题 "16": "img/icon.png", // 扩展程序页面上图标 "32":..."css": ["css/custom.css"], "run_at": "document_start" }, ] 直接将脚本注入页面...,但是可以包含CSS文件,但是在注入CSS文件时,要小心,否则会覆盖网页原本样式。...content-scriptsJS程序和原始页面共享DOM,但是和原始页面的JS不是在同一个环境下运行,所以我们是无法访问到原始页面定义变量因为是是注入页面,所以在安全策略上不能访问大部分

    1.4K31

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

    谷歌浏览器插件开发是指开发可以在谷歌浏览器运行扩展程序,可以为用户提供额外功能和定制化体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。...动态配置注入 在特定时刻才进行注入,比如点击了某个按钮,或者指定时刻 需要在popup.js或background.js执行注入代码。...第一次情况用户进行选择,是进行更换还是保留原来配置。 很多插件都是使用newtab进行自定义打开tab页,比如掘金浏览器插件,打开新页面就是掘金网站插件[6]。...通过这些方法,您可以内容脚本向扩展程序发送一次性 JSON 可序列化消息,或者扩展程序向内容脚本发送。如需处理响应,请使用返回 promise。...": "devtools.html", } devtools.html引用了devtools.js,如果写了其他内容不会展示 <!

    34311

    Tampermonkey安装与使用

    /,可指定) @homepage, @homepageURL, @website and @source 在选项页面使用作者主页,用于脚本名称链接到给定页面。...也就是说即是’白名单‘也是’黑名单‘那么默认为’黑名单‘ 第三方链接 @require 指向在脚本本身开始运行之前加载和执行 JavaScript 文件。...脚本可以有任意数量@require 键。每个 @require 在安装脚本时下载一次,并与脚本一起存储在用户硬盘驱动器上。指定 URL 可能与安装脚本 URL 相关。...无论如何,在给定注入时刻之后发生所有 DOMNodeInserted 和 DOMContentLoaded 事件都被缓存并在注入时传递给脚本。...@run-at context-menu 如果在浏览器上下文菜单单击该脚本(仅限基于 Chrome 桌面浏览器),则会注入该脚本。

    2.3K40

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

    scripts -- 内容脚本 Content scripts 脚本是指能够在浏览器已经加载页面内部运行 javascript 脚本。...微格式数据 我们可以这样理解它,在页面加载完毕之后,我们扩展程序向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问 web 页面的详细信息。...以我上面的 URLHelper 为例子,在这个扩展,当我点击扩展程序界面刷新页面按钮时候,扩展界面的 DOM 上将修改后参数取出拼好,并且通过 Chrome 消息传递机制 传递给 Content...事件页面在需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在目的在于,在扩展整个生命周期内需要长时间管理一些任务或状态。...runtime.getBackgroundPage 以我上面的 URLHelper 为例子,在这个扩展,我使用是持续运行后台网页,当浏览器页面刷新第一次注入 Content Script 时,获取到当前页面

    1K20

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

    在我们印象,它就像跑在浏览器应用,可以把浏览器想象成手机,那么插件就像是应用,我们Chrome应用商店中下载,然后安装到Chrome浏览器,就可以在浏览器中进行运行了。...我们看看官方解释: Chrome Extension是一个小软件程序,它可以用来定义浏览器浏览体验,用户可以根据个人需求或者偏好定制Chrome浏览器功能和行为,主要使用技术栈是HTML、Javascript...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,改变页面的展示效果

    1.8K40

    深入理解浏览器原理

    Chromium为多进程架构,用户启动运行浏览器后,先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成栅格化,最后完成GPU展示。...而页面渲染完成后,浏览器如何响应页面操作事件进行了深入介绍。良心推荐!...,实现了浏览器选项卡呈现内容: HTML:实现Web平台规范,HTML规范(DOM、CSS、Web IDL) JavaScript:嵌入V8并运行JavaScript 网络:底层网络堆栈请求资源...限制因设备内存和CPU功率而异,但当Chrome达到限制时,它会在一个进程开始同一站点运行多个选项卡 图片引自Mariko Kosaka《Inside look at modern web browser...UI线程停止选项卡加载转圈。 8. 导航其他站点 导航完成后,再次将不同URL放到地址栏导航,浏览器检查当前渲染网站beforeunload事件。

    4.6K31

    Chrome扩展开发入门体验

    ****前言**** Chrome浏览器扩展开发算是相当简单,基本只要掌握HTML+CSS+Javascript,即可快速开发一个属于你Chrome插件!...,就是扩展图标~~~ popup.html 点击扩展图标,弹出面板页面(如果在manifest.json配置了default_popup为该文件的话) popup.js popup...,它定义了扩展需要向 Chrome 申请权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications.../public/js/background.js"] } } chrome_url_overrides chrome_url_overrides 属性可以自定义页面替换 Chrome 相应默认页面...background顾名思义呢就是扩展程序后台脚本,该脚本在程序运行之后一直处于后台运行状态。记录常用API。

    1K40

    每天都在用浏览器,你知道它是如何工作吗?

    Chromium为多进程架构,用户启动运行浏览器后,先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成栅格化,最后完成GPU展示。...而页面渲染完成后,浏览器如何响应页面操作事件进行了深入介绍。良心推荐!...,实现了浏览器选项卡呈现内容: HTML:实现Web平台规范,HTML规范(DOM、CSS、Web IDL) JavaScript:嵌入V8并运行JavaScript 网络:底层网络堆栈请求资源...限制因设备内存和CPU功率而异,但当Chrome达到限制时,它会在一个进程开始同一站点运行多个选项卡 图片引自Mariko Kosaka《Inside look at modern web browser...UI线程停止选项卡加载转圈。 8. 导航其他站点 导航完成后,再次将不同URL放到地址栏导航,浏览器检查当前渲染网站beforeunload事件。

    2.2K20

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

    原文:此政策涵盖您扩展程序页面,包括 html 文件和服务人员;具体不是很明白,但是参数值得是self,即当前自己 "extension_pages": "script-src 'self...,扩展程序管理界面的插件那个“背景页”将变成“Service Worker”,改动之后background.js将和浏览器完全分离,即无法调用window和ducoment对象 //可以看介绍:..."service_worker": "background.js" }, //注入脚本,值是个数组对象,可以有多个对象 "content_scripts": [ //每个对象代表一个注入配置...('触发成功了'); //返回一个内容发送消息回调函数 }); //发送消息,触发上面的onMessage chrome.runtime.sendMessage('', {text: '我是个测试内容..., sendResponse) { console.log(request.text); //打印出来值:“我是个测试内容” sendResponse('外部触发成功'); //返回一个内容发送消息回调函数

    46740

    在Salesforce Lightning Experience(闪电体验)提高性能和速度

    由于客户端设备和远程web服务器之间延迟问题;或客户网络拓扑,如虚拟专用网络,在Salesforce环境重新路由客户org之前,需要通过公司办公室或数据中心路由通信。...使用带有消耗大量CPU或内存插件或扩展web浏览器。 同时运行太多浏览器选项卡。每个选项卡消耗内存和CPU周期。...Chrome一直是最快闪电体验浏览器,而ie浏览器通常是最慢重新启动浏览器或设备: 每周重新启动浏览器和客户端设备一次可能会有所帮助。运行各种应用程序客户端设备或浏览器可能比需要时间更长。...禁用Aura调试模式: 您组织可能已经启用了Aura调试模式,以便更容易地在Lightning组件调试JavaScript代码。但是运行Aura调试模式降低闪电体验性能。...在第一个选项卡上显示最需要信息,并将辅助信息移动到后面的选项卡上。将不太重要组件移动到一个或多个Lightning页面选项卡之后。不在主选项卡组件不会在初始页面加载呈现,而是按需呈现。

    1.9K20

    Google图解:输入 URL 按下 “Enter”,Chrome 干了什么?

    在这篇文章,我们将重点讲解用户请求网站,以及浏览器如何呈现网页部分,这个操作被称为导航。...因为此处传递是一个数据流,渲染器进程可以继续数据流接收 HTML 数据。一旦浏览器进程监听到渲染器进程已经确认提交,一次导航就算完成了,接下来就是文档加载阶段。...此时,UI 线程隐藏选项卡加载进度图标。 这里 “完成” 之所以加引号,因为客户端 JavaScript 仍然可以加载额外资源,并在此之后呈现新视图。...需要注意,Service Worker 是在渲染器进程运行 JavaScript 代码,但是当导航请求发起时,浏览器进程如何知道该站点有 Service Worker 呢?...例如,更新部分数据而不是完整文件。 小结 在本篇文章,我们研究了在导航过程,执行流程以及响应头和客户端 JavaScript 等 Web 应用程序代码,如何与浏览器进行交互。

    1.9K30
    领券