使用Chrome扩展程序从之前的标签获取变量

时间:2016-04-06 12:09:50

标签: javascript google-chrome google-chrome-extension tabs google-chrome-devtools

我打开Chromeextention一个新选项卡和新网站。但我需要将上一个标签中的URL复制到新标签但是我不能让它起作用?

这样做的最佳方式是什么?我一直在寻找使用剪贴板,但在javascript中不起作用。如何将变量传递给新选项卡?

编辑1

popup.html

<html>
  <head>
    <title>Youtube Downloader</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="scripts/background.js"></script>
  </head>
  <body>
    <input id="download_button" type="button" value="Download MP3"/>
    <br>
    <span id="validation_span"></span>
  </body>
</html>

清单

{
    "manifest_version": 2,
    "name":"Youtube Downloader",
    "description":"Voor het downloaden van de Youtube muziek",
    "version": "1",
    "browser_action": {
        "default_icon": "icon.png",     
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs"
        ,"http://www.youtube-mp3.org/*"
    ],
    "content_scripts" : [{
        "matches" : [ "http://www.youtube-mp3.org/*"]
        ,"js" : ["scripts/youtube-mp3.js"]
    }]
}

Background.js

addEventListener("load", init, false);


//GLOBAL VARIABLES
var succes = 0;
var validation_span;
var button;

function init(event) {
    button = document.getElementById("download_button");
    button.addEventListener("click", getUrl, false);    
}

function getUrl(event){
    chrome.tabs.getSelected(null, function(tab){
        maakLayout(event, tab.url);
    });
}

function maakLayout(event, url) {
    //Layout van de nieuwe View
    validation_span = document.getElementById("validation_span");
    var body = document.getElementsByTagName("body")[0];
    body.style.width = "300px";
    var br = document.getElementsByTagName("br")[0];
    br.remove();
    button.remove();

    var result = urlValidation(url);

    if(succes == 1){
        validation_span.style.color = "green";
        result = url;
        chrome.tabs.create({"url": "http://www.youtube-mp3.org/nl"}, function(newTab){
        });
    }
    if (succes == 0){
        validation_span.style.color = "red";
    }
    validation_span.innerHTML = result;
}

function urlValidation(url){
    if(url.indexOf('www.youtube.com/watch?v=') >= 0){
        succes = 1;
        return "Url is OK";
    }else{
        succes = 0;
        return "Only Youtube links allowed";
    }
}

youtub-mp3.js

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
    alert("Binne");
    if (msg.action == 'url') {
        alert("Message recieved!");
        var copy = msg;
        var inputfield = document.getElementById("youtube-url");
        inputfield.value = copy;
    }
});

1 个答案:

答案 0 :(得分:0)

修改

我的原始答案不起作用,因为在内容脚本注册onMessage侦听器之前将发送消息。

然而,我可以使用var z = "+" if (z!="+" && z!="-" && z!="*" && z!="/" && z!="%") document.write("You must give me operator (+ - * / %)"); else document.write("Yess!");

让它工作
chrome.tabs.executeScript

然后您应该可以删除youtube-mp3.js。

如果我已经理解了您要正确执行的操作,那么您只需要对代码进行一些小改动。

在background.js中:

chrome.tabs.create({"url": "http://www.youtube-mp3.org/nl"}, function(newTab) {

    var script = "var inputfield = document.getElementById(\"youtube-url\"); inputfield.value = \"" + url + "\"";
    chrome.tabs.executeScript(newTab.id, { code: script }); 

});

的YouTube-mp3.js:

// your existing code
chrome.tabs.create({"url": "http://www.youtube-mp3.org/nl"}, function(newTab){
    // additional code
    chrome.tabs.sendMessage(newTab.id, {action: 'newUrl', url: url});    
});