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

Chrome扩展程序在Background.js中注册事件

在Chrome扩展程序中,Background.js是一个重要的文件,它负责处理扩展程序的后台任务。在Background.js中注册事件可以让您的扩展程序在特定事件发生时执行相应的操作。以下是一些常见的事件及其描述:

  1. chrome.runtime.onInstalled:当扩展程序被安装或更新时触发。
  2. chrome.tabs.onUpdated:当标签页的状态发生变化时触发,例如加载完成或者URL地址发生变化。
  3. chrome.windows.onFocusChanged:当活动窗口发生变化时触发。
  4. chrome.browserAction.onClicked:当用户点击扩展程序的浏览器动作图标时触发。
  5. chrome.commands.onCommand:当用户触发指定的快捷键时触发。

以下是一个简单的示例,展示了如何在Background.js中注册事件:

代码语言:javascript
复制
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

在这个示例中,当用户点击扩展程序的浏览器动作图标时,扩展程序会在当前标签页的背景颜色上添加一层红色。

推荐的腾讯云相关产品:

  1. 腾讯云扩展程序开发工具:提供了一套完整的扩展程序开发工具,帮助开发者快速构建扩展程序。
  2. 腾讯云云开发:提供了一套云原生开发工具,帮助开发者快速构建、部署和管理应用程序。
  3. 腾讯云API网关:提供了一个安全、稳定、高可用的API网关服务,帮助开发者管理API接口。

产品介绍链接地址:

  1. 腾讯云扩展程序开发工具:https://cloud.tencent.com/product/tcb
  2. 腾讯云云开发:https://cloud.tencent.com/product/tcb
  3. 腾讯云API网关:https://cloud.tencent.com/product/apigateway
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Edge安装Chrome扩展程序

/www.microsoftedgeinsider.com/en-us/download/ ,下载Edge的CAN版本 (Logo为金色配色), 并完成安装 打开允许Edge从其它商店安装扩展程序的按钮...从Chrome商店安装扩展程序 打开https://zhaoolee.gitbooks.io/chrome/content/ 寻找自己喜欢的扩展程序, 文章底部获取地址并安装, markdown...-5f0f22.html 小结 Edge可以安装绝大多数Chrome商店扩展, 但Chrome的谷歌开发App程序, 类似Secure Shell App, 目前是无法安装的, 新版...Edge使用了Chrome的Chromium内核, 可以兼容安装Chrome生态的各种应用程序,为Edge未来的发展带来了无限可能~ 谷粒-Chrome插件英雄榜 本文属于谷粒...-Chrome插件英雄榜文集的一部分, 为了集合更多的程序员和工具爱好者, 将谷粒-Chrome插件英雄榜维护下去, 我已将谷粒-Chrome插件英雄榜 文集的所有内容托管到Github, 项目地址https

3K40

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

page_action 否则使用 browser_action 8. background 用来定义后台脚本部分 扩展是基于事件程序,这些事件包括导航到新页面、删除书签、或者关闭选项卡,...扩展在他们的后台脚本监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件后,会使用指定的指令响应...(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了 content_script 或者其他扩展调用了 sendMessage...是否是持久的,一般为 false, 某些特殊情况需要参考文档 } } 事件过滤器,有些事件支持事件过滤,比如选项卡的切换可以监听 // background.js chrome.webNavigation.onCompleted.addListener...开放 正在运行请求的 拦截、阻塞、或修改的权限 15. web_accessible_resources 指定打包资源的的路径字符串数组,这些资源是扩展是可用了,例如 content_script

2.1K20

用 Vue 开发自己的 Chrome 扩展

但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方。 本教程,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。...后台脚本允许扩展对特定的浏览器事件做出反应,例如创建新选项卡。 为了演示这些概念,让我们先写一个“Hello,World!” Chrome 扩展。...background 允许我们注册一个后台脚本, scripts 后面的数组列出。... src 文件夹还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏,会看到我们的扩展程序的新图标(也被称为 browser action)。这就是从此文件夹拿到的。...总结 本教程,我重点介绍了 Chrome 扩展程序的主要部分,并展示了如何用在 Vue.js vue-web-extension 样板构建扩展程序,最后讲解了如何将扩展上传到 Web Store

