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

Google Chrome扩展程序 - 单击工具栏图标时打开新标签页

创建一个 Google Chrome 扩展程序,当用户单击工具栏图标时打开一个新标签页,这是一个常见的需求。以下是一个简单的示例,展示了如何实现这一功能。

1. 创建项目结构

首先,创建一个新的文件夹来存放你的扩展程序文件。假设文件夹名为 my_extension,其目录结构如下:

代码语言:javascript
复制
my_extension/
├── manifest.json
└── background.js

2. 创建 manifest.json

manifest.json 文件是 Chrome 扩展程序的配置文件。创建 manifest.json 文件,并添加以下内容:

代码语言:javascript
复制
{
  "manifest_version": 3,
  "name": "Open New Tab Example",
  "version": "1.0",
  "description": "An example extension that opens a new tab when the toolbar icon is clicked.",
  "permissions": [
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    },
    "default_title": "Open New Tab"
  }
}

3. 创建 background.js

background.js 文件是扩展程序的后台脚本,用于处理图标点击事件。创建 background.js 文件,并添加以下内容:

代码语言:javascript
复制
chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: 'https://www.example.com' });
});

在这个示例中,当用户单击工具栏图标时,将打开一个新的标签页,并导航到 https://www.example.com

4. 添加图标

你需要为扩展程序提供图标。将图标文件(例如 icon16.pngicon48.pngicon128.png)添加到 my_extension 文件夹中。你可以使用任意图标,只需确保文件名和 manifest.json 中的配置一致。

5. 加载扩展程序

  1. 打开 Google Chrome 浏览器。
  2. 进入 chrome://extensions/ 页面。
  3. 打开右上角的“开发者模式”开关。
  4. 点击“加载已解压的扩展程序”按钮。
  5. 选择 my_extension 文件夹。

6. 测试扩展程序

加载扩展程序后,你应该会在工具栏中看到你的扩展程序图标。单击图标,应该会打开一个新的标签页,并导航到 https://www.example.com

代码解释

  • manifest.json
    • manifest_version:指定清单文件的版本,Chrome 扩展程序目前使用版本 3。
    • nameversiondescription:扩展程序的基本信息。
    • permissions:请求的权限,这里请求了 tabs 权限以便创建新标签页。
    • background:指定后台脚本,这里使用了 background.js 作为服务工作者。
    • action:定义工具栏图标的默认属性,包括图标和标题。
  • background.js
    • chrome.action.onClicked.addListener:添加一个事件监听器,当用户单击工具栏图标时触发。
    • chrome.tabs.create:创建一个新的标签页,并导航到指定的 URL。

通过以上步骤,你可以创建一个简单的 Chrome 扩展程序,当用户单击工具栏图标时打开一个新标签页。你可以根据需要进一步扩展和自定义这个示例。

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

相关·内容

极力推荐的谷歌浏览器插件

Google 翻译 浏览网页可轻松查看翻译版本。此扩展程序将按钮添加到浏览器工具栏。每当您要翻译访问的页面,请单击翻译图标。...该扩展程序还会自动检测您所在页面的语言是否不同于您用于Google Chrome界面的语言。如果是这样,则横幅会显示在页面顶部。单击横幅中的翻译按钮,以使页面上的所有文本都以新语言显示。...One Tab 当您发现自己有太多的标签单击OneTab图标,将所有标签转换成一个列表。当您需要再次访问这些标签,可以单独或全部恢复它们。...当您的标签位于OneTab列表,您将节省高达95%的内存,因为你将减少Google Chrome浏览器中打开标签的数量。 Top 8....② 再次点击图标会变回浅灰色,以后再打开该网站的网页,将不会被自动解除限制。 ---- Top 13.

