1

Hopefully, the title is self-explanatory. Basically I'm injecting two scripts on my popup.js and I want to expose a variable defined on one of them so the other script can use it.

This is the way I'm injecting the scripts:

let sortFunction = function (goSortParam) {
    if (goSortParam) {
      chrome.tabs.executeScript(
        null,
        { code: 'var goSortParam=true;' },
        function () {
          chrome.tabs.executeScript(null, { file: 'scripts/ajaxCalls.js' });
          chrome.tabs.executeScript(null, { file: 'scripts/frontEndDev.js' });
        }
      );
    } else {
      chrome.tabs.executeScript(
        null,
        { code: 'var goSortParam=false;' },
        function () {
          chrome.tabs.executeScript(null, { file: 'scripts/frontEndDev.js' });
        }
      );
    }
  };

This is the ajaxCalls.js:

const CONFIG_URL = chrome.extension.getURL('./data/config.json');
const promise = fetch(CONFIG_URL);

promise
  .then(function (response) {
    const processingPromise = response.json();
    return processingPromise;
  })
  .then(function (processedResponse) {
    const configData = processedResponse;
    console.log(configData.tags);
  });

The variable I want to expose is "configData" so "frontEndDev.js" can use it. Any ideas will be very welcome.

Lowtrux
  • 156
  • 2
  • 12
  • 41

1 Answers1

1

Safe approach

Use a special dedicated global variable, which you must define in a common script that runs first, for example:

chrome.tabs.executeScript({ code: 'var globalData = {foo: true}' });
chrome.tabs.executeScript({ file: 'scripts/ajaxCalls.js' });
chrome.tabs.executeScript({ file: 'scripts/frontEndDev.js' });

Then use globalData.whatever to access the data and globalData.whatever = 'anything' to set it. Since this is a standard JS object you can set a key inside even if it wasn't defined initially.

To make it even safer you can use the built-in function that converts objects into proper strings: 'var globalData = ' + JSON.stringify({ foo: true })

Unsafe approach

Share foo as window.foo = 'anything' then use it literally as foo or window.foo - both are the same, but the first one may require you to pacify your linting tool e.g. /* global foo */ in eslint.

It's unsafe in a content script because a web page can have an element with an id attribute containing the exact name of that variable, which historically creates an implicit global variable accessible both in the page context and in the isolated world of content scripts. Some pages may accidentally or intentionally break extensions by adding such an id and if they do it on the <html> element the variable will be created even for content scripts running at document_start.

The first approach was safe because it explicitly defined a global variable before running any dependent code (using a hardcoded name when defining, accessing, writing) thus overriding a possible implicit variable generated for a DOM element.

Some trivia

  • Such shared data can be used only by code that runs later in time (not simply the one that's "outside" the callback, more info)

  • All content scripts for the given page or frame run in the special "isolated world" of content scripts of this extension so they share globals like window or globalThis or any variables declared in the global scope of any script via var, let, const, class. For example, goSortParam in your code is a global variable so it's available in all content scripts directly. The isolated world is basically a standard JavaScript environment like that of any web page, but it's separate/isolated so variables (or DOM expandos) defined in one environment aren't visible in the other one. Every extension is assigned its own isolated world on every page/frame where its content scripts run.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • Thanks, @wOxxOm. Having in mind that the variable that I need to use in "frontEndDev.js" is coming from the "ajaxCalls.js" is kind of confusing for me how to assign that variable coming from the "ajaxCalls.js" to the global variable so "frontEndDev.js" can use it, can you please develop a little bit, this is super useful thanks. – Lowtrux Sep 09 '20 at 14:49
  • You are creating a new JSON file and assigning that to the globalData variable. In my case, I need to assign the JSON coming from "ajaxCalls.js" (configData). That's what I meant. – Lowtrux Sep 09 '20 at 14:54
  • I get that, the question I guess is how to assign configData to globalData, sorry maybe this is second nature for you but I'm still trying to get it. – Lowtrux Sep 09 '20 at 14:58
  • Use `globalData.whatever = 'anything'` so it becomes `globalData.configData = processedResponse` then you can read it as `globalData.configData`. – wOxxOm Sep 09 '20 at 14:59
  • Note that since globalData is declared via `var` you can simply overwrite it e.g. `globalData = configData`. And of course you can define a global variable named `configData` instead of `globalData`. – wOxxOm Sep 09 '20 at 15:01
  • Got it to work, thanks a lot for the explanation. Now is a matter to deal with the fact that since configData is assigned via ajax when I console.log for example in "frontEnddev.js" it consoles the first value first and after a while the right one with json. Many thanks @wOxxOm – Lowtrux Sep 10 '20 at 14:18