How to call chrome.tabs.create API from content script?

Question

I am developing a chrome extension where I want to inject a button on a web page. On clicking the button I want to call chrome.tabs.create API to open an HTML page into new tab.

As we know we can't directly open the tab using the content script, so what is the solution for implementing the above functionality.

Lets say I am having an element name "button" injected on the button i have added the evnetHandler using following code but how to use this function to create the new tab in background.js

button.addEventListener('click',clickhandeler,true);

manifest.json file:-

{
  "name": "my chrome extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "open the tab when button is cllicked",

  "permissions":["activeTab","tabs"],
    "background": {
    "scripts": ["event.js"],
    "persistent": false
},

  "browser_action": {
    "name": "Manipulate DOM",


    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.min.js", "inject.js" ],
    "css": [ "inject.css" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

Why don't you send a message to your background script and have it open the new tab? — iCollect.it Ltd
– iCollect.it Ltd, Commented Sep 1, 2015 at 11:35
can you please elaborate how to do that ? I have edited the question accordingly. — Alok Yadav
– Alok Yadav, Commented Sep 1, 2015 at 11:40

iCollect.it Ltd · Accepted Answer · 2015-09-01 13:07:19Z

3

Following from comment: Why don't you send a message to your background script and have it open the new tab?

In your page script:

$('button').click(function(){
     chrome.runtime.sendMessage("newtab");
});

In your background.js

chrome.runtime.onMessage.addListener(function(message){
  if (message == "newTab){
     var url = "http://google.com/";
     chrome.tabs.create({ url: url });
  }
});

Note: this is a very simple example for this answer as you do not show your HTML. button will just match any button so you need to update that selector to match your HTML. Also, we typically have a payload structure used for messages, containing a message type (string) and other parameters.

edited Sep 1, 2015 at 13:07

answered Sep 1, 2015 at 12:59

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ersin-ertan Over a year ago

Close the "newTab" in your background.js example

Collectives™ on Stack Overflow

How to call chrome.tabs.create API from content script?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related