- Highlight saved pages, separate setting

- Fix save image context menu URL
- Optimize notifications
- Remove content_scripts
- Remove Drag'n'drop

internals/buildversion.txt

@@ -1 +1 @@
-521
+522

internals/manifest.js

@@ -91,14 +91,25 @@ var m = {
 		let temp = [...value]
 
 		//Firefox do not support 'activeTab' as expected
-		//if (global.platform == "firefox")
-		//	temp = temp.map(v=>v=='activeTab' ? 'tabs' : v)
+		if (global.platform == "firefox")
+			temp = temp.map(v=>v=='activeTab' ? 'tabs' : v)
 
 		// maybe need also:
 		// "*://*/*",
 		// "<all_urls>"
 
 
+		return temp
+	},
+
+	optional_permissions: function(value) {
+		let temp = [...value]
+
+		//Firefox do not support 'activeTab' as expected
+		//so keep `tabs` in permissions, not in optional_permissions
+		if (global.platform == 'firefox')
+			temp = []
+
 		return temp
 	}
 }
@@ -119,6 +130,7 @@ module.exports = {
 						case "browser_action": 			value = m.browserAction(value); 	break;
 						case "commands": 				value = m.commands(value); 	break;
 						case "permissions":				value = m.permissions(value); 	break;
+						case "optional_permissions":	value = m.optional_permissions(value); 	break;
 					}
 
 					return value;
