开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在chrome浏览器中获取当前选项卡的URL和标题，并在用户单击我的扩展图标时显示它

在Chrome浏览器中获取当前选项卡的URL和标题，并在用户单击扩展图标时显示它，可以通过Chrome扩展的开发来实现。

首先，需要创建一个Chrome扩展项目，包括一个manifest.json文件和一个popup.html文件。

manifest.json文件是扩展的配置文件，需要在其中声明权限和指定扩展的图标、名称等信息。以下是一个示例的manifest.json文件内容：

{
  "manifest_version": 2,
  "name": "获取当前选项卡的URL和标题",
  "version": "1.0",
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

在上述示例中，我们声明了需要获取tabs权限，并指定了扩展的图标和名称。

接下来，在popup.html文件中编写扩展的弹出窗口内容。可以使用JavaScript来获取当前选项卡的URL和标题，并在用户单击扩展图标时显示它。以下是一个示例的popup.html文件内容：

<!DOCTYPE html>
<html>
<head>
  <title>获取当前选项卡的URL和标题</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1 id="title">标题</h1>
  <p id="url">URL</p>
</body>
</html>

在上述示例中，我们使用了一个h1元素来显示标题，一个p元素来显示URL，并引入了一个名为popup.js的JavaScript文件。

最后，在popup.js文件中编写JavaScript代码来获取当前选项卡的URL和标题，并在弹出窗口中显示它们。以下是一个示例的popup.js文件内容：

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  var tab = tabs[0];
  var title = tab.title;
  var url = tab.url;

  document.getElementById('title').textContent = title;
  document.getElementById('url').textContent = url;
});

在上述示例中，我们使用了chrome.tabs.query方法来获取当前活动的选项卡信息，并通过tab.title和tab.url属性获取标题和URL。然后，将它们分别设置到id为"title"和"url"的元素中。

完成以上步骤后，将manifest.json、popup.html和popup.js文件打包成一个压缩文件，然后在Chrome浏览器中打开扩展程序页面（chrome://extensions/），启用开发者模式，点击"加载已解压的扩展程序"按钮，选择打包的压缩文件，即可加载并使用该扩展。

当用户单击扩展图标时，弹出窗口将显示当前选项卡的URL和标题。

请注意，以上示例中的代码仅适用于Chrome浏览器，其他浏览器可能需要使用不同的API来实现相同的功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Chrome扩展开发入门体验

，就是扩展的图标～～～ popup.html 点击扩展图标，弹出的面板页面（如果在manifest.json中配置了default_popup为该文件的话） popup.js popup..."default_title": "默认标题", //鼠标hover是的标题 "default_popup": "popup.html" //单击图标popup出来的面板 },...，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications...，比较常用的是指定子属性 scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。...= 查看浏览器的工具栏我的插件dir-tree ?

1K4 0

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

在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的...pageAction(地址栏右侧) 所谓pageAction，指的是只有当某些特定页面打开才显示的图标，它和browserAction最大的区别是一个始终都显示，一个只在特定情况才显示。...而新版的Chrome更改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：...获取当前标签页ID 一般有2种方法： // 获取当前选项卡ID function getCurrentTabId(callback) { chrome.tabs.query({active: true...tabs[0].id: null); }); } 获取当前选项卡id的另一种方法，大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时） // 获取当前选项卡ID function getCurrentTabId2

11.4K4 0

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

自动启动DevTools 在开发的时候，一般都要需要启动浏览器，打开 DevTools ，并打开我们开发的 URL 。我们可以在浏览器启动命令中添加一些配置，整个过程可以在一次点击中实现自动化。...单击任何 JavaScript 文件，未使用的代码会用红条突出显示。 5. 找到DOM更改代码当事件被触发时，很难确定哪个函数负责更新特定的 HTML DOM 元素。...要在 Chrome DevTools 中停止无限循环，可以打开 Sources 面板，然后单击调试暂停图标以停止脚本。按住相同的图标，然后选择方形停止图标就可以停止脚本执行。 ? 12....启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件，而不是通过网络获取它。...文件图标显示为带有紫色的覆盖指示符： ? 它还将显示在 Overrides 选项卡和 localfiles 目录中。

4.7K2 0

Chrome Extension

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension) 什么叫Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、...，如：chrome.alarms bookmarks 操纵书签的API browserAction 获取扩展图标、标题、文字、弹出页等 commands 给扩展添加快捷键 contextMenus 添加选项到右键弹出菜单...管理扩展与应用 notifications 通知控制 pageAction 具体的页面下控制扩展图标、标题、文字、弹出页等相关内容 permissions 获取拥有的权限 power 请求系统常亮 runtime...单击打包扩展程序按钮，出现一个对话框。在扩展程序根目录字段中，指定扩展程序所在文件夹的路径，例如，C:\myext。（忽略其他字段，您第一次为一个扩展程序打包时不需要指定私有密钥文件。）...单击打包扩展程序发布包将您创建 .crx 文件时生成的私有密钥文件重命名为 key.pem。将 key.pem 文件放在您的扩展程序根目录中。将这一目录压缩为 ZIP 文件。

