我如何从谷歌Chrome扩展获得当前选项卡的URL ?

我有谷歌Chrome扩展的乐趣，我只是想知道我如何在变量中存储当前选项卡的URL ?

260759 次浏览
小开

警告!chrome.tabs.getSelected是deprecated。请使用chrome.tabs.query，如其他答案所示。

首先，你必须在manifest.json中设置API的权限:

"permissions": [
"tabs"
]

并存储URL:

chrome.tabs.getSelected(null,function(tab) {
var tablink = tab.url;
});
小开

嗨，这里是一个谷歌Chrome样本，电子邮件当前的网站给一个朋友。背后的基本理念是你想要什么…首先，它获取页面的内容(对你来说不感兴趣)…然后，它得到URL (<-好部分)

此外，这是一个很好的工作代码示例，我更喜欢阅读文档。

可以在这里找到: 通过电子邮件发送本页 < / p >

小开

问题是chrome.tabs.getSelected是异步的。下面的代码通常不能正常工作。tablink的值在被写入控制台时仍然是未定义的，因为getSelected还没有调用重置值的回调:

var tablink;
chrome.tabs.getSelected(null,function(tab) {
tablink = tab.url;
});
console.log(tablink);

解决方案是在函数中使用值的地方包装代码，并由getSelected调用该值。通过这种方式，您可以保证始终拥有一个值集，因为您的代码在执行之前必须等待该值被提供。

试着这样做:

chrome.tabs.getSelected(null, function(tab) {
myFunction(tab.url);
});


function myFunction(tablink) {
// do stuff here
console.log(tablink);
}
小开
最佳答案

像这样使用chrome.tabs.query():

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
let url = tabs[0].url;
// use `url` here inside the callback because it's asynchronous!
});

这需要你在你的扩展清单中请求访问chrome.tabs API:

"permissions": [ ...
"tabs"
]

重要的是要注意，“当前选项卡”的定义可能会根据扩展的需要而有所不同。

在查询中设置lastFocusedWindow: true是合适的，当你想要访问用户关注的窗口(通常是最上面的窗口)中的当前选项卡。

设置currentWindow: true允许你在你的扩展代码正在执行的窗口中获得当前选项卡。例如，如果您的扩展创建了一个新的窗口/弹出窗口(改变焦点)，但仍然想从运行扩展的窗口访问选项卡信息，这可能是有用的。

在本例中，我选择使用lastFocusedWindow: true，因为谷歌调用了currentWindow 可能不会一直在场. c的情况。

您可以使用定义在这里的任何属性进一步细化您的制表符查询:chrome.tabs.query

小开

对于那些使用context menu api的人来说，文档并没有立即清楚地说明如何获取制表符信息。

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
console.log(info);
return console.log(tab);
});

https://developer.chrome.com/extensions/contextMenus

小开

你必须检查这.

超文本标记语言

<button id="saveActionId"> Save </button>

manifest.json

  "permissions": [
"activeTab",
"tabs"
]
< p > JavaScript < BR > 下面的代码将活动窗口的所有url保存为JSON对象，作为按钮单击的一部分 
var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
myArray = [];
chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
function (array_of_Tabs) {  //Tab tab
arrayLength = array_of_Tabs.length;
//alert(arrayLength);
for (var i = 0; i < arrayLength; i++) {
myArray.push(array_of_Tabs[i].url);
}
obj = JSON.parse(JSON.stringify(myArray));
});
}, false);
小开

其他答案假设你想从弹出窗口或后台脚本中知道它。

如果你想知道当前的URL 从内容脚本，标准的JS方式适用:

window.location.toString()

你可以使用window.location的属性来访问URL的各个部分，比如主机、协议或路径。

小开

这个解决方案已经测试过了。

在manifest.json中设置API的权限

"permissions": [ ...
"tabs",
"activeTab",
"<all_urls>"
]

对第一个加载调用函数。https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {
sendCurrentUrl()
})

关于更改调用函数。https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
sendCurrentUrl()
})

获取URL的函数

function sendCurrentUrl() {
chrome.tabs.getSelected(null, function(tab) {
var tablink = tab.url
console.log(tablink)
})
小开

这是一个非常简单的方法

window.location.toString();

你可能不得不这样做的内容脚本，因为它有所有的功能，在一个网页上的js文件可以有和更多。

小开

如果你想要存储通过chrome扩展打开或看到的使用的url的完整扩展:

在后台使用这个选项:

openOptionsPage = function (hash) {
chrome.tabs.query({ url: options_url }, function (tabs) {
if (tabs.length > 0) {
chrome.tabs.update(
tabs[0].id,
{ active: true, highlighted: true, currentWindow: true },


function (current_tab) {
chrome.windows.update(current_tab.windowId, { focused: true });
}
);
} else {
window.addEventListener(hash, function () {
//url hash # has changed
console.log(" //url hash # has changed 3");
});
chrome.tabs.create({
url: hash !== undefined ? options_url + "#" + hash : options_url,
});
}
});
};

你还需要index.html文件。你可以在这个Github 清单文件应该是这样的:

{
"manifest_version": 2,
"name": "ind count the Open Tabs in browser ",
"version": "0.3.2",
"description": "Show open tabs",
"homepage_url": "https://github.com/sylouuu/chrome-open-tabs",
"browser_action": {},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://www.google-analytics.com; object-src 'self'",


"options_page": "options.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"]
},


"web_accessible_resources": ["img/*.png"],


"permissions": ["tabs", "storage"]
}

所有唯一看到的URL存储在一个数组中描述在浏览器控制台

完整版的简单应用程序可以在这个Github上找到:

https://github.com/Farbod29/extract-and-find-the-new-tab-from-the-browser-with-chrome-extention

小开 
async function getCurrentTabUrl () {
const tabs = await chrome.tabs.query({ active: true })
return tabs[0].url
}

你需要在清单中添加"permissions": ["tabs"]。


提交答案