How to make a POST request using AJAX in a Chrome Extension?

Question

I am attempting to make an ajax call when the browser is on my webpage it works perfectly but as soon as I leave my domain, it fails. This is for a closed system that user knows they are being tracked so nothing shady going on. I am receiving an error 406 on everything outside of my domain. For example if I on my url of www.mywebpage.com the script executes perfectly, but as soon as I visit www.yourwebpage.com it returns the error. I have tried setting the permissions in the manifest.json to my URL, all urls, specific urls but it behaves the same way. Here is my background.js ``` chrome.runtime.onMessage.addListener ( function(message, sender, sendResponse) { if(message.applicationcode=="VALIDAPPLICATIONKEY") { var salt=message.salt; var learnerid=message.learnerid; var behaviorkey=message.behaviorkey; var behaviorname=message.behaviorname; var behaviorkeyname=message.behaviorkeyname; chrome.tabs.query ( {active: true}, function(arrayOfTabs) { var data = new FormData(); data.append('S…

Accepted Answer

Here was the solution I had:

manifest.json:

```
{
    "manifest_version": 2,
    "name": "My Name",
    "description": "My Description.",
    "version": "0.1",
    "background": 
    {
        "scripts": ["jquery.js","background.js"],
        "persistent": true
    },
    "permissions": 
    [
        "tabs",
        "storage"
    ],
    "browser_action": 
    {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_scripts": 
    [
        {
            "matches": ["https://www.myurl.com/*"],
            "js": ["jquery.js","popup.js"],
            "run_at": "document_end"
        }
    ]
  }
```

background.js:

```
var learnerid=0;
// Called when the user clicks on the browser action.
chrome.tabs.onUpdated.addListener
( 
    function (tabId, changeInfo, tab) 
    {
        if (changeInfo.status == 'complete') 
        {
            chrome.tabs.query
            (
                { 
                    active: true 
                }, 
                function (tabs) 
                {
                    if(learnerid!=0)
                    {
                        TrackURL(tabs);
                    }
                    else
                    {
                        console.log("User not logged in yet!");
                    }//end if
                }
            );//end query
        }
    }
);

chrome.runtime.onMessage.addListener
(
    function(message, sender, sendResponse) 
    {
        if(message.applicationcode=="appname")
        {
            learnerid=message.learnerid;
        }//end if
    }
);//end function

function TrackURL(tabs)
{
    $.ajax
    (
        {
            type: "POST",
            url: "http://www.myurl.com/action.php",
            dataType:"json",
            data: 
            {               
                Action: 'TrackURL',
                URL:tabs[0].url,
                Title:tabs[0].title,
                LearnerID:learnerid
            },
            success: function(msg)
            {
                console.log("URL Tracked");
            }//end function
        }
    );//End ajax

}//end function
```

popup.js:

```
document.addEventListener
(
    "starttrack", 
    function(e) 
    {
        startPoll(e.detail);
    }
);

function startPoll(e)
{
    chrome.runtime.sendMessage
    (
        {
            applicationcode: "myapp",
            learnerid: e,
        }
    ); 
}
```

From my webpage:

```
function SendLearnerID(value)
                  {
                    try
                    {

var event = new CustomEvent("starttrack",{'detail': value});
                        document.dispatchEvent(event);
                    }
                    catch(err) 
                    {
                        console.log(err);
                    }

}//end function
```

My problem was where my original event call happened, from within the web page....hence the 406 error. Hope this helps someone else.

How to make a POST request using AJAX in a Chrome Extension?

Solution

Problem

Related problems