2.7K3 0

Google Earth Engine（GEE）——GEE最全介绍（7000字长文）初学者福音！

使用“获取链接”按钮与合作者和朋友共享脚本的唯一 URL 。您在代码编辑器中开发的脚本会发送到 Google 进行处理，生成的地图图块和/或消息会发送回以显示在“地图”和/或“控制台”选项卡中。...当按下“获取链接”按钮时，浏览器地址栏中将出现一个唯一链接。此链接表示按下按钮时编辑器中的代码。...当拥有 Earth Engine 帐户的人访问 URL 时，浏览器将导航到代码编辑器并复制创建链接时的环境，包括代码、导入、地图图层和地图位置。单击“获取链接”按钮将自动将脚本链接复制到剪贴板。...检查器选项卡 任务管理器旁边的检查器选项卡可让您以交互方式查询地图。当检查器选项卡被激活时，光标变成一个十字准线，当您单击地图时，它将显示光标下的位置和图层值。...Inspector 选项卡显示有关光标位置和光标下层值的信息。控制台选项卡 当您print()从脚本中获取某些内容时，例如文本、对象或图表，结果将显示在Console 中。

7401 0

使用 Tampermonkey 编写高级跨网站自动化任务脚本

不熟悉的读者，这里我借助官方对 TM 的介绍和教程帮助入门用户做以下介绍。...Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome、Microsoft Edge、Safari、Opera Next 和 Firefox。...TM 具有以下特点：方便的脚本管理：位于右上方的 TM 图标显示正在运行的脚本的数量，单击图标就可以看到正在运行的脚本和可能在这个网页上运行的脚本。...用户还可以通过在“脚本设置”选项卡的用户域白名单中添加“*”来白名单所有请求。注意：初始 URL 和最终的 URL 都会被检查，为了向后兼容 scriptish@domain 标记也会被解释。...回调函数的 remote 变量是显示此值是从另一个选项卡的实例修改的（true）还是在此脚本实例中修改的（false）。因此，不同浏览器选项卡的脚本可以使用此功能相互通信。

4.4K1 0

用 Vue 开发自己的 Chrome 扩展

; 3}); 最后安装扩展程序。打开 Chrome 并在地址栏中输入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。...你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。 ? 重新加载扩展现在，当你打开新标签页时，你的自定义消息会出现。...将Vue添加到扩展现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够：从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。...以良好的格式向用户显示该笑话。显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。显示一个按钮，供用户查看已收藏的笑话。...如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

2.7K3 0

HTML注入综合指南

但是，当客户端单击*显示为网站官方部分的*有效负载时，注入的HTML代码将由浏览器执行。...**存储HTML**的最常见示例是博客中的**“评论选项”**，它允许任何用户以管理员或其他用户的评论形式输入其反馈。现在，让我们尝试利用此存储的HTML漏洞并获取一些凭据。...** [图片] 在“ Repeater”选项卡中，当我单击**“ Go”**按钮以检查生成的**响应时，**我发现我的HTML实体已在此处**解码**为**HTML**： [图片] 因此，我处理了完整的...[图片] 反映的HTML POST 类似于“获取网页”，这里的**“名称”**和**“反馈”**字段也很容易受到攻击，因为已经实现了**POST方法**，因此表单数据将不会显示在URL中。...[图片] 让我们看一下它的代码，看看开发人员如何在屏幕上获取当前URL。在这里，开发人员使用PHP全局变量作为**$ _SERVER**来捕获当前页面URL。

3.6K5 2

最新Tampermonkey 中文文档解析（附基础案例和高级案例）

@icon, @iconURL and @defaulticon 低分率的脚本会在脚本管理列表上显示 @icon64 and @icon64URL 脚本icon 64*64 如果给了这个标签，但给了图标...，则图标图像将在选项页的某些位置缩放 @updateURL 更新脚本的地址，注意：只有存在@version标签才会去更新 @downloadURL 定义检测到更新时将从中下载脚本的URL。...如果用户单击此按钮，则将自动允许所有未来的请求。用户还可以通过在“脚本设置”选项卡的用户域白名单中添加“*”来白名单所有请求。...，并返回监听id ‘name’是被观察的变量回调函数的‘remote’变量是显示此值是从另一个选项卡的实例修改的（true）还是在此脚本实例中修改的（false）。...，聚焦的意思是直接显示 insert 插入一个新的tab在当前的tab后面 setParent 在tab关闭后重新聚焦当前tab 另外，新的选项卡将被添加。

