使用Chrome扩展从以前的选项卡中获取变量

Get variable from previous Tab with Chrome Extentions

本文关键字：选项 获取 变量 Chrome 扩展 使用      更新时间：2024-02-05

我用chromeextension打开了一个新的选项卡和新的网站。但是我需要将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"]
    }]
}

背景.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;
    }
});

编辑

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

然而，我能够通过使用chrome.tabs.executeScript:使其工作

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.

如果我已经理解了您试图正确地做什么，那么您只需要对代码进行一个小的更改。

在background.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});    
});

youtube-mp3.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action == "newUrl")
      // Do whatever you want to do with the url
      console.log(request.url);
  });
相关文章：