在扩展程序的弹出窗口中显示当前选项卡URL

Question

我想将当前选项卡的URL存储在以下<input>字段中：

<input type="text" id="pdurl" value=>

我在popup.js编写的代码如下：

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

    var activeTabUrl = tab.url;
});

document.getElementById("pdurl").innerHTML = var activeTabUrl;

我已经在清单文件中设置了tabs权限。

Answer 1

您的代码是完全错误的。 有些严重的问题很容易避免检查弹出控制台中的错误。 他们来了：

1. 首先， chrome.tabs.query是一个异步方法。 这意味着代码将被评估并排队等待执行； 在执行时，将调用并执行回调函数（您将其指定为第二个参数）。 这意味着您编写的最后一行将始终失败，因为您要使用的变量仍然不存在（ query功能尚未完成工作）。

2. 您正在回调内部创建一个无用的（并且错误的（因为您正在为其分配数组））变量：不需要您的tab变量，因为查询当前窗口中的活动标签总是返回单个标签 ，因此您只需使用tabs[0] 。

3. 您的activeTabUrl变量是使用var关键字定义的，这将使其变为私有，并且您将无法在函数外部使用它（这是您在最后一行中尝试执行的操作，尽管它仍然是错误的）。

4. 在最后一行中，您尝试将在回调函数中创建的变量分配给输入的innerHTML ： 在很多级别上，我什至都不知道从哪里开始，该语句是如此错误 ：首先，如果要实际在文本输入中看到某些东西，您必须修改其value ; 其次：该变量未定义； 另外，您的作业中的var陈述式在语法上是错误的； 第四：即使正确完成了前面三个条件， 您仍然不在回调中 。

如上所述，这是您要执行的操作的正确代码：

chrome.tabs.query({active : true, currentWindow: true}, function (tabs) {
    document.getElementById("pdurl").value = tabs[0].url;
});

我强烈建议您看一些JavaScript教程，并在问类似这样的问题之前检查控制台中的错误*。

^{＊扩展程序的弹出窗口中显示错误，您可以在弹出菜单中右键单击该扩展程序的图标并选择“检查弹出窗口”来打开它。}