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

编程入门行业动态更新时间:2024-10-11 19:15:27

chrome插件开发：popup.html <a href=https://www.elefans.com/category/jswz/34/1771336.html style= 页面获取当前页面【当前视窗】的url"/>

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

开发前的准备

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

{"name": "My extension",..."permissions": ["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的调用 。 当前视窗是指那个包含了发起调用的页面的视窗，不管它是不是最顶层视窗。// 在背景页这个例子中 ，当前视窗就是最后一个活动视窗。在某些情况下，背景页可能没有当前视窗。