Chrome 扩展程序；在新选项卡中打开来自 popup.html 的链接

Question

我正在做一个 Chrome 扩展程序，我在这篇文章 here 中得到了帮助。

我现在的问题是如何打开一个新的 chrome 选项卡，该选项卡的 URL 是我在 popup.html 中单击的链接。我试图像某人在其他类似问题的答案中建议的那样做，例如将<a> 的属性target 设置为_blank，但唯一的结果是chrome 确实打开了一个新选项卡，但在新选项卡中是我的弹出窗口。 html。

知道如何解决这个问题吗？

谢谢。

Answer 1

您应该使用chrome.tabs 模块在新选项卡中手动打开所需的链接。尝试在你的 popup.html 中使用这个 jQuery sn-p：

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

Answer 2

查看我的评论https://stackoverflow.com/a/17732609/1340178

---

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

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

就是这样，之后链接应该可以工作了。

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

Answer 4

其他答案有效。为了完整起见，另一种方法是just addtarget="_blank"

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

popup.html

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

popup.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"});
}

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

Answer 6

现代 JS 中更简洁的版本：

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

Answer 7

我遇到了同样的问题。看起来 Konrad 的解决方案会奏效，但它一次打开了多个选项卡。这仅在第一次扩展安装后发生。所以我把它改成

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

一切都按预期工作。

Answer 8

发送标签页网址以在新标签页中分享博客：

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

Answer 9

使用 ctrl-click 或 middle-click 打开

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