@@ -180,6 +192,7 @@ module.exports = {
 
 							remove: keyVal(t('remove')),
 							edit: keyVal(t('edit')),
+							clickToEdit: keyVal(t('alreadyInCollectionD')),
 							restore: keyVal(t('restore')),
 							inCollection: keyVal(_.capitalize(t('inCollection'))),
 							unsorted: keyVal(t("defaultCollection--1")),

package.json

@@ -57,7 +57,7 @@
     "webpack": "^1.14.0",
     "webpack-bundle-analyzer": "3.x",
     "webpack-core": "^0.6.9",
-    "webpack-dev-server": "3.x",
+    "webpack-dev-server": "1.x",
     "webpack-split-by-path": "0.0.10",
     "write-file-webpack-plugin": "3.x",
     "zip-webpack-plugin": "^0.3.0"

pages/mini/index.ejs

@@ -17,7 +17,11 @@
 				<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M7.2928932 2H3.5c-.2761424 0-.5-.2238576-.5-.5s.2238576-.5.5-.5h5c.1380712 0 .2630712.0559644.3535534.1464466C8.9440356 1.2369288 9 1.3619288 9 1.5v5c0 .2761424-.2238576.5-.5.5S8 6.7761424 8 6.5V2.7071068L1.8535534 8.8535534c-.1952622.1952621-.5118446.1952621-.7071068 0-.1952621-.1952622-.1952621-.5118446 0-.7071068L7.2928932 2z" fill-rule="evenodd"/></svg>
 			</span>
 		</a>
-		<a href="index.html#/settings" tabindex="-1">
+		<a href="index.html#/settings" tabindex="-1" id="settings">
+			<div class="badge">
+				1
+			</div>
+
 			<span>
 				<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.931094 14.416376l1.412827-.784904c.284218-.157899.627458-.167764.920276-.02645.134834.065071.273279.122501.414764.171982.306685.107256.542147.356819.631404.669218L9.754301 16h.491398l.443936-1.553778c.089257-.312399.324719-.561962.631404-.669218.141485-.049481.27993-.106911.414764-.171982.292818-.141314.636058-.131449.920276.02645l1.412827.784904.34747-.34747-.784904-1.412827c-.157899-.284218-.167764-.627458-.02645-.920276.065071-.134834.122501-.273279.171982-.414764.107256-.306685.356819-.542147.669218-.631404L16 10.245699v-.491398l-1.553778-.443936c-.312399-.089257-.561962-.324719-.669218-.631404-.049481-.141485-.106911-.27993-.171982-.414764-.141314-.292818-.131449-.636058.02645-.920276l.784904-1.412827-.34747-.34747-1.412827.784904c-.284218.157899-.627458.167764-.920276.02645-.134834-.065071-.273279-.122501-.414764-.171982-.306685-.107256-.542147-.356819-.631404-.669218L10.245699 4h-.491398l-.443936 1.553778c-.089257.312399-.324719.561962-.631404.669218-.141485.049481-.27993.106911-.414764.171982-.292818.141314-.636058.131449-.920276-.02645l-1.412827-.784904-.34747.34747.784904 1.412827c.157899.284218.167764.627458.02645.920276-.065071.134834-.122501.273279-.171982.414764-.107256.306685-.356819.542147-.669218.631404L4 9.754301v.491398l1.553778.443936c.312399.089257.561962.324719.669218.631404.049481.141485.106911.27993.171982.414764.141314.292818.131449.636058-.02645.920276l-.784904 1.412827.34747.34747zm-2.449956-3.278908C3.215413 11.061547 3 10.785965 3 10.495316v-.990632c0-.278729.217172-.566733.481138-.642152l1.797919-.513691c.062215-.177895.1342-.351202.215313-.519277L4.586157 6.19478c-.134211-.241581-.091666-.588766.113855-.794286l.700482-.700482c.197091-.197092.554305-.247178.794286-.113855l1.634784.908213c.168075-.081113.341382-.153098.519277-.215313l.513691-1.797919C8.938453 3.215413 9.214035 3 9.504684 3h.990632c.278729 0 .566733.217172.642152.481138l.513691 1.797919c.177895.062215.351202.1342.519277.215313l1.634784-.908213c.241581-.134211.588766-.091666.794286.113855l.700482.700482c.197092.197091.247178.554305.113855.794286l-.908213 1.634784c.081113.168075.153098.341382.215313.519277l1.797919.513691c.265725.075921.481138.351503.481138.642152v.990632c0 .278729-.217172.566733-.481138.642152l-1.797919.513691c-.062215.177895-.1342.351202-.215313.519277l.908213 1.634784c.134211.241581.091666.588766-.113855.794286l-.700482.700482c-.197091.197092-.554305.247178-.794286.113855l-1.634784-.908213c-.168075.081113-.341382.153098-.519277.215313l-.513691 1.797919c-.075921.265725-.351503.481138-.642152.481138h-.990632c-.278729 0-.566733-.217172-.642152-.481138l-.513691-1.797919c-.177895-.062215-.351202-.1342-.519277-.215313l-1.634784.908213c-.241581.134211-.588766.091666-.794286-.113855l-.700482-.700482c-.197092-.197091-.247178-.554305-.113855-.794286l.908213-1.634784c-.081113-.168075-.153098-.341382-.215313-.519277l-1.797919-.513691zM10 12c1.104569 0 2-.895431 2-2 0-1.104569-.895431-2-2-2-1.104569 0-2 .895431-2 2 0 1.104569.895431 2 2 2zm0 1c-1.656854 0-3-1.343146-3-3s1.343146-3 3-3 3 1.343146 3 3-1.343146 3-3 3z"/></svg>
 			</span>

pages/mini/index.js

@@ -41,4 +41,17 @@ var onMessage = function(e) {
 }
 
 window.removeEventListener("message", onMessage, false);
-window.addEventListener("message", onMessage, false);
+window.addEventListener("message", onMessage, false);
+
+
+//tabs permission
+window.onload = function() {
+	webextension.permissions.contains({permissions: ['tabs']}, function(result) {
+		if (result){
+			localStorage.setItem('tabs-permissions-ignore', '1')
+		} else {
+			if (localStorage.getItem('tabs-permissions-ignore')!='1')
+				document.querySelector('#settings').classList.add('show-badge')
+		}
+	})
+}

pages/mini/mini.css

@@ -34,6 +34,7 @@ svg {
 }
 
 #actions a {
+	position: relative;
 	padding: 5px;
 	color: rgba(0,0,0,.6);
 }
