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

如何添加第二个图标到谷歌chrome扩展与点击不同的行动?

要添加第二个图标到谷歌Chrome扩展并实现点击不同的行动,可以按照以下步骤进行操作:

  1. 在扩展的清单文件(manifest.json)中添加第二个图标的定义。在"browser_action"或"page_action"字段下添加一个新的"default_icon"字段,并指定第二个图标的路径。例如:
代码语言:json
复制
"browser_action": {
  "default_icon": {
    "16": "icon1.png",
    "48": "icon2.png",
    "128": "icon3.png"
  }
}

上述代码中,"16"、"48"和"128"分别表示图标的尺寸,"icon1.png"、"icon2.png"和"icon3.png"分别是第一个图标、第二个图标和第三个图标的文件路径。

  1. 在扩展的背景脚本(background script)中监听图标的点击事件,并根据点击的图标执行不同的行动。可以使用Chrome扩展的chrome.browserAction.onClicked.addListener()方法来监听点击事件,并在回调函数中编写相应的逻辑。例如:
代码语言:javascript
复制
chrome.browserAction.onClicked.addListener(function(tab) {
  // 判断点击的是哪个图标
  if (tab.icon === "icon1.png") {
    // 第一个图标的行动逻辑
    // ...
  } else if (tab.icon === "icon2.png") {
    // 第二个图标的行动逻辑
    // ...
  } else {
    // 其他图标的行动逻辑
    // ...
  }
});

上述代码中,根据tab.icon的值来判断点击的是哪个图标,然后执行相应的行动逻辑。

  1. 在扩展的清单文件中注册背景脚本。在"background"字段下添加背景脚本的文件路径。例如:
代码语言:json
复制
"background": {
  "scripts": ["background.js"]
}

上述代码中,"background.js"是背景脚本的文件路径。

完成以上步骤后,重新加载或更新扩展,就可以在Chrome浏览器的工具栏中看到第二个图标了。当点击不同的图标时,会触发相应的行动逻辑。

注意:以上步骤是基于Chrome扩展开发的一般做法,具体实现可能会因个人需求和扩展的功能而有所差异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

那些有趣实用 Chrome 扩展神器

谷歌浏览器一直是我推荐浏览器,之前也写过几篇文章: 如何让你搜索更高效 实用油猴脚本推荐,让你谷歌浏览器更强大 谷歌浏览器安装 Chrome 扩展越来越多,怎么管理?...Chrome 浏览器扩展神器油猴 请停用以开发者模式运行扩展程序?搞定谷歌浏览器插件弹窗 上不了谷歌如何安装 Chrome 扩展?.../detail/nooboss/aajodjghehmlpahhboidcpfjcncmcklf ,安装Chrome扩展方法见之前文章 上不了谷歌如何安装 Chrome 扩展?...打开一篇文章,然后点击扩展图标会跳转到详情页,点击scroll start 页面会自动下拉。 ?...• 脱机浏览备份数据 • 将备份数据导出为 Excel 文件 • 将备份数据中图片上传到 Cloudinary 云存储 • 迁移备份数据当前豆瓣帐号 点击新建任务,选择备份项目,我这里选豆邮

1.9K21

中国用户也能同步 Chrome 书签了

之前也体验过一些通过 GitHub/Gitee 进行谷歌浏览器书签同步小插件,但总体操作起来有点麻烦。...它功能和 Chrome 自带同步功能完全一样,当用户添加、修改或删除了书签时,自动同步云端。当不同电脑登录同一个账户时,它们书签列表会自动合并。...此时会弹出对话框,提示“添加Chrome™书签同步”,点击添加扩展程序”按钮,此时扩展程序页面中会多了一项:Chrome™书签同步。 此时扩展已经安装成功。为了方便使用,可以把它固定工具栏中。...选择“扩展程序”图标,选择 Chrome书签同步 “固定”按钮,此时工具栏中就会添加 Chrome书签同步 标签。...使用方法 使用方法非常简单,点击 Chrome 浏览器工具栏上Chrome书签同步图标,弹出登录框。使用微信扫一扫,即可登录,并自动同步数据云端,无需手动干预。

