javascript - 如何使用 javascript 在我的 chrome 扩展中获取当前选项卡的 URL

Question

我刚刚开始使用 Google Chrome 扩展程序开发，我的项目涉及制作一个扩展程序，单击该扩展程序会打印当前打开的任何页面/选项卡的 URL。

因此，如果我在 google 的主页上并单击我的扩展程序，我需要在扩展程序中获取“ https://www.google.com/ ”作为我的输出。

我需要使用 javascript 来执行此操作，并且无法找到我理解并且可以完成工作的代码。我读过关于使用“window.location”和“document.href”之类的东西，但这不会给我我的扩展名而不是当前选项卡的url吗？

请帮助我开始。提前致谢。

score 66 · Accepted Answer

请注意，您必须tabs在清单文件中设置权限

"permissions": [
    "tabs"
],

http://developer.chrome.com/extensions/tabs.html

或activeTab通过单击扩展按钮[ Xan ]启动的权限

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

代码：

chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    console.log(tabs[0].url);
});

score 34 · Accepted Answer

使用 javascript，如果您不在弹出窗口中使用它，它将起作用，因为弹出窗口中的 javascript 将返回弹出窗口的 url，因此，在弹出窗口中，您必须使用 Chrome 选项卡 API 并在 Chrome 清单中设置权限。

chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    console.log(tabs[0].url);
});

所以最好的方法是使用 Chrome tab API

score 8 · Accepted Answer

You need to be careful with what you mean by "current tab". If the user has more than one window open, each of them with multiple tabs, Chrome defines the "current window" as the one that is running the content script that makes use of the chrome.tabs API. That happened to me and I solved it by referencing not the "current" window but the last focused one:

chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
    // Do something
});

References:

https://developer.chrome.com/extensions/windows#current-window https://developer.chrome.com/extensions/tabs#method-query

Hope it helps!

score 2 · Accepted Answer

Update : If you are on manifest version 3 then proceed with the following,

 async function getCurrentTab() {
 let queryOptions = { active: true, currentWindow: true };

  let [tab] = await browser.tabs.query(queryOptions);
  localStorage.setItem('tabname' , tab);
   return tab;
  }

 getCurrentTab()
 .then((data) => { console.log('newdata',data)})
 .then(() => { console.log('error')});

score 1 · Accepted Answer

不要使用getSelected

根据Chrome 开发人员文档：自 Chrome 版本 33chrome.tabs.getSelected 起已弃用

而是使用：

chrome.tabs.query({active:true}, __someCallbackFunction__)就像穆萨的第二个建议。

score 1 · Accepted Answer

请注意，当从多个内容脚本中以短顺序调用时chrome.tabs.query()，chrome.tabs.getCurrent将会遇到竞争条件。

返回的选项卡不一定是请求者的选项卡。

更简单的方法是向后台线程发送消息。此消息包含发送选项卡作为tab参数。

后台线程可以获取这个参数并直接将它包含在它对消息的响应中。

这不仅可以防止竞争条件，而且速度更快，因为它不使用异步操作（与调用不同chrome.tabs.query()）

例子：

内容脚本

var myTab;
chrome.runtime.sendMessage({ message: "get_tab_msg" }, (response) => {
    myTab = response.tab;
});

后台脚本

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === "get_tab_msg") {
        // The content script has asked for the tab.
        sendResponse({tab: sender.tab});
    }
});

score 1 · Accepted Answer

tabs这是您在不添加新权限的情况下寻找的答案

chrome.browserAction.onClicked.addListener(function(e){
     console.log(e.url); 
     //give you the url of the tab on which you clicked the extension
})

score 1 · Accepted Answer

这里发布的解决方案不知何故对我不起作用，但下面的代码片段没有任何问题 -

let currentURL = window.location.href;
console.log(currentURL)

score 0 · Accepted Answer

更新： 此方法现已弃用，因此请不要使用它

就我而言，以上任何一项都没有奏效。所以我用了这个：

chrome.tabs.getSelected(null, function(tab) {
    console.log(tab.url)
})

效果很好！希望能帮助到你。

score 0 · Accepted Answer

这对我有用，试一试

chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
console.log(tab.url);
alert(tab.url);
 });

javascript - 如何使用 javascript 在我的 chrome 扩展中获取当前选项卡的 URL

10 回答 10

Related

Reference