What steps should I take to implement asynchronous functionality in my code for a Google Chrome Extension?

Question

What steps should I take to implement asynchronous functionality in my code for a Google Chrome Extension?

I am currently working on a Google Chrome extension that needs to gather data from two different servers and send it to another service. I am facing an issue with making the process asynchronous, even though the requests are functioning properly.

After searching for explanations on Google, I only came across basic tutorials involving timeouts. The Product-Server accepts the Ajax request, but I encounter a CORS Error with the Deal-Server. To work around this, I have resorted to using XMLHttpRequest.

document.addEventListener("DOMContentLoaded", function () {

    var createButton = document.getElementById("createButton");
    createButton.addEventListener("click", function () {
        getProducts();
        getDeals();
    }, false)


    function getProducts() {
        var list = [];
        chrome.tabs.getSelected(null, function (tab) {
            var Url = parseDealIdToUrl(tab.url)
                $.get(Url, function (data, status) {
                    const jsonData = JSON.parse(JSON.stringify(data))
                    const productArray = jsonData.data
                    productArray.forEach(product => {
                        productList.push(new Product(product.id, product.deal_id, product.product_id, product.name, product.item_price, product.quantity, product.duration, product.discount_percentage, product.currency, product.sum, product.sum_formatted))
                    });

                })
        });
    }

    function getDeals(maxPages = 1, currentPage = 1, akquises = []) {
        var akquiseList = akquises;

        if (currentPage <= maxPages) {
            var Url = dealUrl + currentPage
            var xhr = new XMLHttpRequest();
            xhr.open("GET", Url, true);
            xhr.setRequestHeader("Authorization", "Token token=")
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    const akquiseArray = JSON.parse(xhr.responseText);
                    akquiseArray.forEach(akquise => {
                        akquiseList.push(new Akquise(akquise.name, akquise.id))
                    });
                    getDeals(handlePagination(xhr.getResponseHeader("Link")), currentPage + 1, akquiseList)
                }
            }
            xhr.send();
        }
    }
}, false)

I aim to execute both functions concurrently and wait until both lists are populated before transmitting the data to the service. Any suggestions or insights would be greatly appreciated!

javascript ajax asynchronous google-chrome-extension promise

Answer 1

Answer №1

I'm a bit unsure about your request for making it asynchronous. As mentioned by wOxxOm, XMLHttpRequest is an asynchronous method. Are you referring to the consolidation of results from multiple asynchronous operations? Assuming that's the case, I will address it in this response.

Understanding Asynchronous Functions

To grasp how asynchronous functions operate, let's examine a simplified version of your code. Below, there is a primary function that invokes 2 distinct asynchronous functions. Upon executing this block of code, you will see a DONE message logged in the console, followed by Async 1 complete after 1 second, and Async 2 complete one more second later.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

(function main() {
  doAsync1();
  doAsync2();
  console.log('DONE');
})()

function doAsync1() {
  setTimeout(() => {
    console.log('Async 1 complete');
  }, 1000);
}

function doAsync2() {
  setTimeout(() => {
    console.log('Async 2 complete');
  }, 2000)
}

The reason why DONE is logged before the other statements is because doAsync1 and doAsync2 are asynchronous – they take a few seconds to complete their tasks. When you call doAsync1() within main, the JavaScript engine enters the doAsync1 function and begins executing lines of code. The first line contains a setTimeout call. This function takes its initial argument and schedules it for execution 1000 milliseconds later.

After completing all tasks in doAsync1, the JavaScript engine exits that function and proceeds to the next line, which is doAsync2. Similarly, doAsync2 schedules its callback function for future execution and returns.

Subsequently, the engine executes the console.log statement, displaying DONE in the console.

After 1000 ms, the scheduled callback by doAsync1 executes and logs Async 1 complete on the console. Another 1000 ms later, the callback triggered by doAsync2 logs Async 2 complete.

Utilizing Basic Callbacks

If doAsync1 and doAsync2 generate data that we need to utilize in main once both processes are completed, we traditionally employ callbacks in JavaScript to notify us when the desired operation finishes.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

function doAsync1(callback) {
  setTimeout(() => {
    console.log('Async 1 started');
    const data = "Async 1 payload";
    callback(data);
  }, 1000);
}

function doAsync2(callback) {
  setTimeout(() => {
    console.log('Async 2 started');
    const data = "Async 2 payload";
    callback(data);
  }, 2000);
}

(function main() {
  const response = {};
  doAsync1(handleAsync1);
  doAsync2(handleAsync2);

  function handleAsync1(data) {
    response.async1 = data;
    handleComplete();
  }
  function handleAsync2(data) {
    response.async2 = data;
    handleComplete();
  }
  function handleComplete() {
    if (response.hasOwnProperty('async1') && response.hasOwnProperty('async2')) {
      console.log('DONE', response);
    }
  }
})();

Introduction to Promises

Although functional, the above approach can be quite verbose. Promises serve as an abstraction for one-time callbacks, simplifying the chaining of work blocks together.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

// Promisified version of setTimeout
function timeout(duration) {
  return new Promise(resolve => {
    setTimeout(resolve, duration);
  });
}

function doAsync1(callback) {
  return timeout(1000).then(() => {
    console.log('Async 1 started');
    const data = "Async 1 payload";
    return data;
  });
}

function doAsync2(callback) {
  return timeout(2000).then(() => {
    console.log('Async 2 started');
    const data = "Async 2 payload";
    return data;
  });
}

(function main() {
  // Initiates both doAsync1 and doAsync2 simultaneously. Upon completion of both tasks, the promise resolves with both response values.
  Promise.all([
    doAsync1(),
    doAsync2()
  ]).then(response => {
    console.log('DONE', response[0], response[1]);
  });
})();

Using Async/Await

With the advent of ES2016, we were introduced to 2 new keywords: async and await. These keywords act as syntactic sugar, enhancing the handling of promises in JavaScript. For demonstration purposes, let's convert our Promises example to async/await.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

function timeout(duration) {
  return new Promise(resolve => {
    setTimeout(resolve, duration);
  });
}

async function doAsync1(callback) {
  await timeout(1000);
  console.log('Async 1 started');
  const data = "Async 1 payload";
  return data;
}

async function doAsync2(callback) {
  await timeout(2000);
  console.log('Async 2 started');
  const data = "Async 2 payload";
  return data;
}

(async function main() {
  const response = await Promise.all([
    doAsync1(),
    doAsync2()
  ]);
  console.log('DONE', response[0], response[1]);
})();

For more in-depth information on async functions, explore Jake Archibald's article titled Async functions - making promises friendly.

Answer 2

I'm a bit unsure about your request for making it asynchronous. As mentioned by wOxxOm, XMLHttpRequest is an asynchronous method. Are you referring to the consolidation of results from multiple asynchronous operations? Assuming that's the case, I will address it in this response.

Understanding Asynchronous Functions

To grasp how asynchronous functions operate, let's examine a simplified version of your code. Below, there is a primary function that invokes 2 distinct asynchronous functions. Upon executing this block of code, you will see a DONE message logged in the console, followed by Async 1 complete after 1 second, and Async 2 complete one more second later.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

(function main() {
  doAsync1();
  doAsync2();
  console.log('DONE');
})()

function doAsync1() {
  setTimeout(() => {
    console.log('Async 1 complete');
  }, 1000);
}

function doAsync2() {
  setTimeout(() => {
    console.log('Async 2 complete');
  }, 2000)
}

The reason why DONE is logged before the other statements is because doAsync1 and doAsync2 are asynchronous – they take a few seconds to complete their tasks. When you call doAsync1() within main, the JavaScript engine enters the doAsync1 function and begins executing lines of code. The first line contains a setTimeout call. This function takes its initial argument and schedules it for execution 1000 milliseconds later.

After completing all tasks in doAsync1, the JavaScript engine exits that function and proceeds to the next line, which is doAsync2. Similarly, doAsync2 schedules its callback function for future execution and returns.

Subsequently, the engine executes the console.log statement, displaying DONE in the console.

After 1000 ms, the scheduled callback by doAsync1 executes and logs Async 1 complete on the console. Another 1000 ms later, the callback triggered by doAsync2 logs Async 2 complete.

Utilizing Basic Callbacks

If doAsync1 and doAsync2 generate data that we need to utilize in main once both processes are completed, we traditionally employ callbacks in JavaScript to notify us when the desired operation finishes.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

function doAsync1(callback) {
  setTimeout(() => {
    console.log('Async 1 started');
    const data = "Async 1 payload";
    callback(data);
  }, 1000);
}

function doAsync2(callback) {
  setTimeout(() => {
    console.log('Async 2 started');
    const data = "Async 2 payload";
    callback(data);
  }, 2000);
}

(function main() {
  const response = {};
  doAsync1(handleAsync1);
  doAsync2(handleAsync2);

  function handleAsync1(data) {
    response.async1 = data;
    handleComplete();
  }
  function handleAsync2(data) {
    response.async2 = data;
    handleComplete();
  }
  function handleComplete() {
    if (response.hasOwnProperty('async1') && response.hasOwnProperty('async2')) {
      console.log('DONE', response);
    }
  }
})();

Introduction to Promises

Although functional, the above approach can be quite verbose. Promises serve as an abstraction for one-time callbacks, simplifying the chaining of work blocks together.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

// Promisified version of setTimeout
function timeout(duration) {
  return new Promise(resolve => {
    setTimeout(resolve, duration);
  });
}

function doAsync1(callback) {
  return timeout(1000).then(() => {
    console.log('Async 1 started');
    const data = "Async 1 payload";
    return data;
  });
}

function doAsync2(callback) {
  return timeout(2000).then(() => {
    console.log('Async 2 started');
    const data = "Async 2 payload";
    return data;
  });
}

(function main() {
  // Initiates both doAsync1 and doAsync2 simultaneously. Upon completion of both tasks, the promise resolves with both response values.
  Promise.all([
    doAsync1(),
    doAsync2()
  ]).then(response => {
    console.log('DONE', response[0], response[1]);
  });
})();

Using Async/Await

With the advent of ES2016, we were introduced to 2 new keywords: async and await. These keywords act as syntactic sugar, enhancing the handling of promises in JavaScript. For demonstration purposes, let's convert our Promises example to async/await.

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

function timeout(duration) {
  return new Promise(resolve => {
    setTimeout(resolve, duration);
  });
}

async function doAsync1(callback) {
  await timeout(1000);
  console.log('Async 1 started');
  const data = "Async 1 payload";
  return data;
}

async function doAsync2(callback) {
  await timeout(2000);
  console.log('Async 2 started');
  const data = "Async 2 payload";
  return data;
}

(async function main() {
  const response = await Promise.all([
    doAsync1(),
    doAsync2()
  ]);
  console.log('DONE', response[0], response[1]);
})();

For more in-depth information on async functions, explore Jake Archibald's article titled Async functions - making promises friendly.

Answer 3

Answer №2

Implement async/await functionality in your Chrome extension by using the code snippet below.

Instructions: Add the provided code snippet to both your content script and background script.

/**
 * Instructions:
 * let cookies = await asyncfy(chrome.cookies.getAll)({ url })
 * let tabs = await asyncfy(chrome.tabs.query)({active: true, currentWindow: true})
 *
 * @param fn  A function that takes one or more parameters, and the last parameter is a callback which has one or more parameter. The simplest one is chrome.management.getSelf
 * @returns {function(...[*]): Promise<any>}  Return one value if the results array has only one element, else return the whole results array
 */
let asyncfy = fn => (...args) => {
  return new Promise((resolve, reject) => {
    fn(...args, (...results) => {
      let { lastError } = chrome.runtime
      if (typeof lastError !== 'undefined') reject(lastError);
      else results.length == 1 ? resolve(results[0]) : resolve(results);
    });
  });
}


let isObject = function(obj) {
  var type = typeof obj;
  return type === 'function' || type === 'object' && !!obj;
};


// Enable async method for all functions with one callback.
let handler = {
  get: function(target, prop, receiver) {
    let value = target[prop]
    let type = typeof value
    if(type !== 'undefined') { // including null, false
      if( type === 'function') return value.bind(target); // correct the this for the functions, since we've substituted the original object to the proxy object
      return value;
    }

    if(prop.endsWith('Async')){
      let key = prop.replace(/Async$/, '')

      let method=target[key]
      let asyncMethod = asyncfy(method.bind(target));

      return asyncMethod;
    }
  }
}

// Proxy every leaf object
let asyncfyObj = handler => obj => Object.getOwnPropertyNames(obj)
  .filter(prop => isObject(obj[prop]))
  .forEach(prop => obj[prop] = new Proxy(obj[prop], handler))

// Intercept the getters of all objects in the chrome member
asyncfyObj(handler)(chrome)
asyncfyObj(handler)(chrome.storage)


// console.log(`active tab: ${JSON.stringify(await getActiveTabAsync())}`)
let getActiveTabAsync = async () => {
  let tabs = await chrome.tabs.queryAsync({active: true, currentWindow: true});
  return (tabs && tabs.length > 0) ? tabs[0] : null;
}

// chrome.storage.local.set({ foo: 'bar' });
// console.log(`foo: ${await getLocalStorageAsync('foo')}`)
let getLocalStorageAsync = async key => ( await chrome.storage.local.getAsync([key]) ) [key];

Testing: Add the following snippet to your background script and ensure that the necessary permissions are included in the manifest.json file.

(async () => {
console.log(cookies: ${JSON.stringify(await asyncfy(chrome.cookies.getAll)({ url: 'https://www.stackoverflow.com/' }))})

console.log(active tab: ${JSON.stringify(await getActiveTabAsync())})

chrome.storage.local.set({ 'foo': 'bar'});
console.log(storage: ${await getLocalStorageAsync('foo')})

console.log(extension install type: ${( await chrome.management.getSelfAsync() )['installType']})
} )()

