CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Wesley
Wesley

Reputation: 17

Passing variable from popup.js to background.js received as undefined

I'm trying to make a chrome extension that when the user enters in a web address and presses the button "Go to" it loads the webpage in a new tab. I am trying to pass the user input to the background page by using message passing but for some reason when the background tries to access the message the input is always undefined. I was wondering how to appropriately get the user input to the background so it will open the link in a new tab.

Manifest.json

{
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.3.1.2",
  "description":"User can enter in wepage and press button to open webpage in new tab.",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": [
    "<all_urls>"
  ],
  "js": ["jquery-2.1.4.min.js", "content.js"]
}
  ],
  "browser_action": {
    "default_icon": "arrow.png",
    "default_popup":"popup.html"

  },
  "permissions": [
          "tabs",
          "http://*/*",
          "https://*/*"
        ],
  "icons":{
         "128":"arrow.png"
  }
}

background.js

chrome.runtime.onMessage.addListener(
function(request,sender,sendResponse)
{
    if(request.message == "Go_To_Clicked"){
       chrome.tabs.create({ url: chrome.tabs.create({ url: request.websiteVar})
}
     })

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
<style>
  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }
  #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 400px;
  }
</style>

<script src="popup.js"></script>
  </head>
  <body>
<div id="status"></div>
<img id="image-result" hidden>
<form>
  Enter Link:
  <br>
    <input id = "userWebsite" type="text" name="webLink">
  </br>
</form>
<button id = "goTo" type="button">Go to</button>
<button id = "save" type="button">Save</button>
<script type="text/javascript" src="popup.js"></script>
  </body>
</html>

popup.js

window.onload=function()
  {
   document.getElementById("goTo").onclick=function()
    {
  var websiteVar = document.getElementById('userWebsite').value;
  chrome.runtime.sendMessage({ website: websiteVar, message:"Go_To_Clicked"});
}
  }

Upvotes: 0

Views: 1233

Answers (1)

Siddharth
Siddharth

Reputation: 7156

You need to use request.website instead of request.websiteVar(which does not exist at listener end)

    chrome.tabs.create({ url: request.website},function(tab){
       // Callback     
    })

Upvotes: 1

Related Questions