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

认识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.8K40

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

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

    82010

    浏览器架构的温故知新

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

    16110

    Chrome扩展程开发初探

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

    11010

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

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

    4.9K20

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

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

    1.4K31

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

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

    42811

    Tampermonkey的安装与使用

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

    2.4K40

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

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

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

    深入理解浏览器原理

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

    快速上手:如何开发一个实用的 Edge 插件

    在日常浏览网页时,背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片,并希望背景图片设置能够持久保存,本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。...background.js 在background.js文件中,我们监听插件的安装事件,并初始化默认背景设置。...加载插件到Edge浏览器 打开Edge浏览器,进入edge://extensions/页面。 开启“开发者模式”。 点击“加载已解压的扩展”按钮,选择插件文件夹。...四、总结 通过这篇文章,我们创建了一个自定义背景图片的Edge插件,并学习了如何将背景设置保存在插件的存储中,以便长期使用。我们还介绍了插件的发布流程,让你可以将插件分享给更多的用户。...后续扩展 背景上传功能:可以加入上传背景图片的功能,允许用户直接从本地选择图片作为背景。 其他定制选项:支持更多的背景特效,例如背景模糊、视频背景等。

    23110

    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。

    1.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('外部触发成功'); //返回一个内容到发送消息的回调函数中

    53140

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

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

    1.9K20
    领券