javascriptgoogle-chrome-extensioncustom-events

JavaScript & Chrome Extensions: Pass Variable with Custom Events


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

Solution

  • 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