CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Imprfectluck
Imprfectluck

Reputation: 684

Urls in creating chrome extension tabs do not work

I am creating a chrome extension which access a api and parses the json feed to get data. One of the data is a link and I want the link to be opened in a new tab. I use chrome.create.tabs to do it. But instead of opening a tab with specified url it opens like this

chrome-extension://app_id/%22http://www.twitch.tv/imaqtpie%22

Here is my popup.js

document.addEventListener('DOMContentLoaded', init);

function init(){
    var elem = document.getElementById('Add');
    elem.addEventListener('click',func);
}
function func(){

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.twitch.tv/kraken/search/streams?q=league%20of%20legends", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      // innerText does not let the attacker inject HTML elements.
      var qtpie=JSON.parse(xhr.responseText);
      var display_name = JSON.stringify(qtpie.streams[0].channel.display_name);
      var stream_status = JSON.stringify(qtpie.streams[0].channel.status);
      var stream_url=JSON.stringify(qtpie.streams[0].channel.url);
          var res = display_name+" : "+stream_status+"\n"+stream_url;
          console.log(stream_url);


          var a = document.createElement('a');
          var linkText = document.createTextNode(res);
          a.appendChild(linkText);

        a.setAttribute('href', stream_url);
       a.addEventListener('click', link_handler(stream_url));
          document.getElementById("status").appendChild(a);

        var magic=activateLinks();
    //  document.getElementById("status").innerText = res;
    }
  }
  xhr.send();

}
function activateLinks()
{
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
      (function () {
          var ln = links[i];
          var location = ln.href;
          ln.onclick = function () {
              chrome.tabs.create({active: true, url: location});
          };
      })();
  }
}

function link_handler(url)
{
  // Only allow http and https URLs.
   if (url.indexOf('http:') != 0 && url.indexOf('https:') != 0) {
     return;
   }
   chrome.tabs.create({url: url});

}

Here stream_url is the variable that stores the parsed url from json.

here is the json from which it is parsed from

"video_banner":null,
            "background":null,
            "profile_banner":null,
            "profile_banner_background_color":null,
            "partner":true,
            "url":"http://www.twitch.tv/imaqtpie",
            "views":91792487

i want the new tab to open http://www.twitch.tv/imaqtpie instead of chrome-extension://app_id/%22http://www.twitch.tv/imaqtpie . Thanks in advance. Btw using <base href="http://" target="_blank"> does not work.

Upvotes: 1

Views: 124

Answers (1)

Dayton Wang
Dayton Wang

Reputation: 2352

So the problem is for the url. Your url is improper when using chrome.tabs.create, because %22 indicates the character " in ASCII Encoding Reference. You should strip it off in the url when you get the element in html. Glad it helps!

Upvotes: 2

Related Questions