The error message "await is only valid within an async function" surfaced while working with pageAction.getTitle() in a Firefox web extension

Based on the information provided here, the method browser.pageAction.getTitle()

functions asynchronously and returns a Promise.

In my code, I am attempting to use it within a function in the following manner:

function title(t){
  if(t===undefined){
    try{
      let t=await browser.pageAction.getTitle({tabId:c.id});
    }
    catch(err){
      try{
        let t=await browser.browserAction.getTitle({tabId:c.id});
      }
      catch(err){
        console.log("Failed to get title. This add-on relies on the button's title.");
      }
    }
    return t;
  }
  else{
    try{
      browser.pageAction.setTitle({tabId:c.id,title:t});
    }
    catch(err){
      try{
        browser.browserAction.setTitle({tabId:c.id,title:t});
      }
      catch(err){
        console.log("Failed to set title. This add-on relies on the button's title.");
      }
    }
  }
  console.log("Setting button title: "+t);
}

Do you think this discrepancy is due to an oversight on my part or does it appear that the documentation may be outdated?

Answer №1

To make your function asynchronous, simply add the async keyword before the function declaration:

async function updateTitle(tab){
    await browser.pageAction.getTitle({tabId:tab.id});
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble receiving a response from axios

My goal is to use axios to submit a blog post and display a response message. If the response is "success," the process should proceed. For testing purposes, I am only using console.log("success ok"). However, I encountered a puzzling issue that I cannot f ...

Links to Help You Find Your Way

I have recently embarked on restructuring a website that currently utilizes frames and framesets. The new structure adopted is a typical structure.html: <body> <div> <div id="headerNavigation"></div> <div id="PageConten ...

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

Is it possible to load HTML content within a Sweet Alert pop-up

Below is the code I am using to call Swal: window.swal({ title: "Checking...", text: "Please wait", imageUrl: "{{ asset('media/photos/loaderspin.gif') }}", showConfirmButton: false, allowOutsideClick: false }); $.ajax({ t ...

What is the best way to set the `value` attribute and `v-model` attribute for a custom Vue component?

I am seeking to develop a unique Vue component that functions as a "radio div" - essentially, a div with the ability to act like a radio button where only one among multiple can be selected at a time. The div will also have a slot for including any desired ...

Manipulating CSS styles using Jquery only applies to elements with specific id attributes, and not to elements with class attributes

Having some difficulty figuring out a solution to this issue. Attempting to modify certain CSS properties using jQuery. The problem arises when one div has an ID, changing the property there works as expected. However, the other div only possesses a class ...

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

I currently have a form set up that is functioning properly, but I am looking to make some changes. Instead of redirecting the user to a new page with a success message upon submitting the form, I want the success message to be displayed in a div next to t ...

Angular.js:10671 Uncaught TypeError: Cannot read property of undefined

I am currently in the process of learning Angular through a course, despite having limited experience with JavaScript. I have been struggling to make ng-class function properly and cannot figure out why I keep encountering the error mentioned in the title. ...

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Imagine having two arrays with a similar structure like this: const individuals = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe ...

Retrieve the observable value and store it in a variable within my Angular 13 component

Incorporating Angular 13, my service contains the following observable: private _user = new BehaviorSubject<ApplicationUser | null>(null); user$ = this._user.asObservable(); The ApplicationUser model is defined as: export interface ...

Different approaches for expanding object.prototype while utilizing jQuery

Once upon a time, I made the mistake of trying to extend Object.prototype and ended up encountering errors in my jQuery file. After doing some research, I found out that extending Object.prototype is frowned upon in the JavaScript community due to potentia ...

When you select a single checkbox, all checkboxes within the array are automatically checked

I am looking to automate the checking of all checkboxes in a row when one checkbox is selected. The checkbox I am working with is part of an array. Specifically, I want to check all checkboxes in that row if one checkbox is checked. Below is a snippet of m ...

Loading a page with a subtle fade-in effect using jQuery

Looking to add some jQuery functionality to my navigation menu in order to have the page wrapper fade in and out when a main nav link is clicked. While the code itself is functioning properly, I am encountering a couple of issues: There is a brief flash ...

Can you explain the purpose of $winstonLoggerConfig<T>() and $winstonLogger<T>() in winston v3?

I'm currently using the winston logger and I want to implement flow typing for it. However, I am unsure of what exactly I should pass to it in order to achieve this. Below is my current logger setup: const logger = createLogger({ ... }); Missing typ ...

Instructions for retrieving the chosen option from a dropdown list within a formarray

<ng-container formArrayName="actors"> <ng-container *ngFor="let actor of actors['controls']; let i = index"> <ng-container> <div [formGroupName]="i"> <div class= ...

Tips for troubleshooting a Vue application using Google Chrome debugger

Instead of relying on console.log, I want to start using the Chrome Developer Debug Tool more frequently. I recently came across a helpful article about debugging in general (such as setting breakpoints and executing line by line) here. However, when atte ...

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

Exploring the Interaction Between Node.js and a Windows 10 Server on a Local Machine

I am curious about the interaction between Nodejs Server and a local machine. Specifically, I would like to understand how tasks such as: Thread Level CPU Cycle Socket Level IO Any help in clarifying this process would be greatly appreciated. ...

An elementary React project facing compilation issues

I'm currently exploring react hooks, but I encountered an error with the useReducer hook. The console displays the following error message: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happe ...

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...