CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
orange
orange

Reputation: 5405

Opening a new tab on Google Chrome Extension

This is my background.html file, It works fine when opening in current tab but I want it to open in new tab, what am I doing wrong?

<html>
<head>
<script>
  // Called when the user clicks on the browser action.
  chrome.browserAction.onClicked.addListener(function(tab) {
    var action_url = "javascript:location.href='http://www.reddit.com/submit?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)";
    chrome.tabs.create(tab.id, {url: action_url}, function(tab));
  });
</script>
</head>
</html>

Upvotes: 11

Views: 41465

Answers (3)

abraham
abraham

Reputation: 47913

You should read the chrome.tabs.create documentation again. You are passing it invald parameters. You are also using location which is from the background.html document not the webpage document the code is expecting instead of the tab parameter passed to the chrome.browserAction.onClicked listener.

<html>
<head>
<script>
  // Called when the user clicks on the browser action.
  chrome.browserAction.onClicked.addListener(function(tab) {
    var action_url = "http://www.reddit.com/submit?url=" + encodeURIComponent(tab.href) + '&title=' + encodeURIComponent(tab.title);
    chrome.tabs.create({ url: action_url });
  });
</script>
</head>
</html>

Upvotes: 16

Mikett
Mikett

Reputation: 86

<html>
 <head>
  <script type="text/javascript">
   window.master = ({
     newtab: function(url, callback) {
       callback = callback === true ? (function() { this.close(); }) : callback;

       try {
         chrome.tabs.create({
           url: url
         });

         if(typeof callback === "function") { callback.call(this, url); }
       } catch(e) {
         /* Catch errors due to possible permission issues. */
       }
     },

     link: function(event, close) {
       event = event ? event : window.event;
       event.preventDefault();
       this.newtab(event.href, close);
     },

     close: function() { window.self.close(); }
   });
  </script>
 </head>

 <body>
  <!-- Usage is simple:

        HTML:
         <a href="http://example.com/" onclick="master.link(event)" />

        JavaScript:
         master.newtab("http://example.com/", true);
  -->
 </body>
</html>

If you insist on using a popup and want it to close as soon as it is opened, then use what is above. Simply add the link string and a true boolean to the master.newtab function to have it open the new tab and then close the popup.

If you change your mind about closing the popup, you can replace the true boolean with a function to execute if the new tab was created without any errors. You can also use the master.link function for calling the master.newtab function from an anchor element.

The best thing about using Chrome Extensions is you never have to worry about support issues! :D

Upvotes: 1

user219882
user219882

Reputation: 15844

You can try this

<html>
...
<body>
    <script>
    function createTab() {
        chrome.tabs.create({url: "http://www.stackoverflow.com"});
    }
    </script>
    <a href="#" onclick="createTab();">Create a new tab</a>
</body>
</html>

Upvotes: 2

Related Questions