Question

我使用了我在这里找到的代码。但是仍然无法在当前活动选项卡中打开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”

我做错了什么？我忘了什么吗？

Answer 1

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

其余的DOM尚未构建;因此，document.getElementsByTagName("a")是空的。

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

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

  /* ... */
});

请注意，您可以通过右键单击扩展程序按钮并选择＆＃34;检查弹出窗口＆＃34;

来轻松调试弹出窗口

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

1 个答案: