CODEWITHSUNDEEP
javascripthtmlgoogle-chromegoogle-chrome-extension
Stevie
Stevie

Reputation: 89

Chrome Extension: pushing information gathered before a new tab is created?

So I have a popup.html which loads a script (popup.js) as its header for the browser action. This then makes calls to a site to get information necessary.

I got all the information necessary using XMLHTTPRequests and saved it into variables in popup.js.

Now I try to create a new tab, load a webpage and then use the information I saved to fill out a form.

chrome.tabs.create({ 'url': "https://site.html" });

This line is in popup.js

This takes my to the site desired quickly but seems to remove all the information I had previously retrieved. It does not even alert me the information I want even though I ask for it before making the tab. How would I go about creating a tab with a specific url and then using the information I gathered previously in popup.js to fill a form on it all while contained inside popup.js? Is my logic flawed? Thank you so much for any advice.

UPDATE: Ill edit this to make more sense.

this is my popup.js 

function do(){
    var xhr = new XMLHttpRequest();
    xhr.open("Get", Url);
    xhr.send();
    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            var dogName = this.responseText;
            alert(dogName)
}
do();
chrome.tabs.create({ 'url': "site.html" });

inside site.html there is a form. I was to do this to that form.

document.getElementById('form').getElementsByTagName('input')[0].value = dogName; 
document.getElementById("btnOK").click()

But it wont do anything if the line 

chrome.tabs.create({ 'url': "https://site.html" });

exists, it will only take me to that page and not run do() to alert anything.

By removing the create line, the extension alerts me of the information I want.

Upvotes: 0

Views: 140

Answers (1)

10100111001
10100111001

Reputation: 1832

You will need to use an event page instead of a popup. The event page is a long-running script that will allow you to retrieve your data on-demand. The tab that is opened will also need to run a content script. This content script will send messages to the event page to retrieve the fetch XHR data and then apply the data to the form fields. Content scripts can be injected using either the manifest.json file or directly on the chrome.tabs.create function passed in as the second argument.

Note: The below code is a close example of how the files and structure should be. It has not been tested and it should be used to get a general idea of the solution.

Manifest.json

  "content_scripts": [{
    "matches":    ["*://eample.com/formpage.html"],
    "js":         ["content.js"],
    "run_at":     "document_idle"
  }],

OR

popup.js

chrome.tabs.create({ 'url': "https://example.com/formpage.html" }, function(tab1) {
  chrome.tabs.executeScript(tab1.id, {file: 'content.js', run_at});
});

content.js

chrome.runtime.sendMessage({data: "dogName"}, function(response) {
  var dogName = response.data;
  document.getElementById('form').getElementsByTagName('input')[0].value = dogName;
});

event.js

function getDogName(callback){
  var xhr = new XMLHttpRequest();
  xhr.open("Get", Url);
  xhr.send();
  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        var = dogName = this.responseText;
        callback({data: dogName});
    }
  });
}
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.data === "dogName") {
      getDogName(sendResponse);
      return true;
    }
});

You can find more details about extension communications here: Message Passing.

Upvotes: 1

Related Questions