Utilize AJAX to connect to a remote domain from an extension

I am currently working on creating a Chrome extension that will utilize AJAX to fetch data from a specific webpage and then generate notifications based on the content of that page.

The webpage I am targeting is a ticketing system, and my goal is to determine whether the user is logged in and if there are any new tickets available. It's important to note that I do not have ownership or control over this remote page.

My progress has been hindered by the Same Origin Policy, as attempting to fetch the page using AJAX results in an error message:

XMLHttpRequest cannot load http://{{ Remote Site URL }}. Origin chrome-extension://gcagdmmcgmldhommhlckpbgdmlfojblp is not allowed by Access-Control-Allow-Origin.

As someone who is new to developing browser extensions, I am unsure of potential workarounds at this point.

I have searched extensively on Google and Stack Overflow for solutions, but so far, I have not found anything that addresses my specific requirements.

javascriptajaxgoogle-chrome-extensionsame-origin-policy

Answer №1

If you're looking to make cross-domain XHR requests with the Google Chrome extension, you can refer to the specific page in their documentation dedicated to this topic. All you need to do is include a URL match pattern that aligns with the site you want to access within your manifest permissions. Here are some examples of good match patterns:

  • http://www.example.com/*
  • *://www.example.com/* (applicable for both HTTP and HTTPS)
  • https://*.example.com/* (covers all subdomains of example.com using HTTPS)

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

Tips for effectively removing objects from a PixiJS application

I have embarked on a game development project using Pixi.js that involves items falling from the top of the canvas. The functionality I've implemented so far allows items to spawn and move down the canvas until they reach the end of the window, at whi ...

javascripthtmlcanvaspixi.js

What is the best way to incorporate PHP code within a JavaScript function?

Is it possible to dynamically append the uploaded file name to the list displayed in ('.list')? The challenge lies in passing $_FILES["fileImage"]["name"] as an argument to a separate JavaScript function for appending, especially since the PHP sc ...

phpjavascriptjqueryajax

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Currently utilizing the NestJS CQRS pattern to handle interactions between User and UserProfile entities within my system. The setup consists of an API Gateway NestJS server along with dedicated NestJS servers for each microservice (User, UserProfile, etc. ...

javascripttypescriptdomain-driven-designnestjscqrs

Navigating around potential type errors when passing data for chart.js can be challenging. Here are some strategies to

I'm currently working on an application that includes a chart, and I'm facing an issue while trying to populate the chart with data from my store. The error occurs when I attempt to pass the chartData object through props to the data property of ...

javascriptvue.jschart.jsnuxt.js

The Jquery AjaxFileupload feature seems to only function properly when I am running it

Below is the code snippet from my controller: function upload() { //initialize variables $status = ""; $msg = ""; $file = ""; $config = array( 'upload_path' => './uploads/product_images/full/', & ...

jqueryajaxcodeigniterfile-upload

Unable to access remote video streams by directly modifying URL parameters

Recently, I delved into experimenting with the straightforward mediasoup demo available at: https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms After setting up the demo, everything seemed to be functioning correctly. The initial task on my agend ...

javascriptsocket.iowebrtcmediasoup

Avoid triggering the parent modal to close when a child element is clicked in VueJS

In my Vue application, there is a situation where I have a button called "detach button" with a @click function inside an element that is clickable. When clicking on this parent element, it triggers another @click function and toggles a Bootstrap modal eve ...

javascripttwitter-bootstrapvue.js

It appears that req.session is not defined and the user_id within req.session is not

Currently, I am implementing session management with Express and Node using HTTPS. I am facing an issue where I need to create a session in Express for authentication before redirecting to static files in the public folder. Previously, I encountered a prob ...

javascriptnode.jssessioncookiesexpress

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at ...

javascriptangulartypescriptionic-frameworkwebpack

Emphasize Expandable Sections based on Search Term

I have been working on developing an HTML page for my company that will showcase a list of contacts in an "experts list". Currently, the list is structured using collapsible DIVs nested within each other. Additionally, the HTML page features a search func ...

javascriptjqueryhtmlcss

Issues arise when attempting to use two HTTP get requests in a single AngularJS controller

Having two http GET requests in one controller, causing intermittent issues where only one of the GET requests works or sometimes none of them are shown. Any suggestions? }).controller("nextSidorAdminCtrl", function($scope,$rootScope,$http,$location,$s ...

javascriptangularjsangular-promiseangular-httpng-controller

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

ng-include failing to retrieve file name containing UTF-8 character

I encountered an issue with the ng-include directive in the code snippet below. The file name it's trying to access contains a special character, specifically an ñ, resulting in a not found error being displayed. <div ng-include="'{{mainCtrl ...

javascriptangularjsutf-8decodeuricomponent

Generate a fresh Date/Time by combining individual Date and Time components

I have set up a form to gather dates from one input box and times from another. var appointment_date = new Date(); var appointment_start = new Date("Mon Apr 24 2017 20:00:00 GMT-0400 (EDT)"); var appointment_end = new Date("Mon Apr 24 2017 21:30:00 GMT- ...

javascriptdatereactjsdatetime

Conceal the legend in Highcharts using Python script with Django

Need some assistance with a Django and Highcharts.js project I'm working on. Objective: hide the legend in a Highcharts chart from my views.py script. In my views.py file, I've successfully plotted various charts but struggling to hide the lege ...

javascriptpythonjsondjangohighcharts

What is the method for obtaining the size of a mesh object in pixels (instead of Vector3) within BabylonJS?

Exploring Babylon.js How can I retrieve the size of a mesh object in pixels instead of Vector3 in a React application using Babylonjs? This is what I attempted: let meshPixelSize = meshObject.getBoundingInfo().boundingBox; ...

javascriptreactjspixelmeshbabylonjs

An effective way to verify if a record has been successfully updated is by utilizing Sequelize's

Within this snippet of code, I made an update to a specific record in the IPAdress model. What is the best way for me to verify if the record has been successfully updated or not? let IPAdress = await model.IPAdress.update(data,{ where: { id } }); ...

javascriptnode.jsexpresssequelize.js

Developing web components using angular.js while ensuring compatibility with IE11

I have an angular.js application where I need to initialize a web component. Everything runs smoothly on different browsers, however IE11 seems to have problems with document.importNode The angular.js onInit function is as follows: vm.$onIni ...

javascriptangularjsinternet-explorercloneweb-component

Definition in Typescript: The term "value is" refers to a function that takes in any number of arguments of

export function isFunction(value: any): value is (...args: any[]) => any { return typeof value === 'function'; } What is the reason behind using value is (...args: any[]) => any instead of boolean ? ...

javascripttypescript

Updating the state of a React component through a button click using React-JS

In my React-JS project, I am using Semantic-ui to create form inputs and a submit button. These forms have a property called 'error', and the value of this property is determined by the state. The issue arises when I click on the 'Next&apos ...

javascriptreactjssemantic-ui-react