javascript - How to open a new tab from chrome extension popup

I am new to chrome extension. I have tried the first sample exercise for creating extension. Now I am trying to open an URL in a new tab from the extension popup. Just I have added a HTML anchor tag in the popup.html page.

a href="www.google">Click</a>

But its not opening. It is trying to open the URL with following url within the popup itself.

chrome-extension://ljamgfaclheagbikmcagffcbdbcoodna/www.google

My popup.html has this code.

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
    </style>
    <!-- JavaScript and HTML must be in separate files for security. -->
     </head>
  <body>
  <b>Karthick</b>
  <a href="www.google">Click</a>
  </body>
</html>

And My Manifest.json have the following JSON

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

I dont have written anything in popup.js I searched for it how to do it. But they said that I have to use the following.

chrome.tabs.getSelected({}, function(tab) {
  chrome.tabs.update(tab.id, {url: ''});
});

But I don't know the proper way/where to do it. Please tell me the steps to do it. Thanks in advance.

a href="www.google.">Click</a>

But its not opening. It is trying to open the URL with following url within the popup itself.

chrome-extension://ljamgfaclheagbikmcagffcbdbcoodna/www.google.

My popup.html has this code.

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
    </style>
    <!-- JavaScript and HTML must be in separate files for security. -->
     </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.">Click</a>
  </body>
</html>

And My Manifest.json have the following JSON

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

I dont have written anything in popup.js I searched for it how to do it. But they said that I have to use the following.

chrome.tabs.getSelected({}, function(tab) {
  chrome.tabs.update(tab.id, {url: 'http://google.'});
});

But I don't know the proper way/where to do it. Please tell me the steps to do it. Thanks in advance.

Share Improve this question edited Jan 25, 2016 at 9:52 Xan 77.7k18 gold badges197 silver badges217 bronze badges asked Oct 31, 2012 at 10:07 flykarthick 791 gold badge7 silver badges15 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

here is the solution, just add the following code to popup.js:

$(function() {
  $('#s').click(function() {
     chrome.tabs.create({url: 'http://www.google.'});
  });
});

document.addEventListener('DOMContentLoaded');

and update your anchor tag to look something like this:

<a id="s" href="www.google.">Click</a>

since we are using jquery selectors update your popup.html to:

<!doctype html>
<html>
  <head>
    <style>
    </style>
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.">Click</a>
  </body>
</html>

and to allow jquery in popup.html update your manifest to look something like:

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ],  //<<--- do not miss this ","
  "content_security_policy": "script-src 'self' https://ajax.googleapis.; object-src 'self'"
}

If this does not work, lemme send you the crx of this. Cheers!

Easy. Put this in popup.html:

<a href='google.' target='_newtab'>Click</a>

Or put this in the JS file:

window.open('http://google.','_newtab');

You may add a onclick-listener for the link.

var link = document.getElementById("link");
link.addEventListener("click", function(){
  chrome.tabs.getSelected({}, function(tab) {
    chrome.tabs.update(tab.id, {url: 'http://google.'});
  });
}, false);

However i would use the chrome.tabs.create() function.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to open a new tab from chrome extension popup - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)