4.8K1 1

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

如何实现一个谷歌浏览器插件一、什么是Chrome插件？ ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序，比如说vue-devtool。...准确的说，其实更应该叫做Chrome扩展，因为插件是更偏向于底层的技术。Chrome插件本质上来说，就是利用WEB开发技术，包括HTML、CSS和JS等开发出来的web页面，用来增强浏览器的功能。...": { "default_icon": "img/icon.png", "default_title": "这是一个示例Chrome插件", // 图标悬停时的标题...default_title": "这是一个示例Chrome插件", // 图标悬停时的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面.../** 获取当前选项卡id @param callback - 获取到id后要执行的回调函数 */ function getCurrentTabId(callback) { // 查询所有在当前浏览器打开的活动的

1.3K3 1

绕过 CSP 从而产生 UXSS 漏洞

转到包含上面显示的核心易受攻击的函数 popup.js 脚本文件，我们看到以下内容： ? 单击扩展程序的浏览器图标(浏览器的右上键)时会触发上述代码。...该扩展程序会在 Chrome 扩展程序 API 中查询当前标签的元数据。...-- 下图显示了单击扩展名图标时，我们的 payload 被触发： ? 现在可以在扩展程序的上下文中执行任意的 JavaScript，并且可以滥用扩展程序访问的任何扩展程序 API。...但是，它要求用户在我们的恶意页面上单击扩展图标。在构建漏洞利用时最好不要传达弱点的存在，因此我们会尝试使其不需要用户交互。...在示例中，要包含的资源是 popup.html 页面，该页面通常仅在用户单击扩展程序的图标时显示。通过 iframing 此页面以及之前的 payload，我们有一个无需用户交互的漏洞利用： ?

2.7K2 0

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

插件是基于Web技术构建的，例如HTML、JavaScript和CSS。它们在单独的沙盒执行环境中运行并与Chrome浏览器进行交互。...插件允许我们通过使用API修改浏览器行为和访问Web内容来扩展和增强浏览器的功能。...在manifest.json文件中，可以配置点击插件图标时弹出的小窗口的页面。这里配置了index.html页面。...使用chrome.actionAPI 控制 Google Chrome 工具栏中的扩展程序图标。...当通知时间到，在电脑右下角可以弹窗浏览器通知，通知我们待办数量。使用chrome.notificationsAPI 使用模板创建丰富的通知，并将这些通知显示给系统托盘中的用户。

3.2K1 0

【说站】win10系统打开网页不是私密连接怎么解决?

如果没有，您需要从Chrome中删除该扩展程序。 5、一些用户报告说 Rocket Tab扩展在他们的PC上引起了这个问题。...方法四：确保安装了最新的Windows更新如果您的所有浏览器中都显示打开网页不是私密连接，则可以通过安装最新的来修复它。...2、当“设置”选项卡打开时，一直向下滚动并单击“显示高级设置”。 3、在“隐私”部分中，单击“清除浏览数据”按钮。 4、在“从以下菜单中清除以下项目”中，选择时间的开始。...这很简单，您可以按照以下步骤操作： 1、打开设置选项卡，然后单击显示高级设置。 2、一直向下滚动，然后在“重置设置”部分中，单击“重置设置”按钮。 3、现在将出现一个确认对话框。...2、当“网络和共享中心”打开时，单击左窗格中的“更改高级共享设置”。 3、现在将显示“高级共享设置”窗口。关闭网络发现，文件和打印机共享以及公用文件夹共享。打开密码保护的共享。点击保存更改按钮。

10.4K2 0

网页截长图截屏Google Chrom 插件 FireShot 分享 3000万人使用的网页截图插件

要捕获某些内容，您可以单击Web 浏览器中的 FireShot 图标并选择要执行的捕获类型。捕获后，您可以在编辑器窗口中对其进行编辑，该窗口带有大量工具可供选择。...2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/ 3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到...Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。 ...4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。 ...5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角(如果有插件按钮的话)，如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件

3.8K2 0

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

