Chrome extension: How to open a link in new tab?

Best practices in tab creation

Upgrade to latest version for security

For optimized security, ensure to upgrade to manifest version 2. This insulates your extension against unsafe scripts, bolstering your extension's security.

Background scripts for organization

Background scripts are your friends! Specify a background page in your manifest.json for tidier script management. In an organized code world, finding bugs is like playing 'whack a mole' (pun intended).

Externalize scripts for performance

To enhance performance, moving towards externalized scripts is a smart move. They load separately, providing a wonderful opportunity for performance optimization and adherence to content security policies.

Inline scripts: Not cool anymore

Remember when you used to write inline scripts in your index.html? Those days are long gone. Switch to event pages and background scripts to sail smoothly with security measures.

Cross-environment tests

Remember to do the rounds and check your extension on various browser environments. Errors have this nasty habit of preventing tabs from opening. And trust me, you don't want that kind of reputation.

Coding tips and tricks

Dynamics with JavaScript and jQuery

When it comes to dynamically opening links, our good old JavaScript or jQuery is up for the challenge. But a small tip: keep it simple and avoid jQuery if vanilla JavaScript fits the bill:

// "Don't click me, I dare you!" - Every Link.
document.querySelectorAll('a[target="_blank"]').forEach(link => {
  link.addEventListener('click', event => {
    // And BAM! New tab!
    chrome.tabs.create({ url: link.href });
  });
});


Alternative method: window.open()

Sometimes, you might want to switch things up and use window.open() instead of chrome.tabs.create(). Especially handy when dealing with specific window features.

Cruise through a tab's lifecycle

| Major Milestones              | Chrome Tab Life Event  |
| ----------------------------- | ---------------------- |
| Click on a link               | 🖱️→🔗                  |
| Browser sans extension        | Opens in same tab ↩️   |
| Browser with extension active | Opens in new tab 🆕🔲  |

Remember:

<a href="https://example.com" target="_blank">I'm taking the next flight out 🛩️</a>


Clicking the link means embarking on a new route while keeping your departure gate open.

Considerations for enhanced UX

Keeping focus on popup

Nothing annoys users more than sudden changes. To improve user experience, consider keeping focus on the popup while opening new tabs. Here is one way to do it:

// "I'd like to be alone." - new tab, probably
chrome.tabs.create({ url: "http://www.yoursite.com", active: false });


Blocking default event behavior

Sometimes you need to put your steady hand on the reins of your tab's behaviour. Blocking the default action on click events gives you that exact control:

element.addEventListener('click', event => {
  event.preventDefault(); // "It's my event and I'll prevent if I want to!"
  // The world is my new tab!
});


Getting manifest.json right

What's the backbone of any extension? An accurate manifest.json file! Make sure you declare permissions and background script configurations right for a flawless tab creation.

Stay updated, stay ahead

Want to have the upper hand in the extension development race? Stay updated with Chrome's best practices. Pro-tip: developer.chrome.com is your knowledge arsenal.