在弹出窗口中打开 Chrome 扩展程序链接答案

【问题标题】：Open Chrome extension link within popup在弹出窗口中打开 Chrome 扩展程序链接
【发布时间】：2017-12-29 07:00:41
【问题描述】：

我正在尝试在popup.html 内的一个非常简单的 Chrome 扩展程序中创建子菜单。我已经成功地创建了使用 html 在新选项卡中打开页面的链接。例如：

<a class="two" href="https://chrome.google.com/webstore">
  <img width="16" height="16" src="webstore.png" />Chrome Web Store
</a>

我将以下事件侦听器添加到 popup.js 以使其正常工作：

document.addEventListener('DOMContentLoaded', function () {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    (function () {
      var ln = links[i];
      var location = ln.href;
      ln.onclick = function () {
        chrome.tabs.create({active: true, url: location});
      };
    })();
  }
});

为了尽量减少popup.html中的链接数量，我想创建一个子菜单系统，用户点击一个链接以在弹出窗口中打开一个新的html文档。

<a class="two" href="submenu.html">
  <img width="16" height="16" src="submenu.png" />Submenu
</a>

弹出窗口将包含更多链接，如第一个示例中的 Chrome Webstore 链接。当然，这会在新选项卡中打开submenu.html，而不是在 Chrome 扩展弹出窗口中。有没有一种简单的方法可以在弹出窗口中打开链接，而不是在新选项卡中？

谢谢。

【问题讨论】：

<a class="two" href="submenu.html"> 应该可以工作，但它当然会替换当前的弹出文档及其所有脚本。
我猜这个问题更像是：我怎样才能让它忽略以前的事件监听器。如果我完全删除它，我想在新选项卡中打开的链接将不起作用。我想我必须在 <a> 内设置 id="myLink" 但我不确定这是否是正确的方法。
只需将target="_blank"添加到外部链接并完全删除侦听器代码。
谢谢。我遇到了与here 相同的问题。我要看看我是否可以让它只应用于我想在新标签页中打开的链接，而不是submenu.html 链接。
为什么要为子菜单使用单独的 HTML 文件？

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

【解决方案1】：

我想我已经回答了我自己的问题：

首先添加apply EventListener only when name="newtab"

document.addEventListener('DOMContentLoaded', function () {
    var links = document.getElementsByName("newtab");
    for (var i = 0; i < links.length; i++) {
        (function () {
            var ln = links[i];
            var location = ln.href;
            ln.onclick = function () {
                chrome.tabs.create({active: true, url: location});
            };
        })();
    }
});`

将name="newtab" 添加到要在新标签页中打开的每个<a>。
对于所有其他链接，正常进行；它们将在弹出窗口中打开。

【讨论】：