5.9K11
  • Postman 安装及使用入门教程(我主要使用接口测试)

    浏览器,然后右上角,三个点(x关闭浏览器下面),更多工具,扩展程序,点击,可以看到谷歌访问助手,然后将这个助手打开,就可以使用谷歌应用商店了。...如果还是不能打开谷歌应用商店,可以参考上面的链接,使用下载好,然后使用加载已经解压扩展程序。然后呢,你可以去设置里面,然后拉到最下面,然后点击高级,找到无障碍,然后打开Chrome网上应用店。...然后右上角,搜索图标,搜索,Postman即可。搜索以后,第一个就是Postman interceptor。然后点击添加Chrome。会弹出一个弹出框,点击添加扩展程序。...然后等个几十秒,会弹出已经添加,在右上角,小人图标的左边即可看到。然后点击一下postman图标点击打开,显示on一侧,就可以进行使用了。...Add-ons应该是一些教程啥点击Newman可以打开一个网页。 ?  可以重点看看,这个文档,对你应该又很大帮助:会打开一个网页在chrome,然后可以看到各种如何使用。 ?

    2.7K40

    极力推荐谷歌浏览器插件

    安装方法:在谷歌浏览器右上角设置里面,点击更多工具,点击扩展程序,在里面右上角打开开发者模式,将.crx文件直接拖动到页面里面即可安装。 Top 1....享受没有恼人广告网络世界。 Top 4. Google 翻译 浏览网页时可轻松查看翻译版本。此扩展程序将按钮添加到浏览器工具栏。每当您要翻译访问页面时,请单击翻译图标。...该扩展程序还会自动检测您所在页面的语言是否不同于您用于Google Chrome界面的语言。如果是这样,则横幅会显示在页面顶部。单击横幅中翻译按钮,以使页面上所有文本都以新语言显示。...安装这个插件后,点下插件按钮就能解决了 ① 需要解除限制时,点击Enable Copy图标,此时图标会从浅灰色变为深灰色,当前网页和该网站下所有网页都被解除限制。...② 再次点击图标会变回浅灰色,以后再打开该网站网页时,将不会被自动解除限制。 ---- Top 13.

    2.9K21

    谷歌浏览器油猴插件安装教程(超详细),让你浏览器更加强大

    打开Chrome插件伴侣,然后点击选择插件,选择我们第二步下载Tampermonkey.crx,再接着,点击提取插件内容桌面,静待几秒钟,就将插件成功提取到我们桌面了。...最后一步,这个时候,就是将油猴添加到我们浏览器了。按照上述方式进入扩展程序界面,接着,点击加载已解压扩展程序,选择第二部提取出来文件夹,这里就大功告成了!...可以看到,浏览器右上角会多出油猴图标。 左键点击图标,选择管理面板,可以看到已经安装第三方扩展程序。...如何通过油猴安装第三方扩展程序 其实,非常简单,你只要进入你想安装第三方插件网址,例如这个跳过网站等待、验证码及登录,接着点击一下安装此脚本,等待一下,就可以在油猴管理面板中看到我们新安装插件了...资源提供 最后,我把下载谷歌浏览器油猴插件、Chrome插件伴侣和提取出来可以直接使用油猴插件包在这里提供给大家百度云地址,验证码:hs5p。

    42.1K30

    「译」如何用原生JS打造一款简易谷歌插件

    如果你对插件有自己想法、只是想知道应该向已有项目文件中添加什么,从而让其运行在谷歌浏览器中的话,你可以跳到自定义mainfest.json文件和图标的部分。...有许多不同类型插件,有些插件仅在某种特定条件下才会激活,比如当你在商店结账页面的时候;有些插件仅在你点击图标后才会弹出;有些则在你每次打开新标签页时候才会出现。...接着,添加代码行以告诉谷歌浏览器如何操作这个插件。...切记图标尺寸为128x128像素,然后另存为名称iconpng文件,HTML文件、CSS文件、JS文件和Json文件放在同一个文件夹里。...在创建了自己插件并且通过测试之后,你便可以申请一个开发者账号并将该应用发布谷歌拓展程序商店。这篇教程将指导你如何发布你插件。

    1.6K50

    2021新鲜出炉网页自动化神器

    插件完以后,进入开发者扩展程序,可以看到已安装Automa 0.5.1。...打开浏览器,然后点击扩展黑色三角图标,然后就会出现提示框, 然后你点击类似瞄准镜,就可以控件定位,你点击类似房子图标,进入automa页面,至于详细操作我就不说了,你们自己操作下,我觉得这个亮点...无法多条使用,代码无法拓展,使用场景有限,离实际自动化还有很大距离; 谷歌开发者工具record(Chrome Recorder): 谷歌浏览器版本一定要大于96,我使用是97谷歌浏览器开发版本...3.脚本可编辑,易于理解和扩展,脚本是使用Puppeteer写; 整体来讲,两款工具各有特色,都是不用写脚本,但还是chrome recorder 这个工具靠谱,为啥,因为起码第一个背景是谷歌...,第二个实用稳定性;第三个就是目前第一版chrome recorder 可以很快运用于临时性重复工作场景;总之仁者见仁,智者见智,我只是从我观点跟大家介绍下新工具,让大家有个简单了解。

    68440

    Pocket重建您专注力

    可以访问下面地址进行查看 https://getpocket.com/add Pocket如何保存 四、举个栗子-谷歌浏览器中使用Pocket: 谷歌浏览器中如何更方便使用pocket呢?...第一步:我们需要科学上网进入谷歌网上扩展程序 第二部:搜索Pocket将其添加Chrome就可以了。...添加好了以后,我们就可以在浏览器右上角位置,看到如下图所示扩展程序图标了(当然我们也可以鼠标右键,有一个Save To Pocket点击也可以保存),后面我们只要浏览想看文章、视频、网页我们只需要点击一下这个图标就好了...,当图标亮了就表示把保存成功了,如下: 那么既然我们保存了,如何进行查看呢?...我们在新开一个窗口,点击下图这个图标,就会自动进入Pocket了。 五、补充-关于Pocket标签 Pocket中可以保存内容进行编辑归类,添加标签,这样更方便以后查找 ?

    59541

    Infinity插件 让Chrome浏览器实现添加10+N个快捷方式(不限制)

    下载安装 1.1 下载 1.2 解压zip 1.3 安装 1.4 为扩展程序添加快捷键 二、基本使用 2.1 编辑图标 2.2 弹出工具功能 2.3 添加网站 总结 ---- 前言 Chrome新标签页是指在打开谷歌浏览器时候...,如果没有设置主页而显示默认界面,或者用户点击Chrome标签按钮产生一个新浏览器初始界面,在该界面中用户可以重新打开一个新网址或者操作一些Chrome应用,如果没有安装任何Chrome插件的话...1.3 安装 打开chrome浏览器(图中是最新版chrome),右上角设置->更多工具->扩展程序 点击右上角启动开发者模式 将解压出来crx文件,直接拖入浏览器窗口中,...会自动弹出是否添加扩展程序,点击添加就OK了 打开一个浏览器新窗口就看见添加扩展程序后效果,点击保持现状 1.4 为扩展程序添加快捷键 再介绍一下如何扩展程序添加快捷键,方便我们随时调出扩展程序功能...,点击左上角标红框处 点击进入快捷键设置窗口中 通过按键盘方式为对应扩展程序设置快捷键 二、基本使用 2.1 编辑图标 右键单击图标即可编辑或删除已有的图标 2.2 弹出工具功能

    1K20

    请停用以开发者模式运行扩展程序?搞定谷歌浏览器插件弹窗

    关于谷歌浏览器之前写过很多实用扩展: 那些我常用 Chrome 扩展 那些我常用 Chrome 扩展(二) 那些我常用 Chrome 扩展(三) 那些实用 Chrome 扩展神器 那些实用...Chrome 扩展神器(二) Chrome 浏览器扩展神器油猴 Chrome 浏览器扩展神器暴力猴 如何Chrome 扩展备份你 QQ 空间相册 想方便快捷分享/收藏图片?...,现在它也学谷歌开发了在线冲浪游戏,直接打开 edge://surf/ 开始玩。 ? 如果你上不了谷歌,手动安装了扩展(参考之前文章上不了谷歌如何安装 Chrome 扩展?)...替换谷歌浏览器安装目录下chrome.dll(公众号内回复 谷歌 获取) ? 点击继续,再次重启浏览器后就不再出现烦人请停用以开发者模式运行扩展程序 这个弹窗了。 ?...点击拖动到谷歌浏览器弹窗地方,软件会自动捕获信息上传。 ? ? 内容都自动填好了,确定即可。 ?

    1.8K20

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

    相信使用Chrome(谷歌浏览器)小伙伴们都在用Chrome扩展插件(Chrome Extension),类似一键翻译、批量下载网页图片、OneTab、甚至大名鼎鼎 ”油猴” 等。...但是有时候,我们需要一些Chrome应用市场上没有的特定功能插件,例如任务提醒、报表自动生成、内部数据系统交互数据分析或上传下载等。...在manifest.json文件中,可以配置点击插件图标时弹出小窗口页面。这里配置了index.html页面。...使用chrome.actionAPI 控制 Google Chrome 工具栏中扩展程序图标。...chrome.tabs.create({url: window.location.href}); 至此,基础谷歌插件纯前端表格控件应用就介绍这里啦,快来开发属于自己插件吧。

    3.3K10

    chrome插件开发教程

    尤其Chrome本身是可以登录,登录后你所有的插件都会自动同步每一个登录后Chrome,非常方便啊。...Web Developer 安装Web Developer扩展后,会在浏览器工具栏中添加一个按钮,点击该按钮,会弹出各种Web开发工具。...JavaScript Errors Notifier 安装该扩展后,会在Chrome地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。...Window Resizer 此扩展可以调整浏览器窗口大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同屏幕分辨率下测试网站布局。...如果是在Chrome控制台里资源选项里查看代码则推荐使用Chrome自带"pretty print"功能,也就是点击"{ }"图标

    1.7K30

    数栈技术干货:从01实现谷歌插件开发探索及应用

    ~ 一、前言 笔者之前一直想了解一些关于谷歌插件相关知识,希望通过谷歌插件可以更好认识谷歌调试工具,同时也想着可以使用谷歌插件去写一些小工具,既学习了新东西,又有一定趣味性。...default_popup 可配置点击图标后会出现一个小窗口,这里可以做一些临时性操作 2)permissions { ......点击加载已解压程序按钮即可加载本地谷歌插件,开发时候代码如果有更新的话,需要刷新已加载插件,点击关闭后再开启,不必刷新开发页面。 ?...因此在学习过程中,笔者就在想谷歌浏览器插件翻译工具是如何实现呢?...此时面板和划词翻译面板都已经有了,再考虑一下如何实现 popup 脚本 content_script 脚本之间通信。

    1.1K20

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

    谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行扩展程序,可以为用户提供额外功能和定制化体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。...开发者可以利用这些技术在浏览器中添加功能、修改现有功能或者网页进行交互。...谷歌浏览器插件可以实现各种功能,例如添加工具栏按钮、修改网页内容、捕获用户输入、后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器各种功能和数据,实现各种定制化需求。...点击图标可以看到如下popup页面。...,有2个入口 1:点击插件详情,找到扩展程序选项入口 image.png 2插件图标点击右键,选择 ‘选项’ 菜单 image.png 可以看到设置option.html页面 <!

    37211

    使用 Google Publisher Toolbar 扩展管理站点 AdSense 广告

    先看看谷歌官方对这个扩展简述: Google 发布商工具栏(Google Publisher Toolbar)是一款 Chrome 扩展程序,允许您在 Chrome 浏览器中浏览自己网站同时查看关于您帐号最新信息...所以截止今天这个扩展可以关联谷歌服务就是 AdSense 和 Analytics 两个,今天我们就主要说说 AdSense 运用。...,不会安装可以自行百度脑补一下,安装完成后在 Chrome 浏览器地址栏右边会出现一个蓝色图标点击后就会出现一个让你选择关联哪个谷歌服务账号菜单,如上图所示,点击 Google AdSense...通过右键点击扩展图标进入扩展“选项”后还可以设置需要启用添加“广告信息叠加层”域名,如下图: ? 这样就可以有针对性分析调整自己站点 AdSense 广告了。牛逼吧?...最后再说一下,点击 Google Publisher Toolbar 扩展图标默认显示是你当前 AdSense 账户广告收入概览,强大吧!

    1.3K20

    使用 Google Publisher Toolbar 扩展管理站点 AdSense 广告

    先看看谷歌官方对这个扩展简述: Google 发布商工具栏(Google Publisher Toolbar)是一款 Chrome 扩展程序,允许您在 Chrome 浏览器中浏览自己网站同时查看关于您帐号最新信息...从上图我们可以看到这个扩展能够关联谷歌几个平台账号,不过从 2018 年 7 月份开始这个扩展已经停止了对 DoubleClick 支持了,如下图: 所以截止今天这个扩展可以关联谷歌服务就是...,不会安装可以自行百度脑补一下,安装完成后在 Chrome 浏览器地址栏右边会出现一个蓝色图标点击后就会出现一个让你选择关联哪个谷歌服务账号菜单,如上图所示,点击 Google AdSense...通过右键点击扩展图标进入扩展“选项”后还可以设置需要启用添加“广告信息叠加层”域名,如下图: 这样就可以有针对性分析调整自己站点 AdSense 广告了。牛逼吧?...最后再说一下,点击 Google Publisher Toolbar 扩展图标默认显示是你当前 AdSense 账户广告收入概览,强大吧!

    1.4K30

    油猴插件-百度网盘

    一:首先安装插件 插件名为:油猴 这里简单说一下,Google浏览器如何安装,其他也大同小异。 点击浏览器右上角,然后点击设置,扩展程序。...重点来了,只有在谷歌商店里面有的标准扩展程序,谷歌浏览器才会允许使用,第三方扩展程序是不允许,那这个时候,我们油猴就派上用场,它使得第三方扩展程序能在谷歌浏览器中使用,它其实就是管理第三方扩展程序...打开Chrome插件伴侣,然后点击选择插件,选择我们第二步下载Tampermonkey.crx,再接着,点击提取插件内容桌面,静待几秒钟,就将插件成功提取到我们桌面了。...最后一步,这个时候,就是将油猴添加到我们浏览器了。按照上述方式进入扩展程序界面,接着,点击加载已解压扩展程序,选择第二部提取出来文件夹,这里就大功告成了!...可以看到,浏览器右上角会多出油猴图标。 左键点击图标,选择管理面板,可以看到已经安装第三方扩展程序。

    1.4K30

    能说会道爱办公——“别人家Chrome插件到底怎么做

    根据相关数据显示,谷歌Chrome浏览器目前已达近七成市场占有率,成为浏览器“霸主”。...大家选择Chrome,除了是因为性能优越以及强大兼容性之外,Chrome充足扩展插件,可以让我们浏览器成为一个“百宝箱”。...相信对于大家对于Chrome插件应该不陌生了,多余的话就不多赘述,我们直接开启插件开发入门分享以及教大家如何实现将“Excel”集成Chrome插件。...我们可以看到这份json文件定义了一些基本字段,包括插件名称、描述、版本等。 2、给我们插件添加上一个符合插件定位图片。放置在default_icon字段下,可以配置不同尺寸icon。...在添加前,我们需要在manifest.json中声明右键菜单权限。 然后在我们js文件中调用Chrome给我们提供接口,例如 我们还可以在icon字段添加我们想要实现右键菜单图标

    91530

    从零实现Chrome扩展

    从零实现Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为软件程序,例如我们常用TamperMonkey、Proxy SwitchyOmega、AdGuard...但是无论如何谷歌都准备逐步废弃v2而使用v3,那么我们在这里也是基于v3来实现Chrome扩展。.../public/popup.html", inject: false, }), ], 实际上我们dev模式生成代码都是在内存当中,而谷歌扩展是基于磁盘文件,所以我们需要将生成相关文件写入磁盘当中...popup: 这个模块是扩展弹出层界面,可以通过点击扩展图标在浏览器中弹出,用于显示扩展一些信息或操作界面。...devtools: 这个模块可以扩展Chrome开发者工具功能,可以添加面板、修改现有面板行为等。

    51720

    上不了谷歌如何安装 Chrome 扩展

    可以看到扩展安装好了 ? 右上角有扩展图标了,开始备份网页吧如何备份可能被删公众号文章和网页 ?...谷歌商店安装 在国内谷歌商店默认是打不开,所以这里分享一个谷歌访问助手(公众号内回复 谷歌 获取),安装这个扩展后就能上谷歌商店直接安装Chrome扩展了。...分享谷歌助手扩展同样使用上面的方法来安装,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情情况下添加或者程序包无效。...先把文件后缀名.crx 改成 .rar或者.zip,然后解压到一个文件夹,再打开扩展程序chrome://extensions/ ,点击加载已解压扩展程序。 ?...选择刚才解压出文件夹,确认新增扩展程序就安装好了。 ? 可以看到谷歌助手扩展安装好了。 ? 然后就可以打开谷歌了 http://google.com/ ?

    1.5K20
    领券