Chrome扩展：在弹出窗口中打开链接并在新标签页中显示。

Question

我正在开发一个Chrome扩展，参考了这篇文章（链接）。

我的问题是如何打开一个新的chrome标签，它的URL是我在popup.html中点击的链接。我尝试过像其他类似问题的答案中建议的那样，将<a>元素的target属性设置为_blank，但唯一的结果是Chrome在新标签页中打开了popup.html。

有什么解决方法吗？

谢谢。

- Advicer

---

可能是重复的问题：如何使popup.html链接在选项卡中打开？ - rogerdpack

Answer 1

你应该使用chrome.tabs模块在新标签页中手动打开所需的链接。在popup.html中尝试使用此jQuery片段：

$(document).ready(function(){
   $('body').on('click', 'a', function(){
     chrome.tabs.create({url: $(this).attr('href')});
     return false;
   });
});

- Konrad Dzwinel

---

那个a标签的属性我应该设置为URL“href”才对。顺便说一下，在这两种情况下都不起作用。它会打开一个带有此URL的选项卡：chrome-extension://ceapmkdonphjngfdcjcoahdmkenpbgpn/?action=read&idnotizia=71189 - Advicer

你关于 'href' 的说法是正确的，对此我感到抱歉 - 我已经修正了我的回答。如果您想要打开链接，需要在 href 中提供完整的 URL。目前，您的链接看起来像这样 <a href='?action=read&idnotizia=71189'>，请将它们更改为完整的 URL 形式 <a href='http://yoursite.com?action=read&idnotizia=71189'>。 - Konrad Dzwinel

我原本以为是我的扩展出了问题。我将域名连接到字符串中，现在它完美地工作了。 - Advicer

请注意，此方法仅适用于文档加载时存在的链接，并且效率非常低。为了高效地捕获所有链接点击事件，无论链接何时出现，请使用$('body').on('click', 'a', function ()... - phreakhead

Answer 2

请查看我的评论：https://dev59.com/iW855IYBdhLWcg3wFABu#17732609

---

我遇到了同样的问题，这是我的方法：

1. 创建包含链接的popup.html文件（当点击这些链接时，Chrome会将其阻止）。
2. 创建popup.js并在页面中引用它：<script src="popup.js" ></script>

3. 将以下代码添加到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});
               };
           })();
       }
   });
   

   那就这些，链接在此之后应该能够正常工作。

- lasantha

---

我在options.html和popup.html中使用相同的javascript代码，这段代码解决了popup.html的问题，但是当options.html打开两个相同链接的选项卡时会出现问题（因为options.html不需要这个修复），但我不想使用单独的js文件，你有什么解决办法吗？ - user25

似乎我找到了一种检查页面是否为弹出窗口或选项卡的解决方案： if (chrome.extension.getViews({type："popup"}).length> 0) {//执行您的代码} - user25

此代码只需要在 Google Chrome 和 Opera 中使用，但不应添加到 Firefox 扩展程序（WebExtensions）中，因为在 Firefox 中它可以正常工作，不需要进行修复。如果添加它，将会打开两个 Firefox 扩展标签页。 - user25

Answer 3

如果您不想使用JQuery，将以下内容插入到您的popup.js中，当链接被单击时它将在新的选项卡中打开所有链接。记得在manifest.json中声明“tabs”权限。

window.addEventListener('click',function(e){
  if(e.target.href!==undefined){
    chrome.tabs.create({url:e.target.href})
  }
})

- Kwiksilver

---

我建议使用“activeTab”权限：https://developer.chrome.com/extensions/activeTab - Saulo Silva

Answer 4

其他回答都是有效的。为了完整起见，另一种方法是只需添加target="_blank"。

或者，如果您想“手动”添加特定链接，这是一种方法（基于已经在此处给出的其他答案）： popup.html

<a id="index_link">My text</a>.

弹出窗口的.js文件

document.addEventListener('DOMContentLoaded', () => {
   var y = document.getElementById("index_link");
   y.addEventListener("click", openIndex);
});

function openIndex() {
   chrome.tabs.create({active: true, url: "http://my_url"});
}

- rogerdpack

---

哇，这需要更多关注呢.. :) - krivar

可以确认，在Firefox（版本72）和Chrome（版本79）上，target="_blank"的行为符合预期。 - Tenders McChiken

Answer 5

更为简洁且实际的2020语法：

document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll("a");

  links.forEach(link => {
    const location = link.getAttribute('href');
    link.addEventListener('click', () => chrome.tabs.create({active: true, url: location}));
  });
});

- neiya

Answer 6

现代JS版本更加简洁：

document.addEventListener('DOMContentLoaded', function () {
  for (const anchor of document.getElementsByTagName('a')) {
    anchor.onclick = () => {
      chrome.tabs.create({active: true, url: anchor.href});
    };
  };
});

- Jozef Legény

Answer 7

将选项卡网址发送到新选项卡以分享博客：

// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){        
    var url = tabs[0].url;
    var title = tabs[0].title;
    document.getElementById('linkQZone').onclick = function () {
        var url1 = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&desc=&summary=&site=';
        chrome.tabs.create({active: true, url: url1});
    };

    document.getElementById('linkQQ').onclick = function () {
        var url1 = 'https://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title + '&desc=&summary=&site=';
        chrome.tabs.create({active: true, url: url1});
    };
});

- sonichy

Answer 8

我也遇到了同样的问题。看起来Konrad的解决方案可以解决，但它会同时打开多个选项卡。这只发生在第一次安装扩展后。所以我将其更改为

if (e.target.classList.contains("a-link")) {
    chrome.tabs.create({url: $(e.target).attr('href')});
    return false;
}

现在一切都按预期运行。

- Strabek

Answer 9

使用Ctrl键单击或中键单击打开

$('body').on('click auxclick', 'a', e => {
    if (e.ctrlKey || e.button == 1) {
        e.preventDefault();
        chrome.tabs.create({ url: e.currentTarget.href, selected: false});
    }
});

- Matt