1

This is a simple chrome extension. This extension gets url of the current tab and some other informations, then send it to my own server. It acts like a bookmarker. But ajax always failed.

panel.html

<body style="width:400px">
    <form id="sender">
        Title <input type="text" name="title"><br />
        Category
        <select>
            <option>Sports</option>
            <option>Edu</option>
            <option>...</option>
        </select><br />
        Description<br />
        <textarea cols="25" rows="17" id="code" style="width:100%" name="description"></textarea><br />
        URL <input type="text" value="" name="url" id="url">

        <b>Bookamrk</b>
    </form>
    <script src="jquery.min.js"></script>
    <script src="panel.js"></script>
</body>

panel.js

$(document).ready(function () {
    chrome.tabs.getSelected( function(tab) {
        $("#url").val(tab.url);
    });
    $("b").click(function() {
        //e.preventDefaultdf();
        $.ajax({
            dataType: 'json',
             type: "POST",
             method: "POST",
            url:    'http://myurl.com',
            data: $("#sender").serialize(), 
           success: function (data)
                 {
                    $('#sender').each(function () {
                        this.reset();
                     });
                   alert('Ok :) ');
                    },
            error: function(data){
                alert(JSON.stringify(data));
            }
        });         
    });
});

manifest.json

{
  "manifest_version": 2,

  "name": "ChromeBookmarker",
  "description": "Des",
  "version": "1.0",

  "browser_action": {
   "default_icon": "19.png",
   "default_popup": "panel.html"
  },
  "permissions": [
   "activeTab"
   ]
}

If I test panel.html normally, it works very well. However, I tested it as an extension it show :

**readystate 4 responsetext status 404 statustext error **

I am using jquery 2.2 and using this tutorial

EDIT

After many studying chrome's documents, I've changed something that you can see it :

manifest.json

{
  "manifest_version": 2,

  "name": "ChromeDL",
  "description": "For DL from Utube",
  "version": "1.0",

  "browser_action": {
   "default_icon": "19.png",
   "default_popup": "panel.html"
  },
  "permissions": [
    "tabs",
   "http://127.0.0.1:8000"
   ],
    "content_security_policy": "script-src 'self' http://127.0.0.1:8000; object-src 'self'"
}

Popup.js

$(document).ready(function () {

    chrome.tabs.getSelected( function(tab) {
      $("#url").val(tab.url);
    });

    $("b").click(function(e) {
        e.preventDefault();
        $.ajax({
           // type: "GET",
            dataType: 'jsonp',
            url: 'http://127.0.0.1:8000/testRest/test.php',
            data: $("#sender").serialize(), 
            //crossDomain: false,
           success: function (data)
                 {
                    $('#sender').each(function () {
                        this.reset();
                     });
                   alert('Ok :) ');
                    },
            error: function(data){
                console.log(JSON.stringify(data));
            }
        });         
    });
});

test.php

header("Content-Type: application/json");
if(isset ($_GET['callback']))
{
    $array = array(
    'fullname' => 'Jeff Hansen',
    'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";

}

It returns this error in console.log

Refused to load the script http://127.0.0.1:8000/testRest/test.php?callback=jQuery22008076173001900315l=http%3A%2F%2Fstackoverflow.com%2Fposts%2F35171982%2Fedit&_=1454766689571 because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"

I've used this document, however, it doesn't work.

Amir Shabani
  • 690
  • 2
  • 14
  • 36
  • Try to debug it yourself using [this tutorial](https://developer.chrome.com/extensions/tut_debugging). Note that `chrome.tabs.getSelected` is deprecated and should be replaced by `chrome.tabs.query` with appropriate parameters. – Xan Feb 03 '16 at 12:59
  • @Xan I need to send data through crossDomain. So I used this [answer](http://stackoverflow.com/a/22360852/4360116) When I use it as normal php on server it works very well. However, it doesn't work as a chrome extension. – Amir Shabani Feb 06 '16 at 08:12
  • Note that you don't have cross-domain permissions declared. – Xan Feb 06 '16 at 09:03
  • I am sorry, I forget to edit manifest.json here. But on my extension I add this line : "\*://\*.myurl.com/*" It returns **readystate 4 responsetext status 404 statustext error** – Amir Shabani Feb 06 '16 at 09:10
  • Then your URL is just wrong, it's the only reason for 404. Note that you can and should edit the question. – Xan Feb 06 '16 at 09:12
  • As I said when I use panel.html as a single page it returns **status 200** but as an extension it returns **404** – Amir Shabani Feb 06 '16 at 09:14

0 Answers0