2.7K30

Chrome插件开发教程

通过阅读本教程,你能够:了解浏览器器插件,这里专指 Chrome Extension(CE)的基本知识和运行原理了解如何开发CE的界面和逻辑调试插件,根据错误信息做出修复什么是浏览器插件浏览器插件是一种可增强网页功能的嵌入程序...2.选中界面右上角的开发者模式3.点击左上角的加载已解压的扩展程序,并选中刚才的插件文件夹插件已经成功载入。可以点击扩展程序按钮,鼠标移动到插件右侧的固定按钮,固定到标签栏里。...注册 background.js它是一种后台脚本,浏览器会在插件安装或重新加载时扫描它并初始化(事件的监听等)。它是整个插件的重要组成部分。必须在manifest里配置。..." }}复制代码同时插件目录添加background.js文件,包含以下代码:chrome.runtime.onInstalled.addListener(() => { console.log(...document.querySelector('#container').innerHTML = contentHTML});复制代码上述代码先从storage里读取history内容,再将内容组装成html插入到文档

1.3K10

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

在这些文件,有一个manifest.json文件,它是扩展的描述文件,定义了扩展的名称和版本号等信息。...每一个扩展都有一个被浏览器运行的背景页,此外还有事件页面,背景页面是一直都是激活状态,而事件页面只是触发事件的时候才会激活,因此为了节省内存和提高浏览器的性能,尽可能选择事件页面。..."devtools_page": "devtools.html" 我们devtools.html只需要添加一个js引入语句就可以。...我们可以操作用户的书签和浏览记录 我们可以控制下载,管理下载内容 我们可以监听网络请求,监听事件响应 我们可以修改界面样式,可以添加自定义css 我们可以页面添加想要的元素 总之,chrome几乎为我们提供了完整控制浏览器的扩展...扩展的调试 我们本地开发好扩展之后,我们可以通过本地浏览器进行调试。 首先,我们需要先进入扩展程序页面,打开开发者模式 然后,我们可以通过选择加载已解压的扩展程序加载我们的扩展

34020

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

的微格式数据 我们可以这样理解它,页面加载完毕之后,我们的扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问的 web 页面的详细信息。...chrome扩展程序将后台网页分为两种类型: 1.持续运行的后台网页 2.事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...事件页面只需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...它的主要功能及适用场景,大致如下: 1.事件页面监听的某个事件触发 2.应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 3.内容脚本或其他扩展程序发送消息 4.扩展程序的其他视图调用了...第一次发布扩展程序,谷歌会收取 $5 开发者注册费用,之后可以发布 20 个扩展程序

91320

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

我们印象,它就像跑浏览器的应用,可以把浏览器想象成手机,那么插件就像是应用,我们从Chrome应用商店中下载,然后安装到Chrome浏览器,就可以浏览器中进行运行了。...3.2 Chrome扩展插件的核心机制 Chrome扩展插件中比较核心的几个概念:Extension Page、background.js、Content_script.js ,它们什么时机触发,扮演着什么角色...1)扩展进程运行Extension Page,Extension Page主要包括backgrount.html和popup.html: backgrount.html没有任何内容,是通过background.js...例如我们开发工作,经常需要频繁的清除浏览器缓存,每次都需要先找到清除按钮,弹出对话框,进行确认,操作很繁琐,如果开发一个chrome扩展插件,就可以轻松实现一键快捷清除浏览器Cookie等缓存,可以参考...document, 因此无法扩展中直接获取某个标签页面的dom元素,但是可以通过发送事件请求来实现: chrome.tabs.sendRequest(tab_id, { hello: "

1.7K40

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

谷歌浏览器插件开发是指开发可以谷歌浏览器运行的扩展程序,可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。...动态配置注入 特定时刻才进行注入,比如点击了某个按钮,或者指定的时刻 需要在popup.js或background.js执行注入的代码。...通过这些方法,您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息,或者从扩展程序向内容脚本发送。如需处理响应,请使用返回的 promise。...something with response here, not outside the function console.log(response); })(); 接收消息使用onMessage 扩展程序和内容脚本中使用相同的代码...{ "permissions": ["contextMenus"] } background.js添加创建菜单的代码 let menu1 = chrome.contextMenus.create