2.9K21
  • Chrome Extension

    ": { // 覆盖浏览器默认的标签 "newtab": "newtab.html" }, // Chrome40以前的插件配置写法 "options_page...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样 如何优雅的调试 右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。...单击打包扩展程序按钮,出现一个对话框。 在扩展程序根目录字段中,指定扩展程序所在文件夹的路径,例如,C:\myext。(忽略其他字段,您第一次为一个扩展程序打包不需要指定私有密钥文件。)...进入如下 URL,打开扩展程序管理页面: chrome://extensions 单击打包扩展程序按钮,出现一个对话框。 在扩展程序根目录字段中指定扩展程序所在文件夹,例如 C:\myext。...单击打包扩展程序 发布包 将您创建 .crx 文件生成的私有密钥文件重命名为 key.pem。 将 key.pem 文件放在您的扩展程序根目录中。 将这一目录压缩为 ZIP 文件。

    2.8K30

    用 Vue 开发自己的 Chrome 扩展

    你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome标签 为了在打开选项卡迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。...注意:在你取得进展之前,请务必停用其他能够覆盖 Chrome 标签扩展程序。一次只允许一个扩展改变这种行为。 首先创建一个要显示的页面,而不是标签。我们称之为 tab.html。...你可以通过在 Chrome扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。 ? 重新加载扩展 现在,当你打开标签,你的自定义消息会出现。...如果你看一眼 Chrome工具栏,会看到我们的扩展程序图标(也被称为 browser action)。这就是从此文件夹中拿到的。...,并且每当你打开标签都会看到一个笑话。

    2.8K30

    开发中常用的一些Chrome插件介绍

    每个程序员都会有一套自己喜欢的,适用自己的提高工作效率的工具。之前每次换电脑总是要折腾一次,总会遗漏一些,这次就统一整理一下。这里主要介绍Chrome下的一些提高效率或者很好用的工具。...越多越耗内存,而OneTab的作用是最大限度的帮你节省内存空间,并减轻标签混乱现象,当您打开的网页非常多的时候,单击OneTab图标,将所有标签转换成一个列表。...当您需要再次访问这些标签,可以单独或全部恢复它们。...hl=zh-CN 代理设置:SwitchyOmega SwitchyOmega 是 Chrome & Firefox 浏览器上的一个代理扩展程序,可以轻松快捷地管理和切换多个代理设置。...让标签拥有多功能:Momentum Momentum是一款可以将chrome浏览器默认的标签替换成有显示时间、天气、美丽背景及待办事项提醒的多功能页面的谷歌浏览器插件。

    1.8K50

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

    从浏览器的菜单中选择“扩展程序”,打开扩展程序页面(点击 菜单 -> 更多工具 -> 扩展程序 ),如下图。...在扩展程序页面中,打开“开发者模式”开关,点击“重新加载”按钮,然后把第 1 步下载的文件拖拽当前页面。...此时会弹出对话框,提示“添加Chrome™书签同步”,点击“添加扩展程序”按钮,此时扩展程序页面中会多了一项:Chrome™书签同步。 此时扩展已经安装成功。为了方便使用,可以把它固定到工具栏中。...选择“扩展程序图标,选择 Chrome书签同步 的“固定”按钮,此时工具栏中就会添加 Chrome书签同步 的标签。...使用方法 使用方法非常简单,点击 Chrome 浏览器工具栏上的Chrome书签同步图标,弹出登录框。使用微信扫一扫,即可登录,并自动同步数据到云端,无需手动干预。

    5.7K11

    Ubuntu添加Chrome图标到启动器的正确姿势

    : 将Chrome设置为默认浏览器之后,无论点击什么链接都只是打开了一个空白的标签 启动器的图标右键点开之后只有 “标签 - Google Chrome” 一个选项,没有新建窗口或者是新建隐身窗口的选项...Launcher 上,在图标上右键——“锁定到启动器”,以后就可以简单地单击启动了。...使用这个命令启动Chrome并且把它锁定启动器之后,程序在 ~/.local/share/applications/ 里面创建了 google-chrome.desktop 文件。...当Chrome成为了默认浏览器,其它程序调用Chrome打开链接的时候,那个代表将要打开的链接的参数并没有没有传到 /usr/bin/google-chrome-stable 程序上,因此点击链接后打开的是一个空白的...发现了问题所在,我直接删除 ~/.local/share/applications/google-chrome.desktop ,这时候启动器上的图标消失了,重新在搜索框找到Chrome图标拖到启动器,

    2.9K10

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

    下载安装 1.1 下载 1.2 解压zip 1.3 安装 1.4 为扩展程序添加快捷键 二、基本使用 2.1 编辑图标 2.2 弹出工具的功能 2.3 添加网站 总结 ---- 前言 Chrome标签是指在打开谷歌浏览器的时候...,如果没有设置主页而显示的默认界面,或者用户点击Chrome标签按钮产生的一个的浏览器初始界面,在该界面中用户可以重新打开一个的网址或者操作一些Chrome应用,如果没有安装任何Chrome插件的话...,该页面显示的就是Chrome提供的默认标签,当然用户也可以选择在Chrome商店中搜索一款更加实用的标签插件来获得更加实用、个性化的标签 ---- 提示:以下是本篇文章正文内容,下面案例可供参考...,点击添加就OK了 打开一个浏览器新窗口就看见添加扩展程序后的效果,点击保持现状 1.4 为扩展程序添加快捷键 再介绍一下如何为扩展程序添加快捷键,方便我们随时调出扩展程序的功能,点击左上角标红框处...点击进入快捷键设置窗口中 通过按键盘的方式为对应的扩展程序设置快捷键 二、基本使用 2.1 编辑图标 右键单击图标即可编辑或删除已有的图标 2.2 弹出工具的功能 在设置界面可以设置自己想要的布局格式

    92920

    14 上线后不想让人看到源码怎么做?

    当调试vue项目,浏览器工具栏的Vue Devtools图标是点亮的,其它时间默认是灰色的。 如何安装 Vue Devtools?...安装步骤为: 克隆源码https://github.com/vuejs/vue-devtools至本地 安装模块依赖yarn install 编译yarn run build 在浏览器tab打开...chrome://extensions/ 勾选"开发者模式" 单击 "加载已解压的扩展程序", 并且选择刚才编译的项目其目录下的shells/chrome文件夹 关于 persistent 选项等 如果扩展程序不能正常工作...只有当设置为true,表示扩展程序在启动后会一直保持在系统内存中,直到扩展被卸载、禁用或浏览器关闭。...在sources面板中,单击暂停script按钮,有交互事情发生,即会打开vue.esm.js文件源码。 调试为什么可以看到源码?

    1.5K30

    安卓android版Chrome浏览器设置教程

    谷歌将在谷歌浏览器Chrome上推出“小程序”增强型网页应用( Progressive Web Apps,简称 PWA)。...8.卡片式标签&简版便签 设置>无障碍>关闭简化版标签 9.标签水平切换 chrome://flags/#enable-horizontal-tab-switcher 10.手势功能 chrome...下面是具体替换主页教程 准备工具: 1.电脑一台 2.聪明的你 3.电脑版Chrome浏览器并安装好Infinity插件(美化神器chrome标签—Infinity标签) 4.notepad++...加好标签的的图标后,点开右上角,点开我的又一个电脑和手机图标 ? ? 这里可以生成一个手机版的页面 ?...复制下面的地址就能打开手机标签,还可以同步,然后把这个地址设置成手机版Chrome浏览器的主页即可。 ?

    14.3K30

    你的浏览器,何必是浏览器

    Infinity Pro Infinity Pro标签是一款基于html5的Chrome扩展程序,非常的优雅、漂亮。   ...画中画播放   当网页中有视频播放,注意右上角工具栏的变化,你可以点击这个图标对视频进行控制!!!最常用的就是画中画播放功能了。...标签快捷键 快捷键 说明 Ctrl + n 打开新窗口。 Ctrl + shift + n 在隐身模式下打开新窗口。 Ctrl+Shift+O 打开书签管理器 Ctrl + t 打开标签。...(常用) Ctrl + j 在标签打开”下载内容”。(常用) Shift + Esc 打开 Chrome 任务管理器。 Ctrl + f 或 F3 打开关键字搜索框。...将网页链接拖拽到标签栏的空白位置 在标签打开网页。 按住 Shift 并点击网页链接 在新窗口中打开网页。 将标签拖出标签栏 在新窗口中打开网页。

    2.8K11

    OneTab一键分享Chrome当前打开的所有标签

    OneTab是Chrome的一款插件, 主要用来管理浏览器的标签,它有两个应用场景 应用场景一: 把多个Tab转换为一个列表 当你发现自己有太多的标签,单击OneTab图标,所有标签会转换成一个列表...,当你需要再次访问这些标签,点击OneTab图标唤出列表,点击列表恢复标签 当前我在浏览器打开了一组标签 ?...点击OneTab图标 ? 所有标签合并为列表(点击列表可恢复) ? 点击恢复页面(点击恢复标签后, 开启标签) ?...如果关闭了OneTab标签, 只需点击浏览器插件栏OneTab图标恢复即可!...Chrome官方下载地址 https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?

    2.3K30

    IDM是一款强大的下载工具 idm多个版本(电脑、手机、浏览器插件都有)

    第三步 打开扩展,点击获取Microsoft Edge扩展,在左上角输入框中搜索:infinity标签pro、tampermonkey、IDM 将三款插件获取,点击获取,稍等片刻弹出添加扩展程序,点击添加即可...安装infinity标签pro是非常又简洁又美观的一个插件。 安装tampermonkey插件,它是一款强大的脚本插件。...用安装infinity标签pro同样的方法,将其它两款插件安装完成。...如果视频,音乐上显示IDM图标,这证明此资源可下载 IDM应用,简单的图形用户界面对IDM用户友好且易于使用。而且还支持自定义软件界面,工具栏有几种不同的外观,它们具有不同的按钮样式。...在浏览器中单击下载链接,IDM将接管下载并加快下载速度。您不需要做任何特别的事情,只需像平常一样浏览Internet。IDM将捕获您的下载并加快下载速度。

    90440

    强烈推荐 10 款珍藏的 Chrome 浏览器插件

    02、Infinity 标签 Infinity 是一款标签,可以自由添加网站图标,云端高清壁纸,快速访问书签、天气、笔记、待办事项、扩展管理与历史记录。 ?...打开一个标签是不是有一种鸟语花香、赏心悦目的感觉了?...03、OneTab 我平常不是要写作嘛,就需要打开很多标签(全都是素材啊),密密麻麻的,有时候不小心污点了关闭,害得我从历史记录中找好久,差点要锤爆键盘。...当你发现有太多的标签单击地址栏右侧的 OneTab 小图标,就可以将所有的标签转换成一个列表。当需要再次访问这些标签,可以单独或全部恢复它们。 ?...10、SimilarSites - 发现相关网站 当访问任何(有点名气的)网站,点击 SimilarSites 小图标就可以获得与正在访问的网站相关的 10 个类似网站。 ?

    77321

    Chrome终于上线这项重磅功能,中国用户苦等多年!

    但在Chrome上,标签增多后,每个标签的宽度会自动缩小,用户无法阅读标题,甚至无法查看网站小图标。 随着标签打开数量的增加,顶部拥挤的标签栏会使它们难以区分,导致我们的效率降低。 ?...当打开标签页数量超过浏览器窗口的宽度,此功能可以让用户在标签栏滚动鼠标滚轮,找到想要的标签。 ?...这个功能非常适合喜欢同时打开数十个甚至数百个标签的用户,有助于解决谷歌浏览器在打开大量标签显示混乱的问题,进一步提升用户体验。...5、Last Tab 在谷歌浏览器中关闭最后一个标签,将自动打开一个标签,以防止整个浏览器窗口被关闭。...如需创建分组,则右键单击某一个标签,然后选择【添加到组】选项即可。 ? 标签悬停预览 在Chrome地址栏中输入 chrome://flags/#tab-hover-cards ?

    2.4K20

    ​17 款程序员神级 Chrome 插件,爱了爱了!

    标签管理 Momentum 【标签】 Tab Manager Plus 【标签管理器】 OneTab 【标签整理】 生产效率 Octotree 【GitHub 树形菜单】 划词翻译 JSON Formatter...推荐指数:⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/product-tool/13516.html 标签管理 Momentum 标签 Momentum 标签 Chrome...插件截图1 Momentum 标签 Chrome插件截图5 简介:每天都会更新一张令人惊叹的自然照片。...当您打开了许多选项卡和窗口,查找、关闭或切换到所需标签的时候,你可以考虑试试它。...当您发现自己有太多的标签单击OneTab图标,将所有标签转换成一个列表。当您需要再次访问这些标签,可以单独或全部恢复它们。

    70610

    Infinity New Tab:重新定义你的Chrome标签

    Infinity new tab 是一款实用又清新的 Chrome(谷歌浏览器)标签功能扩展,可以完美替代默认的标签。受插件作者邀请,我特意安装体验了一把 ,还是很不错的!...这个插件标签中有个 Gmail 的图标,第一次打开的时候,登陆你的 Gmail 邮箱,以后收到邮件的时候,就会在图标右上角显示出未读邮件数。这个功能还是很方便的。如图: ?...五.便捷收藏 当你浏览其他网页的时候,突然想把这个网站添加到标签中,这个时候你就可以用快速添加到标签的功能了,首先 Chrome 浏览的地址栏中你可以看到扩展图标,然后点击它,就会出现添加的小界面...,点击添加,就会添加到标签中。...下载 chrome 扩展包 下载地址 ii. 打开浏览器的【扩展程序】 ? iii、把下载的扩展包(Infinity.crx)拖拽到【扩展程序】(只能是这个页面) ?

    2.1K120

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

    如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...,一般偷懒全部用一个尺寸的也没问题 "16": "img/icon.png", // 扩展程序页面上的图标 "32": "img/icon.png",..."default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, // 当某些特定页面打开才显示的图标,例如vue-devtools...插件", // 图标悬停的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, tips:打开的任何页面都会运行插件程序...,否则就置灰 // 在组件安装完成之后注册监听函数 chrome.runtime.onInstalled.addListener(function() { // 在页面跳转,移除旧的规则加入的规则

    1.4K31
    领券