jeremywho · November 14, 2013 01:53
diff --git a/chrome_oauth_receiver.html b/chrome_oauth_receiver.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>Dropbox sign-in</title>
    <script src="dropbox-datastores.js" type="text/javascript"></script>
    <script src="chrome_oauth_receiver.js"
            type="text/javascript">
    </script>
  </head>
  <body>
    <h1>Dropbox sign-in successful</h1>

    <p>Please close this window.</p>
  </body>
 </html>
diff --git a/chrome_oauth_receiver.js b/chrome_oauth_receiver.js
 Dropbox.AuthDriver.ChromeExtension.oauthReceiver()
diff --git a/Manifest.json b/Manifest.json
 {
  "manifest_version": 2,

  "name": "Github test",
  "description": "Github + Chrome Extension",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "tabs", "<all_urls>",
    "https://*.dropbox.com/*",
    "storage"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    "chrome_oauth_receiver.html"
  ]
 }
diff --git a/popup.html b/popup.html
 <!doctype html>
 <html>
  <head>
    <title>My Tasks</title>
    <script src="jquery.min.js"></script>
    <script src="dropbox-datastores.js"></script>
    <script src="tutorial.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Hide UI until user has authenticated -->
    <div id="wrapper">
      <h1>My Tasks hrm</h1>

      <div id="main" style="display:none">
        <!-- Empty list that will be populated with tasks -->
        <ul id="tasks"></ul>

        <!-- Form to collect new tasks -->
        <form id="addForm" method="post">
          <input id="newTask" type="text" placeholder="Enter a new task..." />
          <button id="addButton" type="submit">Add Task</button>
        </form>
      </div>

      <div id="login">
        <button id="loginButton">Link to Dropbox</button>
      </div>
    </div>
  </body>
 </html>
