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

Question

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

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" 时，然后 google 在新选项卡中打开。但是添加以下 .js 应该使用 href 从单击的 div 中取出 link 并在活动选项卡中打开它。

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

权限 "tabs" 在 manifest.json

中给出

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

Answer 1

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

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

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

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

  /* ... */
});

请注意，您可以通过右键单击扩展程序的按钮并选择 "Inspect popup"

轻松调试弹出窗口

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

chrome extension popup same tab still not working

html

javascript

json

google-chrome

google-chrome-extension