@@ -49,6 +50,27 @@ svg {
 	background: white;
 }
 
+#actions a .badge {
+	display: none;
+	position: absolute;
+	right: 0;top:0;
+	width: 16px;height: 16px;
+	background: red;
+	color: white;
+	border-radius: 8px;
+	text-align: center;
+	font-size: 12px;
+	font-weight: bold;
+}
+
+#actions a.show-badge > span {
+	box-shadow: 0 0 0 1px red, 0 0 0 3px rgba(255,0,0,.3);
+}
+
+#actions a.show-badge .badge {
+	display: block
+}
+
 #actions a:hover > span {
 	color: white;
 	background: #1988E0;

pages/ready/page.jsx

@@ -99,9 +99,9 @@ export default class Page extends React.Component{
 						<p>When you find something interesting on the web, just click to add bookmark</p>
 					</article>
 
-					<article id="block-drag">
+					{/*<article id="block-drag">
 						<p>Drag image or link from page and drop it into appeared ☁️️ in the right corner</p>
-					</article>
+		</article>*/}
 
 					<article id="block-hotkey" hidden={!this.state.hotkeyEnabled}>
 						<p>

src/background/contextMenu.js

@@ -35,7 +35,7 @@ const contextMenus = {
 			case contextMenus.ids.savePage:
 			case contextMenus.ids.saveLink:
 			case contextMenus.ids.saveImage:
-				var url = info.linkUrl;
+				var url = info.srcUrl || info.linkUrl;
 				if (url)
 					saver.save(url)
 				else

src/background/saver/helpers.js

@@ -16,6 +16,7 @@ const Helpers = {
 				if (e)console.log(e)
 				res("");
 			}
+			img.crossOrigin = true
 			img.src = network.thumb(url, 100);
 		})
 	}

src/background/saver/index.js

@@ -15,7 +15,7 @@ const Saver = {
 		if (data.type!="save")
 			return;
 
-		if (__PLATFORM__!="chrome"){
+
 			var state="";
 			if (typeof urlState[data.id] != "undefined")
 				state = urlState[data.id];
@@ -38,7 +38,6 @@ const Saver = {
 					this.save(data.id);
 				break;
 			}
-		}
 
 		notifications.close(id);
 	},
@@ -125,15 +124,16 @@ const Saver = {
 		urlState[item.link] = {step: "success", id: item._id};
 
 		var n = {
+			type: 'image',
 			priority: 2,
 			requireInteraction: true,
 			title: extension.i18n.getMessage((item.type||"link")+"Saved"),
-			message: item.title,
+			message: item.title+"\n"+extension.i18n.getMessage("clickToEdit")
 			//iconUrl: 'assets/saved_'+extensionConfig.notificationIconSize+'.png',
-			buttons: [
-				{title: extension.i18n.getMessage("inCollection")+' "'+item.collectionTitle+'", '+extension.i18n.getMessage("edit")+"...", iconUrl: item.collectionDataURI},
+			/*buttons: [
+				{title: extension.i18n.getMessage("edit"), iconUrl: item.collectionDataURI},
 				{title: extension.i18n.getMessage("remove")}
-			]
+			]*/
 		}
 
 		if (item.already)

src/co/tree.jsx

@@ -380,9 +380,9 @@ export default class Tree extends React.Component {
 				);
 			});
 
-			groups.push(
+			/*groups.push(
 				<Examples key="examples" fromId={newElemId} selected={this.state.selected} onClick={this.createNewFromExample} />
-			);
+			);*/
 		}
 
 		//SEARCH

src/config/manifest.json

@@ -69,15 +69,12 @@
   "permissions": [
     "contextMenus",
     "notifications",
-    "tabs"
+    "activeTab",
+    "https://api.raindrop.io/"
   ],
 
