1

When I load an https file within popup.html, it cases a significant delay.

To circumvent this issue, how can I put a function in background.js which, each time the browser is opened, fetches the version number and stores it locally?

Then, once stored locally, there is no latency when trying to fetch this internal resource (as opposed to trying to load an external https javascript file every time you click the extension popup button).

And after that, how can I call said internal resource inside the popup.html?

SUMMARY:
* how to fetch remote text value on each initial browser load?
* how to store that value locally?
* how to fetch the now locally stored number to display in popup.html?

The entire external file is simply this:

function myVersion1(){ return "1.0"; }

In other words, I want to store the value of 1.0, locally, to be later called in the popup.html. Then say I changed the number in the external file to 2.0, then I want the extension to query this and update the previous 1.0 which is stored locally, to 2.0 the next time the user opens their browser.

user2651403
  • 478
  • 5
  • 17

2 Answers2

1

You would use Chrome local storage, you would store a value like this:

chrome.storage.local.set({'foo': bar});

and retrieve it like this:

chrome.storage.local.get('foo', function (result) {
    var foo = result['foo'];
    if(typeof foo === 'undefined') // not set
});

If you do this, you will need to add this into your manifest file:

"permissions" : ["storage"],
Matthew Riches
  • 2,298
  • 18
  • 26
0

I'm far from a Chrome extension expert, but I having a partially similar problem with a 3rd party simple remote HTTP based service that I want to integrate into a Chrome extension. This might help with the external domain query part, you can combine it with the local storage suggestions from Matthew Riches.

From my popup.js I include an AJAX request to the remote server. You can perform it from a background.js on a timed interval if you need to.

var status = "http://192.168.1.28:8081/";
window.onload = function(){
$.ajax({
      type: 'GET',
      url: status,
      dataType: 'html',
      success: function(data) {
          try {
            // Do what you want with the data, like local storage, etc...
          } catch(e) {
            $('#status').text("Error: " + e.message);
            return;
          }
      }
});

}

You'll need to add "permissions" for the remote server's domain/IP in your manifest.json though. If you don't an AJAX request like this would be considered a cross-domain request security violation. e.g. you're not typically allowed to, under the covers, request data from another domain like www.google.com loading AJAX from www.mybadsite.com.

{
  "name": "Test",
  "version": "0",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "default_title": "Test",
    "default_popup": "status.html",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.js", "content.js" ],
    "css": ["customStyles.css"],
    "matches": [ "http://*"]
  }],
  "permissions": [
      "http://192.168.1.28/"
  ]
}

There are other ways of sharing data between content scripts. You can add an event listener to the DOM/document, then dispatch to it from somewhere else that's running, like background.js and popup.js. Here's another SO post with a simple example that works: (Note that it has nothing to do with external querying, see my note above for more on it, or search for CORS)

How do I pass back data from a remote window to a chrome extension's background page?

Community
  • 1
  • 1
dubmojo
  • 6,660
  • 8
  • 41
  • 68