20211

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

如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...description": "插件的描述", "icons": { // 图标,一般偷懒全部用一个尺寸的也没问题 "16": "img/icon.png", // 扩展程序页面上的图标..."48": "img/icon.png", // 显示扩展程序管理页面上 "128": "img/icon.png" // 安装和Chrome Webstore...content-scripts的JS程序和原始页面共享DOM,但是和原始页面的JS不是同一个环境下运行的,所以我们是无法访问到原始页面定义的变量的因为是是注入到页面的,所以安全策略上不能访问大部分的...": "我是pageAction", "default_popup": "popup.html" } 可以控制是否运行此插件,例如只在打开百度时运行此插件,否则就置灰 // 组件安装完成之后注册监听函数

1.3K31

VC++MFC程序如何注册/注销ActiveX控件(.OCX)

MFC程序如何注册/注销ActiveX控件(.OCX) VC++ 2009-07-29 22:25   阅读83   评论0 字号: 大大 小小 程序注册ActiveX控件(...FARPROC lpDllEntryPoint;          lpDllEntryPoint = GetProcAddress(hLib,_T("DllRegisterServer"));   //获取注册函数...=NULL)   //调用注册函数DllRegisterServer          {                   if(FAILED((*lpDllEntryPoint)()))                   ...;          }          else                    return FALSE ; } //---------------------------------- 程序中注销...lpDllEntryPoint;          lpDllEntryPoint = GetProcAddress(hLib,_T("DllUnregisterServer"));        //获取注册函数

1.6K30

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

这个还是比较重要的,不同的配置项版本,配置项文件有略微的差别,中文开发文档给的例子还是1,但是最新的官方已经是3了。这个配置时还是要注意下保持版本一致的。...actiondefault_icon是指本扩展浏览器的图标,我这里用了一个和我头像一样的png,default_title是浏览器扩展图标的title。...background.js代码: chrome.runtime.onInstalled.addListener(() => { chrome.notifications.create(null,...(这个是小意思了,很简单) 加载扩展: demo做完了就可以加载到chromechrome中找到扩展程序(chrome://extensions/),打开开发者模式,加载已解压的扩展程序,然后选择我们扩展的根目录即可...image.png 加载成功后执行了background.js,弹出桌面通知。 image.png 百度上随便搜索一个视频,打开包含视频的页面。

1.3K60

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

chrome扩展程序页加载我们的文件目录 即可 2.png 然后我们启用插件 随手打开一个页面就发现我们的插件已经生效了 3.png 4.png 第二步 本地创建 websocket 的服务...这个主要功能就是 Chrome 插件向页面注入脚本 第一步的操作中正是该文件别的页面控制台中打印出了我们期望的 log content-scripts 和 原始页面共享 DOM,但是不共享 JS...即可 我们这里将需要的 js 库 和 background.js 引入到 background.html <script src="....` window.open(backgroundURL) 现在我们只需要在 <em>background.js</em> <em>中</em>编写相应代码,建立长链接就可以了 // <em>background.js</em> class BackgroundService...插件的朋友们也可以尝试下 参考资料 【干货】<em>Chrome</em> 插件(<em>扩展</em>)开发全攻略(https://www.cnblogs.com/liuxianan/p/<em>chrome</em>-plugin-develop.html

1.4K20

Chrome Extension

注意千万不要将您的私有密钥包含在扩展程序! 创建包 进入以下URL,打开扩展程序管理页面:chrome://extensions 确保右上角的开发者模式复选框已选中....单击打包扩展程序按钮,出现一个对话框。 扩展程序根目录字段,指定扩展程序所在文件夹的路径,例如,C:\myext。(忽略其他字段,您第一次为一个扩展程序打包时不需要指定私有密钥文件。)...如果您今后需要做如下事情,您需要这一文件: - 更新扩展程序 - 将扩展程序上传至 Chrome 网上应用店 更新包 增加 manifest.json 的版本号。...进入如下 URL,打开扩展程序管理页面: chrome://extensions 单击打包扩展程序按钮,出现一个对话框。 扩展程序根目录字段中指定扩展程序所在文件夹,例如 C:\myext。...私有密钥文件字段,指定已生成的用于该扩展程序的 .pem 文件位置,例如 C:\myext.pem。

2.7K30

Chrome插件开发

Chrome 插件知识​ manifest.json​ 是manifest.json切记不要英文单词打错字,一定要有这个文件,且需要放在根目录上,否则就会出现未能成功加载扩展程序的错误。...background.html 和 background.js​ 可以理解为后台,同时这个页面会一直常驻在浏览器,而主要 background 权限非常高,几乎可以调用所有的 Chrome 扩展 API...inject.js​ 上文也说到了content是无法访问页面的 JS,可以操作 DOM,但是 DOM 却不能调用它,也就是无法 DOM 通过绑定事件的方式调用content的代码(包括直接写onclick...我的模板​ 关于 Chrome 的主要内容也就这些,实际开发如果有个模板就能大大方便开发,原文章该作者已经分享了有对应的源代码,这里放上我自写的 Chrome 模板编写过程。...Chrome 扩展搞完。

3.7K20

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

chrome扩展程序将后台网页分为两种类型: 持续运行的后台网页 事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...事件页面只需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...它的主要功能及适用场景,大致如下: 事件页面监听的某个事件触发 应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 内容脚本或其他扩展程序发送消息 扩展程序的其他视图调用了 runtime.getBackgroundPage...第一次发布扩展程序,谷歌会收取 $5 开发者注册费用,之后可以发布 20 个扩展程序 。 ? ?... chrome 浏览器访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下的扩展程序 (E),进入相同的页面)。

1.4K30

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

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。 ?...权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup可以直接通过chrome.extension.getBackgroundPage()获取background的...这是因为content-script有一个很大的“缺陷”,也就是无法访问页面的JS,虽然它可以操作DOM,但是DOM却不能调用它,也就是无法DOM通过绑定事件的方式调用content-script...的代码(包括直接写onclick和addEventListener2种方式都不行),但是,“页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求,那该怎么办呢?...首先,配置文件如下: { // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字 "omnibox": { "keyword" : "go" }, } 然后background.js注册监听事件

11.4K40

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

chrome扩展程序将后台网页分为两种类型: 持续运行的后台网页 事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...事件页面只需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,扩展的整个生命周期内需要长时间管理一些任务或状态。...它的主要功能及适用场景,大致如下: 事件页面监听的某个事件触发 应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 内容脚本或其他扩展程序发送消息 扩展程序的其他视图调用了 runtime.getBackgroundPage...第一次发布扩展程序,谷歌会收取 $5 开发者注册费用,之后可以发布 20 个扩展程序 。 ? ?... chrome 浏览器访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下的扩展程序 (E),进入相同的页面)。

1.8K30

小技巧 | Chrome 插件如何完成剪切板的操作!

之前写过一篇文章,谈到开发 Chrome 插件时常用的一些 Tips 干货 | 盘点 Chrome 插件开发那些关键的点!...background.js ,监听 Chrome 插件的安装事件,使用下面的语法创建一个右键菜单 语法: chrome.contextMenus.create({type:'normal',title...接着,为上面的右键菜单添加一个点击监听事件 PS:具体的处理后面会讲到 //background.js //右键菜单点击事件处理 chrome.contextMenus.onClicked.addListener...事件处理及消息通信 在上面的监听事件,我们添加一个函数用于调用接口获取数据 2-1 事件处理 //background.js ... function handle_menu_click(){...Content Script 添加一个消息监听用于处理 Background 发过来的消息 //Content Script //监听事件 try { chrome.runtime.onMessage.addListener

1.7K30
领券