-  "content_scripts": [
-    {
-      "matches": ["*://*/*"],
-      "js": ["inject.js"],
-      "css": ["inject.css"]
-    }
+  "optional_permissions": [
+    "tabs"
   ],
 
   "web_accessible_resources": [

src/css/edit/footer.styl

@@ -16,4 +16,16 @@
 		color: colorGray;
 		padding: 0 (defaultGap/2);
 	}
+
+	.badge {
+		height: 16px;
+		padding: 0 6px;
+		background: red;
+		border-radius: 8px;
+		color: white;
+		text-align: center;
+		font-weight: bold;
+		font-size: 12px
+		margin-left: -8px
+	}
 }

src/css/static/settings.styl

@@ -50,10 +50,24 @@ gapLeft = defaultGap+32px;
 	.title {
 		flex:1;
 		font-size: 14px;
+
+		p {
+			font-size: 13px;
+			opacity: .6;
+			margin: 5px 0;
+		}
 	}
 
 	.sp-text-inline {
 		width: 40px;
 		margin: -3px 0;
 	}
+
+	.new {
+		display: inline-block
+		width: 10px
+		height: 10px
+		background: red
+		border-radius: 5px
+	}
 }

src/helpers/extension.js

@@ -54,6 +54,33 @@ const ExtensionHelper = {
 		if (!chrome.omnibox)
 			return false;
 		return true;
+	},
+
+	permissions: {
+		enabled(name) {
+			return new Promise(res=>{
+				extension.permissions.contains({permissions: [name]}, res)
+			})
+		},
+
+		ignored(name) {
+			return new Promise(res=>{
+				res(localStorage.getItem(`${name}-permissions-ignore`)=='1')
+			})
+		},
+
+		ignore(name) {
+			return new Promise(res=>{
+				localStorage.setItem(`${name}-permissions-ignore`, '1')
+				res(true)
+			})
+		},
+
+		request(name) {
+			return new Promise(res=>{
+				extension.permissions.request({permissions: [name]}, res)
+			})
+		}
 	}
 }
 

src/modules/network.js

@@ -91,7 +91,7 @@ module.exports = {
             else if (s.indexOf('http://raindrop.io')==0)
                 return s;
             else
-                return config.host+"/makethumb/?url=" + encodeURIComponent(s) + "&width=" + width;
+                return "https://stella.raindrop.io/imager/thumb.jpg?url=" + encodeURIComponent(s) + "&width=" + width;
         }
         else
             return "about:blank";

src/routes/edit/footer.jsx

@@ -3,6 +3,7 @@ import t from 't'
 import Button from '../../co/common/button'
 import Icon from '../../co/common/icon'
 
+import extension from '../../helpers/extension'
 import bookmarkActions from '../../actions/bookmark'
 
 var _ = {
@@ -25,6 +26,16 @@ export default class Footer extends React.Component {
 		}
 	}
 
+	componentDidMount() {
+		Promise.all([
+			extension.permissions.enabled('tabs'),
+			extension.permissions.ignored('tabs')
+		]).then(([ enabled, ignored ])=>{
+			if (!enabled && !ignored)
+				this.setState({ tabsPermissionsNeed: true })
+		})
+	}
+
 	componentWillReceiveProps(nextProps) {
     	this.setState(this.prepareState(nextProps))
     }
@@ -66,11 +77,13 @@ export default class Footer extends React.Component {
 
 				<div className="max"/>
 
-				<Button href="https://raindrop.io" target="_blank" className="button link" tabIndex="1002">
+				<Button href="https://app.raindrop.io" target="_blank" className="button link" tabIndex="1002">
 					{t.s("myAccount")}
 				</Button>
 
 				<Button className="button gray accent"  tabIndex="1010" icon="config,normal" href="#/settings" />
+
+				{this.state.tabsPermissionsNeed && <a className="badge" href="#/settings">+1</a>}
 			</section>
 		);
 	}