Making a Chrome Extension: How to Open Link in New Tab

Last year I created a Chrome extension that opens a new Picture in Picture window. With the extension, I can see my browser (or a different window) in a small window in a different application.

I want to open the extension in a new tab.

Here’s how to do that.

You’ll need a manifest.json file with the following content:

{
  "manifest_version": 2,
  "name": "Picture in Picture",
  "description": "This extension will open a new tab for Picture in Picture mode",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "camera.png"
  },
  "icons": {
    "64": "camera.png"
  },
  "permissions": ["tabs"]
}

Please note the permissions and the background keys.

background.js contains one function:

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.create({
    url: chrome.extension.getURL('index.html'),
    selected: true,
  })
})

That means that the extension will open the index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Picture In Picture</title>
  </head>
  <body>
    <!-- your html code -->
    <script src="./index.js"></script> <!-- index.js contains the main logic -->
  </body>
</html>

You can see the complete code on GitHub.

Making a Chrome Extension: How to Open Link in New Tab

Links