为什么chrome.tabs.query（）在Chrome扩展中使用RequireJS调用时返回标签的URL？ [英] Why doesn't chrome.tabs.query() return the tab's URL when called using RequireJS in a Chrome extension?

问题描述

我有一个简单的Chrome扩展程序，可以添加浏览器操作。当扩展程序的弹出窗口打开时，它需要访问当前选项卡的URL。由于它不需要访问所有选项卡，我只需在清单中指定 activeTab 权限即可：

<$
manifest_version：2，
name：RequireJS测试，
版本：0.0.1，
description：Test RequireJS and activeTab permission。，
permissions：[
activeTab
]，
browser_action：{
default_popup：popup.html
}，
web_accessible_resources：[
js / *，
html / *，
css / *，
img / *
]
}

理论上，这应该允许弹出访问活动标签的URL，但是当我从 require（）调用中查询标签时，URL不会被返回弹出窗口 main.js file：

  require（[]，function （）{
 chrome.tabs.query（{active：true，lastFocusedWindow：true}，function（tabs）{
 var url = tabs [0] .url; 
 console.log（来自main.js的URL，url）; 
}）; 
 
 console.log（来自main.js中访问的全局变量的URL，tabURL）; 
}）; 
  

该控制台显示URL的 undefined 。但是，如果我从不使用 require（）的普通.js文件进行相同的调用，它可以正常工作：

  chrome.tabs.query（{active：true，lastFocusedWindow：true}，function（tabs）{
 tabURL = tabs [0]。 url; 
 console.log（URL from get-url.js，tabURL）; 
}）; 
  

显示正确的URL，我可以访问全局的 tabURL 在 require（）调用中很好。当我右键单击浏览器按钮并检查弹出窗口时，控制台输出如下所示：

 来自get-url的URL。 js http://stackoverflow.com/questions/ask 
在main.js中访问全局变量的URL http://stackoverflow.com/questions/ask 
 main.js的URL undefined 
  

更奇怪的是，我有时 code> chrome.tabs.query（）在 require（）调用中。但大多数情况下这是行不通的。有关RequireJS如何加载脚本似乎混淆了Chrome并取消了加载脚本的URL访问权限。这是在Windows上的Chrome 40。



显然，解决方法是在一个单独的脚本中抓取URL并将其存储在一个变量中，但这感觉有点不方便。我想看看是否有合适的方法让这个与RequireJS一起工作。



如果有人想在他们的机器上测试它，完整的插件源代码在这里： https://github.com/fwextensions/requirejs-url-test


---

编辑

正如Rob W.在下面解释的那样，这实际上与RequireJS无关。上面的 get-url.js 文件中的代码返回正确的URL的唯一原因是它恰好在devtools窗口打开之前运行。如果我将该文件更改为：

  setTimeout（function（）{
 chrome.tabs.query（{主动：true，lastFocusedWindow：true}，function（tabs）{
 tabURL = tabs [0] .url; 
 console.log（URL from get-url.js，tabURL） ; 
}）; 
}，5000）; 
  

然后在devtools窗口打开并运行失败后运行。 RequireJS不是罪魁祸首。

解决方案

您没有看到网址，因为您只设置了 activeTab 权限（不是选项卡）权限，最后一个关注窗口是开发人员工具（您没有 activeTab 访问）（并且自Chrome 41开始，devtools标签页/窗口对于扩展是不可见的，所以 tabs 将是一个空数组）。

好消息是这个问题是专门针对您的扩展页面打开的devtools窗口的，因此该问题仅出现在开发过程中，而不是在用户实际使用期间发生。

扩展弹出窗口关联用一个窗口，所以你可以用 chrome.tabs.query 和 currentWindow：true 来得到正确答案：

  chrome.tabs.query（{
 active：true，
 currentWindow：true 
}，function（tabs）{
 var tabURL = tabs [0] .url; 
 console.log（tabURL）; 
}）; 
  

I have a simple Chrome extension that adds a browser action. When the extension's popup is opened, it needs to access the current tab's URL. Since it doesn't need access to all the tabs, I just have the activeTab permission specified in the manifest:

{
    "manifest_version": 2,
    "name": "RequireJS Test",
    "version": "0.0.1",
    "description": "Test RequireJS and the activeTab permission.",
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_popup": "popup.html"
    },
    "web_accessible_resources": [
        "js/*",
        "html/*",
        "css/*",
        "img/*"
    ]
}

In theory, that should give the popup access to the active tab's URL, but the URL is not returned when I query the tabs from within a require() call in the popup's main.js file:

require([], function() {
    chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
        var url = tabs[0].url;
        console.log("URL from main.js", url);
    });

    console.log("URL from global var accessed in main.js", tabURL);
});

The console shows undefined for the URL. However, if I make the same call from a plain .js file that doesn't use require(), it works fine:

chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
    tabURL = tabs[0].url;
    console.log("URL from get-url.js", tabURL);
});

That displays the correct URL, and I can access that global tabURL inside the require() call just fine. When I right-click the browser button and inspect the popup, the console output looks like this:

URL from get-url.js http://stackoverflow.com/questions/ask
URL from global var accessed in main.js http://stackoverflow.com/questions/ask
URL from main.js undefined

Even stranger is that I've sometimes seen the URL available from within that call to chrome.tabs.query() inside the require() call. But mostly it doesn't work. Something about how RequireJS loads scripts seems to confuse Chrome and take away the URL access for the loaded script. This is in Chrome 40 on Windows.

Obviously, the workaround is to grab the URL in a separate script and store it in a variable, but that feels a bit kludgy. I'd like to see if there's a proper way of getting this to work with RequireJS.

The full plugin source is here if anyone wants to test it on their machine: https://github.com/fwextensions/requirejs-url-test

---

Edit

As Rob W. explains below, this actually has nothing to do with RequireJS. The only reason that the code in my get-url.js file above returned the correct URL was that it happened to run before the devtools window opened. If I change that file to this:

setTimeout(function() {
chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
    tabURL = tabs[0].url;
    console.log("URL from get-url.js", tabURL);
});
}, 5000);

Then it runs after the devtools window is open and fails as well. RequireJS isn't the culprit.

解决方案

You don't see a URL because you've only set the activeTab permission (not the tabs) permission AND the last focused window is the developer tools (for which you don't have activeTab access) (and since Chrome 41, devtools tabs/windows are invisible to extensions, so tabs will be an empty array).

The good news is that this problem is specific to the devtools window being opened for your extension page, so the issue only occurs during development and not during actual use by users.

Extension popups are associated with a window, so you can use chrome.tabs.query with currentWindow:true to get the correct answer:

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

这篇关于为什么chrome.tabs.query（）在Chrome扩展中使用RequireJS调用时返回标签的URL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！