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 }));
}

In that post you've linked there's [another answer that shows how to do it](https://stackoverflow.com/a/19312198). — wOxxOm, Nov 10 '20 at 11:22
i know, but im really dumb and don't know how to transfer it to my problem — kaaaxcreators, Nov 10 '20 at 18:48
1) Put the first fragment - the listener - in inject.js, 2) move `chrome` call into contentscript.js, 3) put the second fragment - the initiator - inside the callback of the chrome call right after getIp line. — wOxxOm, Nov 10 '20 at 18:55
@wOxxOm i posted an update that unfortunately still doesnt work — kaaaxcreators, Nov 11 '20 at 17:24
Almost! Move `getIp(tracker)` line inside the event callback function because the event arrives asynchronously (all `chrome` API callbacks are asynchronous). — wOxxOm, Nov 11 '20 at 18:45
shot! i dont know why i didnt do that lul @wOxxOm thanks a lot — kaaaxcreators, Nov 11 '20 at 19:07
@wOxxOm still doesnt work as expected, now i really dont know why — kaaaxcreators, Nov 11 '20 at 19:18
I don't see where you add inject.js in the content script. You were doing it in your initial code. — wOxxOm, Nov 11 '20 at 19:21
Try moving the entire chrome.storage.sync.get block inside s.onload function callback. — wOxxOm, Nov 11 '20 at 19:38

kaaaxcreators · Accepted Answer · 2020-11-11T20:31:46.003

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

JavaScript & Chrome Extensions: Pass Variable with Custom Events

Update:

Update:

1 Answers1

Working Answer