default_popup 指定弹出的窗口，可以是任意 html badges “徽章” 就是小图标上的一个标记，用来展示一些状态 7. page_action 代表可以在当前页面执行的操作，不活动时显示灰色...当前扩展中的其他部分，例如弹窗中调用了 runtime.getBackgroundPage 后台脚本定义选项 { ......，可以针对当前活动的选项卡运行，获取临时访问权限 permissions: ["tabs"] 编程方式注入会在 chrome.tabs.executeScript(tabId, details, callback...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作，默认为 true, 当chrome 检测到离线时，程序会被高亮显示 14. permissions...允许用户在调用扩展时临时访问当前活动的选项卡， background 后台权限，可以用来增加Chrome 运行时间，即开机即运行（虽然是不可见的） bookmarks 书签操作权限 browsingData

2.2K2 0

火狐扩展开发入门实践

为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行，实际上扩展是用来提升或补充网站功能；让用户展现他们的个性：浏览器扩展可以操控网页的内容；从网页中添加或删除内容...：你可能想要帮助用户从网页中阻止一些侵扰的广告; 添加工具和新的浏览特性：给任务面板添加新特性，或者从URL地址，超链接，或者页面文字生成二维码。...，它包含了关于这个扩展插件基本的元数据（metadata），比如它的名字、版本和所需扩展API权限和资源路径。...描述:实现将扩展添加一个新按钮到 Firefox 的工具栏，并在用户点击该按钮时，我们会显示一个弹出窗（popup）来让他们选择操作; 实现要点: 1.定义Browser Action设置相应的图标，...js // # 选项卡在其窗口中是否处于活动状态。 // # 选项卡是否在当前窗口中 // # 父窗口或窗口的id。当前窗口的WINDOW_ID_CURRENT。

2.4K1 0

火狐扩展开发入门实践

为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行，实际上扩展是用来提升或补充网站功能；让用户展现他们的个性：浏览器扩展可以操控网页的内容；从网页中添加或删除内容...：你可能想要帮助用户从网页中阻止一些侵扰的广告; 添加工具和新的浏览特性：给任务面板添加新特性，或者从URL地址，超链接，或者页面文字生成二维码。...，它包含了关于这个扩展插件基本的元数据（metadata），比如它的名字、版本和所需扩展API权限和资源路径。...WeiyiGeek.执行效果 2.第二个扩展实例描述:实现将扩展添加一个新按钮到 Firefox 的工具栏，并在用户点击该按钮时，我们会显示一个弹出窗（popup）来让他们选择操作; 实现要点: 1....js // # 选项卡在其窗口中是否处于活动状态。 // # 选项卡是否在当前窗口中 // # 父窗口或窗口的id。当前窗口的WINDOW_ID_CURRENT。

2.8K3 0

18个您想了解的微小但有用的macOS功能

4.跳回到搜索结果在获取上面的屏幕截图时，我偶然发现了另一个功能：SnapBack。当您单击Google之类的搜索结果中的链接，然后从一个网页跳至下一个网页时，回到您的搜索结果是很痛苦的，对吧？...它适用于任何搜索引擎，但前提是您必须在与搜索结果相同的标签中打开链接。单击“历史记录”>“搜索结果快照”以跳回到您在当前选项卡中执行的上一次搜索的结果页面之一。...从当前窗口恢复最后一个选项卡后，它将继续从最后关闭的窗口恢复选项卡。您要查找的选项卡是否隐藏在关闭的选项卡或网页的一长串后面？然后，最好从浏览器历史记录或地址栏中跳至相关列表。...每当我输入rs时，它就会显示出来。并按空格键。 12.在文本中插入Apple图标您可能不需要经常输入Apple徽标（如果有的话），但无论如何，我还是在这里包括此快捷方式，因为它很酷。...14.从标题栏创建文件副本和别名下次在任何应用程序中打开文件时，请注意标题栏中文件名前面的小图标。您是否知道可以单击此图标并将其拖到任何Finder位置来创建该文件的别名或快捷方式？

6K3 0

10个 Chrome 开发工具和技巧

上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。...打开谷个浏览器的performance选项卡，然后单击右上角的齿轮图标就可以看到 Newwork 和CPU的模拟情况。 image.png 2....颜色选择器单击表示颜色的小方块，弹出颜色选择器。 image.png image.png 启用颜色选择器后，可以将网页悬停并使用颜色选择器来获取该像素的颜色。...csdn网页时，所显示的已运行和尚未运行的代码情况。...可用来发现页面中尚未用到的js 和 css代码，你可以为用户只提供必要的代码，这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用。 10.

8293 0

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

---- Hi~ 大家好，我是小鑫同学，资深 IT 从业者，InfoQ 的签约作者，擅长前端开发并在这一领域有多年的经验，致力于分享我在技术方面的见解和心得进入正题 Chrome 扩展程序通过可以向...Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问。可以获得更改网站的功能和行为。...允许用户跨网站收集和组织信息。向 Chrome DevTools 添加功能。 Chrome扩展文件？...扩展程序（chrome://extensions/）打开开发者模式加载已解压的扩展程序（包含清单文件的文件夹） PS：插件开发过程中会多次修改，在修改后需要在浏览器的扩展程序中重新刷新后生效实现专注阅读模式...通过开发chrome expansion实现单击扩展ICON进入和退出掘金文章专注阅读模式。

7731 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