ku · o-d · Apr 18, 2013 · Apr 28, 2013
diff --git a/extension/background.html b/extension/background.html
@@ -4,126 +4,7 @@
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Create Link</title>
 </head>
-<script type="text/javascript" charset="utf-8">
-// <![CDATA[
-	var useNPAPI = false;
-
-	function copyToClipboard(text) {
-		var proxy = document.getElementById('clipboard_object');
-		if ( useNPAPI )
-			proxy.set(text);
-		else {
-			proxy.value = text;
-			proxy.select();
-			document.execCommand("copy");
-		}
-	}
-
-	chrome.extension.onRequest.addListener(
-		function (request, sender, sendResponse) {
-			if ( request.command == 'setClipboard' ) {
-				copyToClipboard(request.data);
-			}
-		}
-	);
-	function CreateLink() {
-		var self = this;
-		this.__defineGetter__( "formats", function () {
-			return self.readFormats();
-		} );
-	}
-	CreateLink.default_formats = [
-			{label: "Plain text", format: '%text% %url%' },
-			{label: "HTML", format: '<a href="%url%">%htmlEscapedText%</a>' },
-			{label: "mediaWiki", format: '[%url% %text%]' },
-	];
-	CreateLink.prototype.readFormats = function () {
-		var formats;
-		try {
-			formats = JSON.parse( localStorage.format_preferences );
-		} catch(e) {
-		}
-		if ( !formats ) {
-			formats = CreateLink.default_formats;
-		}
-		return formats;
-	}
-	function escapeHTML(text) {
-		return text ? text.replace(/[&<>'"]/g, convertHTMLChar) : text;
-	}
-	function convertHTMLChar(c) { return charMap[c]; }
-	var charMap = {
-		'&': '&amp;',
-		'<': '&lt;',
-		'>': '&gt;',
-		"'": '&apos;',
-		'"': '&quot;'
-	};
-	function showPrompt(text, pos, subject) {
-		var msg = "Please enter the input text for \n" + subject;
-		var s = window.prompt(msg);
-		return (s === null) ? "" : s;
-	}
-	CreateLink.prototype.formatLinkText = function (formatId, url, text, title) {
-		var def = this.formats[formatId];
-		var data = def.format.
-			replace(/%url%/g, url).
-			replace(/%text%/g, text.replace(/\n/g, ' ')).
-			replace(/%text_n%/g, text).
-			replace(/%text_br%/g, text.replace(/\n/g, '<br />\n')).
-			replace(/%title%/g, title).
-			replace(/%newline%/g, '\n').
-			replace(/%htmlEscapedText%/g, escapeHTML(text)).
-			// TODO: window.prompt does not respond in popup window.
-			//replace(/%input%/g, showPrompt).
-			replace(/\\t/g, '\t').
-			replace(/\\n/g, '\n');
-		chrome.self.getBackgroundPage().console.log("def.filter")
-		chrome.self.getBackgroundPage().console.log(def.filter)
-		if (def.filter) {
-			var m = def.filter.match(/^s\/(.+?)\/(.*?)\/(\w*)$/);
-			chrome.self.getBackgroundPage().console.log(m)
-			if (m) {
-				data = data.replace(m[1], m[2]);
-			}
-		}
-		return data;
-	}
-
-function instance() {
-	if ( !window.__instance ) {
-		window.__instance = new CreateLink();
-	}
-	return window.__instance;
-}
-
-function onMenuItemClick(info, tab) {
-	/*alert("info: " + JSON.stringify(info) + "\n" +
-				"tab: " + JSON.stringify(tab));*/
-	var formatId = contextMenuIdList[info.menuItemId];
-	var url = info.linkUrl ? info.linkUrl : info.pageUrl;
-	var text = info.selectionText ? info.selectionText : tab.title;
-	var title = tab.title;
-	var linkText = instance().formatLinkText(formatId, url, text, title);
-	copyToClipboard(linkText);
-}
-var contextMenuIdList = {}
-var formats =	instance().formats;
-if (formats.length == 1) {
-	chrome.contextMenus.create({"title": "Copy Link as " + formats[0].label,
-								"contexts": ["all"],
-								"onclick": onMenuItemClick});
-} else {
-	for (var i = 0; i < formats.length; ++i) {
-		var menuId = chrome.contextMenus.create({"title": formats[i].label,
-									"contexts": ["all"],
-									"onclick": onMenuItemClick});
-		contextMenuIdList[menuId] = i;
-	}
-}
-
-// ]]>
-</script>
+<script src="background.js"></script>
 <body>
 <!--
 <object id="clipboard_object" type="application/x-chrome-npapi-clipboard">Create Link Plugin failed to load</object>

diff --git a/extension/background.js b/extension/background.js
@@ -0,0 +1,124 @@
+var useNPAPI = false;
+
+function copyToClipboard(text) {
+  var proxy = document.getElementById('clipboard_object');
+  if ( useNPAPI )
+    proxy.set(text);
+  else {
+    proxy.value = text;
+    proxy.select();
+    document.execCommand("copy");
+  }
+}
+
+chrome.extension.onMessage.addListener(
+  function (request, sender, sendResponse) {
+    if ( request.command == 'setClipboard' ) {
+      copyToClipboard(request.data);
+    }
+  }
+);
+function CreateLink() {
+  var self = this;
+  this.__defineGetter__( "formats", function () {
+    return self.readFormats();
+  } );
+}
+CreateLink.default_formats = [
+    {label: "Plain text", format: '%text% %url%' },
+    {label: "HTML", format: '<a href="%url%">%htmlEscapedText%</a>' },
+    {label: "mediaWiki", format: '[%url% %text%]' },
+];
+CreateLink.prototype.readFormats = function () {
+  var formats;
+  try {
+    formats = JSON.parse( localStorage.format_preferences );
+  } catch(e) {
+  }
+  if ( !formats ) {
+    formats = CreateLink.default_formats;
+  }
+  return formats;
+}
+function escapeHTML(text) {
+  return text ? text.replace(/[&<>'"]/g, convertHTMLChar) : text;
+}
+function convertHTMLChar(c) { return charMap[c]; }
+var charMap = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  "'": '&apos;',
+  '"': '&quot;'
+};
+function showPrompt(text, pos, subject) {
+  var msg = "Please enter the input text for \n" + subject;
+  var s = window.prompt(msg);
+  return (s === null) ? "" : s;
+}
+CreateLink.prototype.formatLinkText = function (formatId, url, text, title) {
+  var def = this.formats[formatId];
+  var data = def.format.
+    replace(/%url%/g, url).
+    replace(/%text%/g, text.replace(/\n/g, ' ')).
+    replace(/%text_n%/g, text).
+    replace(/%text_br%/g, text.replace(/\n/g, '<br />\n')).
+    replace(/%title%/g, title).
+    replace(/%newline%/g, '\n').
+    replace(/%htmlEscapedText%/g, escapeHTML(text)).
+    // TODO: window.prompt does not respond in popup window.
+    //replace(/%input%/g, showPrompt).
+    replace(/\\t/g, '\t').
+    replace(/\\n/g, '\n');
+  if (def.filter) {
+    var m = def.filter.match(/^s\/(.+?)\/(.*?)\/(\w*)$/);
+    if (m) {
+      data = data.replace(m[1], m[2]);
+    }
+  }
+  return data;
+}
+
+function instance() {
+	if ( !window.__instance ) {
+		window.__instance = new CreateLink();
+	}
+	return window.__instance;
+}
+
+function onMenuItemClick(contextMenuIdList, info, tab) {
+	var formatId = contextMenuIdList[info.menuItemId];
+	var url = info.linkUrl ? info.linkUrl : info.pageUrl;
+	var text = info.selectionText ? info.selectionText : tab.title;
+	var title = tab.title;
+	var linkText = instance().formatLinkText(formatId, url, text, title);
+	copyToClipboard(linkText);
+}
+
+window.addEventListener('load', function () {
+  var contextMenuIdList = {};
+
+  var formats =	instance().formats;
+  if (formats.length == 1) {
+    chrome.contextMenus.create({
+      "title": "Copy Link as " + formats[0].label,
+      "id": "context-menu-item-0",
+      "contexts": ["all"],
+    });
+  } else {
+    for (var i = 0; i < formats.length; ++i) {
+      var menuId = chrome.contextMenus.create({
+        "title": formats[i].label,
+        "id": "context-menu-item-" + i,
+        "contexts": ["all"],
+      });
+      contextMenuIdList[menuId] = i;
+    }
+  }
+
+  chrome.contextMenus.onClicked.addListener(function (info, tab) {
+    var n = Number(info.menuItemId.split(/-/).pop());
+    onMenuItemClick(contextMenuIdList, info, tab);
+  })
+
+}, false);
diff --git a/extension/content.js b/extension/content.js
@@ -1,4 +1,4 @@
-chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
     var sel = window.getSelection();
     sendResponse(sel ? sel.toString() : '');
 });
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,9 +1,13 @@
 {
-   "background_page": "background.html",
+   "manifest_version": 2,
+   "background": {
+     "page": "background.html",
+     "persistent": false
+   },
    "browser_action": {
       "default_icon": "icon64.png",
       "default_title": "Create Link",
-      "popup": "popup.html"
+      "default_popup": "popup.html"
    },
    "description": "Copy current page URL to clipboard in various formats.",
    "icons": {
@@ -17,10 +21,12 @@
    "content_scripts" : [{
      "matches"    : ["http://*/*", "https://*/*"],
      "css"        : [],
-     "js"         : ["content.js"],
+     "js"         : [
+       "content.js"
+     ],
      "run_at"     : "document_end",
      "all_frames" : true
    }],
    "permissions": [ "tabs", "contextMenus" ],
-   "version": "0.1.1"
+   "version": "0.1.4"
 }
diff --git a/extension/options.html b/extension/options.html
@@ -5,35 +5,17 @@
 <title>Options - Create Link</title>
     <link rel="stylesheet" type="text/css" href="./options.css" media="all" />
         	<script type="text/javascript" charset="utf-8" src="cocoatable.js"></script>
-	<script type="text/javascript" charset="utf-8"> 
-	// <![CDATA[
-
-	window.addEventListener( 'load', function () {
-		var localStorageKey = 'format_preferences';
-		var formats = chrome.self.getBackgroundPage().instance().formats;
-		try{
-			var ctable	= new CocoaTable(formats, [
-				'label', 'format', 'filter'
-			] );
-			ctable._listener.onUpdated = function () {
-				var json = ctable.serialize();
-				localStorage[localStorageKey] = json;
-			}
-			window.ctable = ctable;
-			}catch(e){
-				console.log(e)
-			}
-	}, false);
-// ]]>
-</script> 
+	<script src="options.js"></script>
 </head>
 <body>
 	<div id="about">
     <div>
 		<img src="icon128.png" class="icon" width="128" height="128" />
     </div>
 		<div>
-			<h1>Create Link</h1>		
+      <div style="display: -webkit-box">
+        <h1>Create Link</h1><h2 id="version"></h2>
+      </div>
 			Firefox addon <a href="https://addons.mozilla.org/en/firefox/addon/142">Make Link</a> alternative to Chrome.
 			<ul>
 				<li>Developped by <a href="http://ido.nu/kuma/">ku</a></li>
@@ -87,5 +69,15 @@ <h2>Variables</h2>
 		<dt>%input%</dt>
 		<dd>Popups a dialog to input text.</dd>
 	</dl>
+
+	<h2>Export/Import</h2>
+	<div>
+	You can export/import formats to/from JSON text.
+	</div>
+	<textarea id="formats_json"></textarea>
+	<div>
+		<button id="export">Export</button><button id="import">Import</button>
+	</div>
+
 </body>
 </html>
diff --git a/extension/options.js b/extension/options.js
@@ -0,0 +1,44 @@
+window.addEventListener( 'load', function () {
+  var localStorageKey = 'format_preferences';
+
+  var manifest = chrome.runtime.getManifest();;
+  var version = document.getElementById("version");
+  version.innerText = manifest.version;
+
+  chrome.runtime.getBackgroundPage(function (backgroundWindow) {
+    var formats = backgroundWindow.instance().formats;
+
+    try{
+      var ctable	= new CocoaTable(formats, [
+        'label', 'format', 'filter'
+      ] );
+      ctable._listener.onUpdated = function () {
+        var json = ctable.serialize();
+        localStorage[localStorageKey] = json;
+      }
+      window.ctable = ctable;
+    }catch(e){
+      console.log(e)
+    }
+
+    var formats_json_textarea = document.getElementById("formats_json");
+    var export_button = document.getElementById("export");
+    var import_button = document.getElementById("import");
+
+    export_button.addEventListener( 'click', function () {
+      formats_json_textarea.value = localStorage[localStorageKey];
+    }, false);
+
+    import_button.addEventListener( 'click', function () {
+      localStorage[localStorageKey] = formats_json_textarea.value;
+      chrome.tabs.reload();
+    }, false);
+
+    formats_json_textarea.addEventListener( 'click', function () {
+      this.focus();
+      this.select();
+    }, false);
+
+  });
+
+}, false);