2

I have a simple bookmarking app that I am developing to learn Google App Engine. At this point I copy and paste the url into http://ting-1.appspot.com/submit which has a form that has a url field. Since this is cumbersome I thought of adding a chrome extension. I just changed the hello world example so that now I get the url of the tab with this code (as explained here):

  <script>
    window.addEventListener("load", windowLoaded, false);
    function windowLoaded() {
      chrome.tabs.getSelected(null, function(tab) {
        document.getElementById('currentLink').innerHTML = tab.url;
        tabUrl = tab.url;
      });
    }
document.write(tabUrl)
  </script>

How do I pass tabUrl to http://ting-1.appspot.com/submit?

Thanks!

Update

background.html that I used as adapted from Mohamed Mansour's answer:

<script>
    //React when a browser action's icon is clicked.
    chrome.browserAction.onClicked.addListener(function(tab) {
        //this gets the url and the title
        chrome.tabs.getSelected(null, function(tab) {
            tabUrl = tab.url
            tabTitle = tab.title

        //this posts the data to the bookmarking app 
        var formData = new FormData();
        formData.append("url", tabUrl);
        formData.append("title", tabTitle);
        formData.append("pitch", "this is a note");
        formData.append("user_tag_list", "tag1, tag2");
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://ting-1.appspot.com/submithandlertest");
        xhr.send(formData);
        });
    });
</script>
Community
  • 1
  • 1
Zeynel
  • 13,145
  • 31
  • 100
  • 145

1 Answers1

4

You use normal XHR (XMLHttpRequest) request. I would place that in your background page. Follow the example here, https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest. I believe you want to submit data as well, so don't forget that. I think you wanted a POST request too. From the example on MDC, you can relate it this way:

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submit");
xhr.send(formData);

Make sure you have the URL in your manifest for getting permissions to do that request. 

"permissions": [
  "tabs",
  " http://ting-1.appspot.com/submit"
],
beaver
  • 523
  • 1
  • 9
  • 20
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • @ Mohamed Mansour: Thanks for your answer. This worked perfectly. Additional thanks for the link to the `XMLHttpRequest` tutorial. Now I want to add a callback function to indicate that the submit was successful. I am reading the Asynchronous request section https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Example:_Asynchronous_request but if you have any practical advice about how to add a callback function in my situation, that would be helpful too, or I will post another question later if necessary. I updated the question with the code that I used. Thanks again. – Zeynel Oct 10 '11 at 17:37