chrome插件开发:popup.html 页面获取当前页面【当前视窗】的url

2023-11-06 03:52

本文主要是介绍chrome插件开发:popup.html 页面获取当前页面【当前视窗】的url,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

chrome插件开发:popup.html 页面获取当前页面【当前视窗】的url

开发前的准备

在manifest页面配置上 tabs 权限,否则无法使用tabs接口权限

{"name": "My extension",..."permissions": ["tabs"],...
}

参考手册: http://chrome.cenchy.com/tabs.html

理清概念: 当前视窗

当前视窗
很多扩展系统的功能有一个可选的windowId参数,其默认值为当前视窗。

当前视窗是指包含当前正在执行的代码的视窗。重要的是要认识到,它可以跟最顶层或有焦点的视窗不一样。

例如,假设一个扩展从一个单一的HTML文件中创建了一些标签或视窗,而这个HTML文件包含一个chrome.tabs.getSelected的调用 。 当前视窗是指那个包含了发起调用的页面的视窗,不管它是不是最顶层视窗

在背景页这个例子中 ,当前视窗就是最后一个活动视窗。在某些情况下,背景页可能没有当前视窗。

popup.html 代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><script src="js/popup.js"></script><style>h1{color:red}.con{ width:500px; height: 800px;}.h800{ }</style>
</head><title>Popup</title>
<body  ><div class="con"><h1>这是我的第一个浏览器插件</h1><hr><p>当前的网址是:<span id="tabUrl"></span></p><button type="button" >123</button></div></body>
</html>

popup.js代码

// popup.js
console.log("popup.js");
//console.log(window.location.href);
//返回的是popup.html这个当前页面
var currentUrl = window.location.href;
console.log(currentUrl);//chrome.windows.getCurrent 获取当前视窗是指包含当前正在执行的代码的视窗 及popup.html
chrome.windows.getCurrent(function (tab){console.log(tab.id);})//chrome.tabs.getSelected获取特定窗口指定的标签。
chrome.tabs.getSelected(null, function(tab) {console.log('当前选中的标签页的 ID 是: ' + tab.id);console.log('当前选中的标签页的 URL 是: ' + tab.url);document.getElementById("tabUrl").innerHTML = tab.url;
});// 当前视窗
// 很多扩展系统的功能有一个可选的windowId参数,其默认值为当前视窗。// 当前视窗是指包含当前正在执行的代码的视窗。重要的是要认识到,它可以跟最顶层或有焦点的视窗不一样。// 例如,假设一个扩展从一个单一的HTML文件中创建了一些标签或视窗,而这个HTML文件包含一个chrome.tabs.getSelected的调用 。 当前视窗是指那个包含了发起调用的页面的视窗,不管它是不是最顶层视窗。// 在背景页这个例子中 ,当前视窗就是最后一个活动视窗。在某些情况下,背景页可能没有当前视窗。

效果

点击插件图片显示popup.html 显示当前窗口url
点击插件图片显示popup.html  显示当前窗口标签

这篇关于chrome插件开发:popup.html 页面获取当前页面【当前视窗】的url的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/354318

相关文章

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文