Link to my gist

Answer 4

Implement async/await functionality in your Chrome extension by using the code snippet below.

Instructions: Add the provided code snippet to both your content script and background script.

/**
 * Instructions:
 * let cookies = await asyncfy(chrome.cookies.getAll)({ url })
 * let tabs = await asyncfy(chrome.tabs.query)({active: true, currentWindow: true})
 *
 * @param fn  A function that takes one or more parameters, and the last parameter is a callback which has one or more parameter. The simplest one is chrome.management.getSelf
 * @returns {function(...[*]): Promise<any>}  Return one value if the results array has only one element, else return the whole results array
 */
let asyncfy = fn => (...args) => {
  return new Promise((resolve, reject) => {
    fn(...args, (...results) => {
      let { lastError } = chrome.runtime
      if (typeof lastError !== 'undefined') reject(lastError);
      else results.length == 1 ? resolve(results[0]) : resolve(results);
    });
  });
}


let isObject = function(obj) {
  var type = typeof obj;
  return type === 'function' || type === 'object' && !!obj;
};


// Enable async method for all functions with one callback.
let handler = {
  get: function(target, prop, receiver) {
    let value = target[prop]
    let type = typeof value
    if(type !== 'undefined') { // including null, false
      if( type === 'function') return value.bind(target); // correct the this for the functions, since we've substituted the original object to the proxy object
      return value;
    }

    if(prop.endsWith('Async')){
      let key = prop.replace(/Async$/, '')

      let method=target[key]
      let asyncMethod = asyncfy(method.bind(target));

      return asyncMethod;
    }
  }
}

// Proxy every leaf object
let asyncfyObj = handler => obj => Object.getOwnPropertyNames(obj)
  .filter(prop => isObject(obj[prop]))
  .forEach(prop => obj[prop] = new Proxy(obj[prop], handler))

// Intercept the getters of all objects in the chrome member
asyncfyObj(handler)(chrome)
asyncfyObj(handler)(chrome.storage)


// console.log(`active tab: ${JSON.stringify(await getActiveTabAsync())}`)
let getActiveTabAsync = async () => {
  let tabs = await chrome.tabs.queryAsync({active: true, currentWindow: true});
  return (tabs && tabs.length > 0) ? tabs[0] : null;
}

// chrome.storage.local.set({ foo: 'bar' });
// console.log(`foo: ${await getLocalStorageAsync('foo')}`)
let getLocalStorageAsync = async key => ( await chrome.storage.local.getAsync([key]) ) [key];

Testing: Add the following snippet to your background script and ensure that the necessary permissions are included in the manifest.json file.

(async () => {
console.log(cookies: ${JSON.stringify(await asyncfy(chrome.cookies.getAll)({ url: 'https://www.stackoverflow.com/' }))})

console.log(active tab: ${JSON.stringify(await getActiveTabAsync())})

chrome.storage.local.set({ 'foo': 'bar'});
console.log(storage: ${await getLocalStorageAsync('foo')})

console.log(extension install type: ${( await chrome.management.getSelfAsync() )['installType']})
} )()

Link to my gist

What steps should I take to implement asynchronous functionality in my code for a Google Chrome Extension?

Answer №1

Understanding Asynchronous Functions

Utilizing Basic Callbacks

Introduction to Promises

Using Async/Await

Answer №2

Similar questions

Angular Js powered admin control panel

programming for the final radio button text entry

Is there a way to customize the animation for a button in material UI?

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

Can Sync blocking IO be implemented solely in JavaScript (Node.js) without the use of C code?

jQuery page hanging during DOM update with large data set

Performing jQuery Ajax Request with multiple Form Elements

Issue when Updating Component State: React child cannot be an object

Issue with calling jQuery method from the view in C# not executing the function as expected

Unable to retrieve post data during AJAX insertion in CodeIgniter

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

An error of type 'TypeError' has occurred, where it is unable to access the property 'render' of an undefined element in

Is there a maximum size limit for the Fabric.js Path Array?

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

Attempting to convert PHP tables into PDF format by utilizing jsPDF-auto-table to generate a beautifully structured PDF file containing the results of a PHP query with multiple records

What is the best method for me to filter the values in my array?

Unable to capture screenshot of hovered element using Cypress

Running a Blitz.js api handler triggers a Google Cloud Storage call failure with the message "error:0909006C:PEM routines:get_name:no start line"

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

Leverage the Power of JSON Data Manipulation in WordPress with Angular JS and the WordPress JSON