创建 chrome 扩展选项卡的网址不起作用

Question

我正在创建一个 chrome 扩展，它访问 api 并解析 json 提要以获取数据。其中一个数据是 link，我希望 link 在新选项卡中打开。我使用 chrome.create.tabs 来做到这一点。但不是打开带有指定 url 的选项卡，而是像这样打开

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

这是我的 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});

}

这里的stream_url是存放json解析出来的url的变量。

这里是从

解析出来的json

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

我希望新标签打开 http://www.twitch.tv/imaqtpie 而不是 chrome-extension://app_id/%22http://www.twitch.tv/imaqtpie .提前致谢。顺便说一句，使用 <base href="http://" target="_blank"> 不起作用。

Answer 1

所以问题出在 url。你的url在使用chrome.tabs.create时是不正确的，因为%22表示ASCII Encoding Reference中的字符"。当您在 html 中获取元素时，您应该在 url 中将其删除。很高兴有帮助！

创建 chrome 扩展选项卡的网址不起作用

Urls in creating chrome extension tabs do not work

javascript

google-chrome-extension