为什么chrome.tabs.query()在Chrome扩展程序中使用RequireJS调用时会返回标签的URL？

Question

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

{
    "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/*"
    ]
}

理论上,这应该让弹出窗口访问活动选项卡的URL,但是当我从require()弹出窗口的main.js文件中的调用中查询选项卡时,不会返回URL :

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);
});

控制台显示undefinedURL.但是,如果我从一个不使用的普通.js文件中进行相同的调用require(),它可以正常工作:

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

这显示了正确的URL,我可以tabURL在require()通话中访问该全局.当我右键单击浏览器按钮并检查弹出窗口时,控制台输出如下所示:

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

更奇怪的是,我有时看到从该调用中的URL 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({"active": true, "lastFocusedWindow": true}, function (tabs) {
    tabURL = tabs[0].url;
    console.log("URL from get-url.js", tabURL);
});
}, 5000);

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

Answer 1

您没有看到URL,因为您只设置了activeTab权限(而不是tabs)权限,最后一个关注窗口是开发人员工具(您无权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);
});

Answer 2

为了克服 Rob W. 在他的帖子中报告的 devTools 错误，以下getActiveTab解决方法似乎对我始终有效（即使打开了多个 devTools 窗口）。它的工作原理是activeTabId在tabs.onActivated事件触发时始终保存对后台页面的引用。

var activeTabId;

chrome.tabs.onActivated.addListener(function(activeInfo) {
  activeTabId = activeInfo.tabId;
});

function getActiveTab(callback) {
  chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
    var tab = tabs[0];

    if (tab) {
      callback(tab);
    } else {
      chrome.tabs.get(activeTabId, function (tab) {
        if (tab) {
          callback(tab);
        } else {
          console.log('No active tab identified.');
        }
      });

    }
  });
}