chrome扩展弹出相同的选项卡仍然无法正常工作答案

【问题标题】：chrome extension popup same tab still not workingchrome扩展弹出相同的选项卡仍然无法正常工作
【发布时间】：2015-04-14 14:35:34
【问题描述】：

我使用了在这里找到的代码。但是仍然无法从当前活动选项卡中的 popup.html 打开我的链接。

popup.html

<!doctype html>

<html>








    <style>
body {
  min-width: 156px;
  max-width: 100%;
  position: relative;
  vertical-align:middle;
}
div {
    margin:1px 1px 1px 1px;
}
</style>


    <head>

        <title>I-Serv Switcher</title>

        <script src="js.js"></script>

    </head>
  <body>
    <script src="js.js"></script>
    <a href="http://www.google.com"><div style="width:50px; height:50px; background-color:blue; float:left;">Click.</div></a>



  </body>
</html>

如您所见，有一个蓝色的小div。当我添加 target="_blank" 时，谷歌会在新标签页中打开。但是添加以下 .js 应该会使用 href 将链接从单击的 div 中取出并在活动选项卡中打开它。

js.js

var hrefs = document.getElementsByTagName("a");

function openLink() {
    var href = this.href;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var tab = tabs[0];
        chrome.tabs.update(tab.id, {url: href});
    });
}

for (var i=0,a; a=hrefs[i]; ++i) {
    hrefs[i].addEventListener('click', openLink);
}

manifest.json 中给出了“tabs”权限

我做错了什么？我是不是忘记了什么？

【问题讨论】：

顺便说一句，您不需要tabs 许可。只需要读取有关现有选项卡的数据（如 URL 或标题）

标签： javascript html json google-chrome google-chrome-extension

【解决方案1】：

您的代码在读取<script> 标记时执行。

DOM 的其余部分尚未构建；因此，document.getElementsByTagName("a") 为空。

要解决此问题，您需要将代码包装在 DOMContentLoaded 事件中：

document.addEventListener("DOMContentLoaded", function() {
  var hrefs = document.getElementsByTagName("a");

  /* ... */
});

请注意，您可以通过右键单击扩展程序的按钮并选择“检查弹出窗口”来轻松调试弹出窗口

【讨论】：

谢谢，这很好用。但是弹出窗口不再关闭。我必须添加一些东西吗？