3

I have a simple list of research links on a Chrome Extension: 

<a href="http://www.example1.com" target="_blank">Research Link 1</a>
<a href="http://www.example2.com" target="_blank">Research Link 2</a>
<a href="http://www.example3.com" target="_blank">Research Link 3</a>

On any webpage, I could ctrl+click all three links, opening new tabs in the background. However, this doesn't seem to be the case with a Chrome Extension Popup. If you ctrl+click on a link, the extension closes the popup, which prevents you from clicking more than one link at any time.

I've tried an on-click chrome.tabs.create approach which is described in several other posts, but that seems similar to just clicking target="_blank" as it just opens a new tab with focus.

chrome.tabs.create({url: 'http://www.google.com'});

Is there any way to open a new tab without focus (ctrl+click), while still allowing the extension popup to remain visible in the current tab so that the user can click a second, third, or fourth link? That way the user doesn't have to rerun the extension several times, which takes time as it has to authenticate and query for the data all over again.

ElJeffe
  • 637
  • 1
  • 8
  • 20

2 Answers2

19

Yes, there is an option for create:

chrome.tabs.create({url: 'http://www.google.com', active: false});

I'm using it in one of my extensions exactly as you described.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • I was close. :) Thanks! – ElJeffe Apr 09 '15 at 16:31
  • I tried same code. It properly opened the link in new tab but extension getting crashed with message as below Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND – priya Oct 23 '20 at 14:16
0

While the accepted answer works, here is what I ended up doing to also allow a proper ctrl+click (open tab in new background window) in a Chrome Extension - uses jQuery.

<a class="ctrllink" style="cursor: pointer;" url="http://www.example1.com">Research Link 1</a>
<a class="ctrllink" style="cursor: pointer;" url="http://www.example2.com">Research Link 2</a>
<a class="ctrllink" style="cursor: pointer;" url="http://www.example3.com">Research Link 3</a>

I used the <a> tag in order to maintain the default hyperlink style (color, hover underline, etc) but removed the href. Since there is no href, need to define the cursor style in the element or class.

Global variable:

var tabplacement = 0;

Tabplacement was done to simulate the way Chrome opens tabs, incrementing from the last created.

$(function () {
    $('.ctrllink').on('click', function (event) {
        var ctrlpressed = (event.ctrlKey || event.metaKey);
        var url = $(this).attr('url');
        chrome.tabs.getSelected(null, function (tab) {
            tabplacement += 1;
            var index = tab.index + tabplacement;
            chrome.tabs.create({'url': url, active: !ctrlpressed, 'index': index});
        });
    });
});

Included the metaKey to handle Mac Command ⌘

ElJeffe
  • 637
  • 1
  • 8
  • 20