create chrome extension to send data into localhost server

Question

i want to create a google chrome extension to send data from a a popup form into localhost server. i created below files. Everything works fine but data does not send to localhost server. could anyone please help me where is my mistake? thanks.

manifest.json

 {
  "manifest_version": 2,

  "name": "server Plug-ins",
  "description": "Send data to database",
  "version": "1.0",

  "icons": {
    "48": "icon.png"
  },

  "permissions": [
      "history",
      "browsingData",
        "tabs",
        "<all_urls>",
        "http://192.168.1.222/*",
        "storage"
  ],

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Send data to server!"
  }

}

alert.js

document.write(" i am here . . .");

// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "http://192.168.1.222/my_parse_file.php";
var fn = document.getElementById("name").value;
var ln = document.getElementById("details").value;
var vars = "name="+fn+"&details="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request

popup.html

<body>
    <label for="">Name</label><br><input type="text" id="name"> <br>
    <label for="">Details</label><textarea id="details"></textarea>
    <input id="clickme" name="myBtn" type="submit" value="click me">
    <script type="text/javascript" src="popup.js"></script>
</body>

popup.js

function hello() {
  chrome.tabs.executeScript({
    file: 'alert.js'    
  }); 
}
document.getElementById('clickme').addEventListener('click', hello);

Titus · Accepted Answer · 2016-07-12T17:54:13.607

0

I think that the problem is that your popup input elements cannot be accessed in the context were the alert.js script is running.

In the alert.js's context, document refers to the document of the tab in which you've inject the script.

You can do something like this to make it work, replace the content of your popup.js file with this:

function hello() {
    function contentScript(fn, ln){
        document.write(" i am here . . .");
        var hr = new XMLHttpRequest();
        var url = "http://192.168.1.222/my_parse_file.php";
        var vars = "name="+fn+"&details="+ln;
        hr.open("POST", url, true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.send(vars);
    }

    var fn = document.getElementById("name").value;
    var ln = document.getElementById("details").value;

    chrome.tabs.executeScript({
        code: (contentScript.toString() + "\ncontentScript('" + fn + "', '" + ln + "');")
    }); 
}
document.getElementById('clickme').addEventListener('click', hello);

You can remove your alert.js file because now, the extension will inject JavaScript code directly instead of injecting a file.

edited Jul 12 '16 at 17:54

answered Jul 12 '16 at 07:15

Titus

22,031
1
23
33

i added this. still does not work. i can not find out my problem. actually i am totally new in extension development. @Titus – kazinayem2011 Jul 12 '16 at 07:24
@KaziNayem you should take a look at the extension's background page to see if there are any errors, [HERE](http://stackoverflow.com/questions/10257301/where-to-read-console-messages-from-background-js-in-a-chrome-extension) you can find out how to do that – Titus Jul 12 '16 at 07:34
i understand that but here gives an error in **popup.js** like so: **Uncaught TypeError: Cannot read property 'addEventListener' of null** @Titus – kazinayem2011 Jul 12 '16 at 08:47
@KaziNayem I've just realised now that you're using the JavaScript files in the popup page which means that you don't have to register them as `background` scripts. – Titus Jul 12 '16 at 17:23
ooh!! it's working. thank you very very very much, brother. I appreciate your effectiveness. I have been trying for one week to solve this problem. @Titus – kazinayem2011 Jul 13 '16 at 04:35

create chrome extension to send data into localhost server

1 Answers1