JavaScript & Chrome Extensions: Pass Variable with Custom Events

Question

manifest.json

{
    "name": "Omegle IP",
    "version": "0.5",
    "options_page": "options.html",
    "options_ui": {
    "page": "options.html",
    "open_in_tab": false
    },
    "background": {
    "scripts": ["background.js"],
    "persistent": true
    },
    "manifest_version": 2,
    "description": "Become a Hacker; You see the IP in the chat window",
    "permissions": ["tabs", "https://*.omegle.com/*", "storage"],
    "web_accessible_resources": ["inject.js"],
    "content_scripts" : [{
        "matches" : ["https://*.omegle.com/*"],
        "run_at": "document_end",
        "js" : ["contentscript.js"]
    }],
    "icons": {
        "16": "16.png",
        "32": "32.png",
        "48": "48.png",
        "128": "128.png"
    }
}

contentscript.js

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('inject.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

inject.js

chrome.storage.sync.get(['tracker', 'api'], function (obj) {
        tracker = obj.tracker;
        api = obj.api;
        getIp(tracker, api);
    });

function getIp(tracker, api){
    console.log(tracker + api)
}

I cant access chrome.storage.sync.get from inject.js. But I need to... Is there a way to put the chrome request to the contentscript and pass the variables to inject.js contentscript.js basically just creates a script field and puts the inject.js into it. the inject.js file is normally larger, but you dont need all of that There is a post "https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions" how to implement this, i tried but i didnt achieve to get it to work... Could you please provide a working method, to get it to work?

Update:

contentscript.js

chrome.storage.sync.get(['tracker'], function (obj) {
        tracker = obj.tracker;
        ChromeExtensionData(tracker);
    });
function ChromeExtensionData(tracker) {
    var data = {
        tracker: tracker,
    };
    console.log("Sending:", tracker); // works
    console.log(document.dispatchEvent(new CustomEvent('ChromeExtensionData', { detail: data }))); // true
}

inject.js

document.addEventListener('ChromeExtensionData', function (e) {
  var tracker = e.detail;
  console.log('received', tracker);
});
getIp(tracker); // tracker is not definied

Its in the comments whats wrong. And i really dont know why

Update:

inject.js

document.addEventListener('ChromeExtensionData', function (e) {
  console.log("Recieved"); // test -> doesnt work
  var tracker = e.detail;
  console.log('received', tracker); // doenst log anything
  getIp(tracker);
});

contentscript.js

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('inject.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);
chrome.storage.sync.get(['tracker'], function (obj) {
        tracker = obj.tracker;
        ChromeExtensionData(tracker);
    });
function ChromeExtensionData(tracker) {
    jsontracker = JSON.stringify(tracker);
    var data = {
        tracker: jsontracker
    };
    console.log("Sending:", tracker); // works
    document.dispatchEvent(new CustomEvent('ChromeExtensionData', { detail: data }));
}

Answer 1

Working Answer

inject.js

document.addEventListener('ChromeExtensionData', function (e) { // waits for variable from contentscript
  var data = e.detail;
  tracker = data.tracker;
  trollChecked = data.trollChecked;
  getIp(tracker, trollChecked);
});

contentscript.js

var s = document.createElement('script');
s.src = chrome.runtime.getURL('inject.js');
s.onload = function() {
    this.remove();
    chrome.storage.sync.get(['tracker', 'troll'], function (obj) {
        tracker = obj.tracker;
        trollChecked = obj.troll
        var data = {
            tracker: tracker,
            trollChecked: trollChecked
        };
        document.dispatchEvent(new CustomEvent('ChromeExtensionData', { detail: data })); // gets variable from optionspage and sends to the script
    });
};
(document.head || document.documentElement).appendChild(s);

You can learn how to set chrome variables from here

Big Shoutout to wOxxOm for helping me and making this result possible