jeremywho/Manifest.json

## 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>

## chrome_oauth_receiver.js
Dropbox.AuthDriver.ChromeExtension.oauthReceiver()

## 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"
  ]
}

## 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>

## 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();
	});