simple way to run background.js file when a button on popup.html is clicked

Question

I have been trying to run a function in my background.js file when I click a button on my popup.html file, I have tried a bunch of examples online and so far none of them have worked for me.

Here is what Ive tried:

$(".start-btn").click(function() {

    var task = loadTaskFromStorage($("#select-task").val());

    var checkbox = $('input[type="checkbox"]');
    var autobuy = $(checkbox).prop('checked');
    var delay = $("#checkout-ms").val();
    var count = localStorage.getItem('count');


    chrome.storage.sync.set({'task': task.cells, 'count': count}, function() {

    });

    chrome.storage.sync.set({'autobuy': autobuy, 'delay': delay}, function() {
    });

    chrome.runtime.sendMessage({'run': true);

then in the background.js file tried to do this:

chrome.runtime.onMessage.addListener(function(message, sender) {
  if(!message.run) return;

  finder();
});

function finder() {
    //pulling json info and opening url loop
});

I want to chrome.storage.sync.get all my things that I saved in my popup.js file then run the function.. I have tried a bunch of solutions and so far none of them have worked for me...

Thank you for helping me in advance <3!

Wht is `finder` supposed to do? Pull the values of `task`, `count`, `autoby` and `delay` from the storage? — ibrahim mahrir, Sep 08 '18 at 21:37
Why not send'em over as part of the message? `chrome.runtime.sendMessage({ run: true, task: ..., count: ... });` — ibrahim mahrir, Sep 08 '18 at 21:42
BTW the problem you're facing is because of the asynchronous nature of `chrome.storage.sync.set`. That function doesn't do its job right away, so `chrome.runtime.sendMessage` actually happens before anything is set on the storage. — ibrahim mahrir, Sep 08 '18 at 21:44
Send'em over to the background, run the save query there and use whatever you want, I guess. — ibrahim mahrir, Sep 08 '18 at 21:53
@ibrahimmahrir Ok i tried sending them all as a message, and when I clicked the button nothing showed up in the console — , Sep 08 '18 at 21:53

ibrahim mahrir · Accepted Answer · 2018-09-08T22:22:47.633

1

popup.js:

Accumulate the data then send it over to the background:

$(".start-btn").click(function() {

    var task = loadTaskFromStorage($("#select-task").val());

    var checkbox = $('input[type="checkbox"]');
    var autobuy = $(checkbox).prop('checked');
    var delay = $("#checkout-ms").val();
    var count = localStorage.getItem('count');

    chrome.runtime.sendMessage({ run: true, data: {
        task: task.cells,
        count,
        autobuy,
        delay
    } });
}

background.js:

Retrieve the data sent over from the popup, store it and use it:

chrome.runtime.onMessage.addListener(function(message, sender) {
    if(!message.run) return;

    var data = message.data;
    chrome.storage.sync.set(data, function() { /* ... */ });
    console.log(data);
});

edited Sep 08 '18 at 22:22

answered Sep 08 '18 at 22:11

ibrahim mahrir

31,174
5
48
73

what do I put between the { /* ... */} ?? – Sep 08 '18 at 22:57
Becuase right now when I press the button nothing shows up in the console – Sep 08 '18 at 22:58
@developer12 The background script has a separate console. [**You'll have to open that console first**](https://stackoverflow.com/q/10257301/9867451) to see the logs. The `/* ... */` are the code of the callback of `chrome.storage.sync.set`, you put code there to check if setting the storage has succeded or not. Read more about it in chrome extension docs! – ibrahim mahrir Sep 08 '18 at 23:20

simple way to run background.js file when a button on popup.html is clicked

1 Answers1