Trouble with google chrome plugin

wee493 · July 13, 2010

I'm working on a google chrome plugin for my url shortener.

It use jquery + ajax to get the url of my api page.

For example: site.com/api.php?d=http://google.com

It's working fine, but I want users to be able to specify a custom url where the plugin gets user input from a text form, the gets a url like the following site.com/api.php?custom=test&d=http://google.com

Here is the code, the function named redo is the one that's giving me trouble. It's running the function, but not querying the ajax call.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
   window.addEventListener("load", windowLoaded, false);
    function windowLoaded() {
      chrome.tabs.getSelected(null, function(tab) {
        var url = tab.url;

	$('#result').load('http://twi.im/api/api.php?type=chrome&d=' + replace_multiple(tab.url));

      });
    }

function redo(){
document.getElementById('body').style.backgroundColor = '#CCC';
//document.getElementById('url').innerHTML = 'Custom: ' + document.getElementById('custom-val').value;
$('#short').load('http://twi.im/api/api.php?custom=' + document.getElementById('custom-val').value + '&d=' + replace_multiple(tab.url) + short.value);
}

</script>
<style>
body {
width: 250px;
overflow: hidden;
}

img {
  vertical-align:middle;
}
.result {
width: 250px;
height: 60px;
}
</style>

</head>
<body id="body">

<div class="header">
<img src="http://www.bigroncoleman.com/Pages/twitter-logo.gif" width="250px" border="0">
</div>

<div id="result" class="result">
    <center><strong>Loading...</strong></center>
</div>
<script>
function custom(){
	document.getElementById('custom-lable').style.display = 'inline';
	document.getElementById('custom-input').style.display = 'inline';
	document.getElementById('custom-submit').style.display = 'inline';
	document.getElementById('cust').style.display = 'none';
}
function replace_multiple(str){
var str = str;
str = str.replace(/&/gi, "%26");
str = str.replace("?", "%3F");
return str;
}
</script>
<script type="text/javascript"> 
function trackButton(name) {
    _gaq.push(['_trackEvent', name, 'clicked']);
};
</script> 
</body>
</html>

You should not need this, but Here is the returned page from api.php

<table border="0">
<tr>
    	<td width="25%" align="right">URL:</td>
        <td><input type="text" value="http://twi.im/<?PHP echo $url; ?>" onClick="this.select();" id="short" readonly="readonly" /></td>
    </tr>
    <tr>
    	<td colspan="2" align="center" id="cust"><a href="#custom" onClick="custom(); trackButton('Custom');">Custom URL?</a></td>
    	<td id="custom-lable" style="display: none;">Custom:</td>
        <td id="custom-input" style="display: none;"><input type="text" name="custom" id="custom-val"></td>
    </tr>
    <tr>
    	<td colspan="2" id="custom-submit" style="display: none;" align="center"><input type="submit" onclick="redo(); return false;" value="Update" /></td>
    </tr>
</table>
<script>
var short = document.getElementById('short').select();
document.execCommand('Copy');
window.getSelection().removeAllRanges();
</script>

Sign In

Trouble with google chrome plugin

Recommended Posts

wee493

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information