在扩展程序的弹出窗口中显示当前标签网址

Show current tab URL in extension's popup

本文关键字：显示 标签 窗口 程序 扩展      更新时间：2023-09-26

我想将当前选项卡 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权限。

你的代码是完全错误的。有一些严重的问题，很容易避免检查弹出控制台的错误。他们在这里：

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

    2. 您正在回

  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 教程，并在提出此类问题之前检查控制台中的错误*。

*扩展弹出窗口

中的错误显示在弹出控制台中，您可以右键单击扩展的图标并选择"检查弹出窗口"，然后打开该控制台。

相关文章：