Guide to using the Firefox WebExtensions API to make AJAX requests to the website of the current tab

I am trying to develop a web extension that will initiate an AJAX call to the website currently being viewed by the user. The specific endpoint I need to access on this website is located at /foo/bar?query=.

Am I facing any obstacles in using either the fetch API or an XMLHttpRequest to reach out to this endpoint?

Despite my attempts, I keep encountering a server error message when using these methods. Additionally, there is no activity showing up in the network tab while troubleshooting my extension. I have a suspicion that there may be a WebExtensions API designed for this particular task, but unfortunately, I have been unable to locate it.

javascriptajaxgoogle-chrome-extensionfirefox-addon-webextensionsbrowser-tab

Answer №1

Obtain a detailed description of the current tab that the user is viewing by using browser.tabs.getCurrent(). This description includes a property called url, which can be used to initiate an XMLHttpRequest.

browser.tabs.getCurrent().then(currentTab => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", currentTab.url);
    // ...
});

Edit:
It has been highlighted by Makyen that tabs.currentTab is not the ideal method to use. Instead, utilize tabs.query along with active: true. The following code snippet should suffice:

browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
    let currentTab = tabs[0];
    let xhr = new XMLHttpRequest();
    xhr.open("GET", currentTab.url);
    // ...
})

To enable cross-origin requests, ensure that your manifest.json file grants permission as shown below:

{
  ...
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  ...
}

For example, adding <all_urls> will allow HTTP requests to any URL.

Further information can be found here.

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

Implemented rounded corners to the bar chart background using Recharts

I have been experimenting with creating a customized bar chart that includes border radius for the bars. While I was successful in adding border radius to the bars themselves, I am struggling to add border radius to the background surrounding the bars. Any ...

javascriptreactjsrecharts

Difficulty encountered when trying to template routes with more than one slash in Angular-route

I'm encountering difficulties with my Express+Jade+AngularJS[v1.2.22] application when attempting to access routes such as "mydomain.com/something/somethingelse" or "mydomain.com/something/another/last", which include one or more path subdivisions. T ...

javascriptangularjsexpressangular-routing

The React component is experiencing a delay in its updates

I've been experiencing delayed updates when using React.useEffect(). Can anyone shed some light on why this might be happening? function Process(props) { const [results, setResults] = React.useState({ number: "", f: {} }); let ...

javascriptreactjsuse-effectuse-state

Cease the ongoing Ajax request and switch to a new Ajax call immediately

Within this code snippet, I am capturing user input for typing and then searching it in a database. However, with each character entered by the user, a new AJAX request is triggered without canceling the previous one. My objective is to have the search fu ...

javascriptjqueryajax

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

javascripthtmlangulartypescript

Navigating to the bottom of a specific element by scrolling

I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...

javascripthtmlcssscroll

Unable to extract data from my xml reply

I've been trying to extract a value from an XML response, but I keep getting null. What am I missing? $.ajax({ method: "GET", url: "fphub01-prd.tc.workstreaminc.com/hub/custLookup/", data: { emailAddress: email } }).done(function(msg) { ...

jqueryajaxxml

Guide to invoking an API in Next.js 13 by utilizing specific variables within a client component

I currently have a collection of products that are accessible on my website through a straightforward function within a server component. async function getData() { const res = await fetch(`${apiPath}`); const data = (await res.json()) as PackProps ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Exploring the world of mocking and stubbing in protractor

I am interested in testing my angular application using protractor. The app includes an API Module that communicates with the server In these tests, I would like to mock this API Module. I am not looking to perform full integration tests, but rather tests ...

javascriptunit-testingangularjsseleniumprotractor

Implementing an active class in a React render method

Working with UI Kit Components <ul className='uk-nav'> {languages.map(function (lang) { return ( <li style={lang === this.state.selectedLanguage ? {color: '#d0021b'} : n ...

javascriptreactjsnavigation

WordPress REST API - Issue with New Category returning undefined, yet still able to be accessed

Currently, I am utilizing the WordPress REST API and have successfully created a new category. However, when making queries to the API, it is returning undefined for that particular category. Upon visiting: /wp-json/wp/v2/categories, category 17 does not ...

javascriptjsonwordpressrest

how to change class on vue function result

I need a way to display the content stored in requestData as li elements. Each list item should have an onclick function that, when clicked (selected), adds a specific value from a reference to an array. If clicked again (unselected), it should remove the ...

javascripthtmlvue.jsvue-component

Using a secondary AJAX request to filter the AJAX response in the Select2 plugin

I am a newcomer to JavaScript and recently incorporated select2 into my new project. Currently, I have code that looks like this (simplified version) and it functions smoothly: $("#group-search").select2({ ajax: { url: "groups.search", d ...

jqueryajaxjquery-select2

Utilizing the parameter "error" to distinguish unsuccessful tasks within async.mapLimit

In my coding process, I am using async.mapLimit to implement some parallel operations on an array with a limit of 10: async.mapLimit(files, 10, function(file, callback) { ... etc... }, function(error, files) { ... etc.. }); Within the main opera ...

javascriptnode.js

Is the JSON data missing from the POST request?

I'm having trouble inserting data into the database using a POST request. Here is how I'm making the request: 127.0.0.1:3000/api/users?fname=asd&lname=edc&<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7870 ...

javascriptjsonnode.jsmongodbserve

Utilize AJAX to update a specific row within CakePHP framework

Currently, in my project I am utilizing CakePHP. There is a specific section where I need to update a particular row by clicking on an image. I have decided to use Ajax for this functionality and Mootools as the JavaScript library. Can someone please provi ...

ajaxcakephpmootools

Verification if both strings are empty is not functioning as expected

I am currently facing an issue with a conditional if check on a webform that uses ajax (and php) for submitting the form. if(empty($name) or empty($message)) { do something } The current code works if either of the 2 strings is empty. However, I want to ...

phpajax

Detecting Whether a Vue/Vue Router Navigation was Triggered by the Back/Forward Button or a Manual Router Push

When using vue/vue-router, I have set up a watcher on $route that is triggered in two different ways: By clicking back or forward on the browser. When the user interacts with a form. There are watchers on the variables that the form uses, and these watch ...

javascriptvue.jsvue-router

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

javascriptstringreactjsjsx

Execute an ajax function when a form is submitted on Marketo

My Request I am seeking assistance with integrating a Marketo script in a WordPress plugin. Upon submission of the Marketo form, I need to perform calculations using the form elements and display the results on the page. Please provide suggestions on ho ...

javascriptjqueryajaxwordpressmarketo