diff --git a/tutorial.js b/tutorial.js
 // Insert your Dropbox app key here:
 var DROPBOX_APP_KEY = 'xoit9j3uwj9vmdv';

 // Exposed for easy access in the browser console.
 var client = new Dropbox.Client({key: DROPBOX_APP_KEY});
 var taskTable;

 $(function () {
 	// Insert a new task record into the table.
 	function insertTask(text) {
 		taskTable.insert({
 			taskname: text,
 			created: new Date(),
 			completed: false
 		});
 	}

 	// updateList will be called every time the table changes.
 	function updateList() {
 		$('#tasks').empty();

 		var records = taskTable.query();

 		// Sort by creation time.
 		records.sort(function (taskA, taskB) {
 			if (taskA.get('created') < taskB.get('created')) return -1;
 			if (taskA.get('created') > taskB.get('created')) return 1;
 			return 0;
 		});

 		// Add an item to the list for each task.
 		for (var i = 0; i < records.length; i++) {
 			var record = records[i];
 			$('#tasks').append(
 				renderTask(record.getId(),
 					record.get('completed'),
 					record.get('taskname')));
 		}

 		addListeners();
 		$('#newTask').focus();
 	}

 	// The login button will start the authentication process.
 	$('#loginButton').click(function (e) {
 		e.preventDefault();
 		// This will redirect the browser to OAuth login.
 		alert("Auth clicked");
 		client.authenticate();
 	});

 	// Try to finish OAuth authorization.
 	client.authenticate({interactive:false}, function (error) {
 		alert("authenticate");
 		if (error) {
 			alert('Authentication error: ' + error);
 		}
 	});

 	if (client.isAuthenticated()) {
 		alert("client.isAuthenticated()");
 		// Client is authenticated. Display UI.
 		$('#loginButton').hide();
 		$('#main').show();

 		client.getDatastoreManager().openDefaultDatastore(function (error, datastore) {
 			if (error) {
 				alert('Error opening default datastore: ' + error);
 			}

 			taskTable = datastore.getTable('tasks');

 			// Populate the initial task list.
 			updateList();

 			// Ensure that future changes update the list.
 			datastore.recordsChanged.addListener(updateList);
 		});
 	}

 	// Set the completed status of a task with the given ID.
 	function setCompleted(id, completed) {
 		taskTable.get(id).set('completed', completed);
 	}

 	// Delete the record with a given ID.
 	function deleteRecord(id) {
 		taskTable.get(id).deleteRecord();
 	}

 	// Render the HTML for a single task.
 	function renderTask(id, completed, text) {
 		return $('<li>').attr('id', id).append(
 				$('<button>').addClass('delete').html('&times;')
 			).append(
 				$('<span>').append(
 					$('<button>').addClass('checkbox').html('&#x2713;')
 				).append(
 					$('<span>').addClass('text').text(text)
 				)
 			)
 			.addClass(completed ? 'completed' : '');
 	}

 	// Register event listeners to handle completing and deleting.
 	function addListeners() {
 		$('span').click(function (e) {
 			e.preventDefault();
 			var li = $(this).parents('li');
 			var id = li.attr('id');
 			setCompleted(id, !li.hasClass('completed'));
 		});

 		$('button.delete').click(function (e) {
 			e.preventDefault();
 			var id = $(this).parents('li').attr('id');
 			deleteRecord(id);
 		});
 	}

 	// Hook form submit and add the new task.
 	$('#addForm').submit(function (e) {
 		e.preventDefault();
 		if ($('#newTask').val().length > 0) {
 			insertTask($('#newTask').val());
 			$('#newTask').val('');
 		}
 		return false;
 	});

 	$('#newTask').focus();
 });
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Dropbox sign-in</title>
	<script src="dropbox-datastores.js" type="text/javascript"></script>
	<script src="chrome_oauth_receiver.js"
	type="text/javascript">
	</script>
	</head>
	<body>
	<h1>Dropbox sign-in successful</h1>

	<p>Please close this window.</p>
	</body>
	</html>
	{
	"manifest_version": 2,

	"name": "Github test",
	"description": "Github + Chrome Extension",
	"version": "1.0",

	"permissions": [
	"activeTab",
	"tabs", "<all_urls>",
	"https://.dropbox.com/",
	"storage"
	],
	"browser_action": {
	"default_icon": "icon.png",
	"default_popup": "popup.html"
	},
	"web_accessible_resources": [
	"chrome_oauth_receiver.html"
	]
	}
	// Insert your Dropbox app key here:
	var DROPBOX_APP_KEY = 'xoit9j3uwj9vmdv';

	// Exposed for easy access in the browser console.
	var client = new Dropbox.Client({key: DROPBOX_APP_KEY});
	var taskTable;

	$(function () {
	// Insert a new task record into the table.
	function insertTask(text) {
	taskTable.insert({
	taskname: text,
	created: new Date(),
	completed: false
	});
	}

	// updateList will be called every time the table changes.
	function updateList() {
	$('#tasks').empty();

	var records = taskTable.query();

	// Sort by creation time.
	records.sort(function (taskA, taskB) {
	if (taskA.get('created') < taskB.get('created')) return -1;
	if (taskA.get('created') > taskB.get('created')) return 1;
	return 0;
	});

	// Add an item to the list for each task.
	for (var i = 0; i < records.length; i++) {
	var record = records[i];
	$('#tasks').append(
	renderTask(record.getId(),
	record.get('completed'),
	record.get('taskname')));
	}

	addListeners();
	$('#newTask').focus();
	}

	// The login button will start the authentication process.
	$('#loginButton').click(function (e) {
	e.preventDefault();
	// This will redirect the browser to OAuth login.
	alert("Auth clicked");
	client.authenticate();
	});

	// Try to finish OAuth authorization.
	client.authenticate({interactive:false}, function (error) {
	alert("authenticate");
	if (error) {
	alert('Authentication error: ' + error);
	}
	});

	if (client.isAuthenticated()) {
	alert("client.isAuthenticated()");
	// Client is authenticated. Display UI.
	$('#loginButton').hide();
	$('#main').show();

	client.getDatastoreManager().openDefaultDatastore(function (error, datastore) {
	if (error) {
	alert('Error opening default datastore: ' + error);
	}

	taskTable = datastore.getTable('tasks');

	// Populate the initial task list.
	updateList();

	// Ensure that future changes update the list.
	datastore.recordsChanged.addListener(updateList);
	});
	}

	// Set the completed status of a task with the given ID.
	function setCompleted(id, completed) {
	taskTable.get(id).set('completed', completed);
	}

	// Delete the record with a given ID.
	function deleteRecord(id) {
	taskTable.get(id).deleteRecord();
	}

	// Render the HTML for a single task.
	function renderTask(id, completed, text) {
	return $('<li>').attr('id', id).append(
	$('<button>').addClass('delete').html('×')
	).append(
	$('<span>').append(
	$('<button>').addClass('checkbox').html('✓')
	).append(
	$('<span>').addClass('text').text(text)
	)
	)
	.addClass(completed ? 'completed' : '');
	}

	// Register event listeners to handle completing and deleting.
	function addListeners() {
	$('span').click(function (e) {
	e.preventDefault();
	var li = $(this).parents('li');
	var id = li.attr('id');
	setCompleted(id, !li.hasClass('completed'));
	});

	$('button.delete').click(function (e) {
	e.preventDefault();
	var id = $(this).parents('li').attr('id');
	deleteRecord(id);
	});
	}

	// Hook form submit and add the new task.
	$('#addForm').submit(function (e) {
	e.preventDefault();
	if ($('#newTask').val().length > 0) {
	insertTask($('#newTask').val());
	$('#newTask').val('');
	}
	return false;
	});

	$('#newTask').focus();
	});