From c4a37ff0bac0c5a10182872a213bc560f41735b5 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Fri, 29 Mar 2019 09:03:21 +0000
Subject: [PATCH] Clipper: Better handling of error on tabs where extension is
 not available

---
 Clipper/joplin-webclipper/manifest.json    |  1 +
 Clipper/joplin-webclipper/popup/src/App.js | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/Clipper/joplin-webclipper/manifest.json b/Clipper/joplin-webclipper/manifest.json
index e934d11516..0253043ec9 100644
--- a/Clipper/joplin-webclipper/manifest.json
+++ b/Clipper/joplin-webclipper/manifest.json
@@ -4,6 +4,7 @@
     "version": "1.0.8",
     "description": "Capture and save web pages and screenshots from your browser to Joplin.",
     "homepage_url": "https://joplin.cozic.net",
+    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
     "icons": {
         "32": "icons/32.png",
         "48": "icons/48.png",
diff --git a/Clipper/joplin-webclipper/popup/src/App.js b/Clipper/joplin-webclipper/popup/src/App.js
index d7a1384a60..dd5dcad8ba 100644
--- a/Clipper/joplin-webclipper/popup/src/App.js
+++ b/Clipper/joplin-webclipper/popup/src/App.js
@@ -15,6 +15,7 @@ class AppComponent extends Component {
 		this.state = ({
 			contentScriptLoaded: false,
 			selectedTags: [],
+			contentScriptError: '',
 		});
 
 		this.confirm_click = () => {
@@ -126,7 +127,14 @@ class AppComponent extends Component {
 	}
 
 	async componentDidMount() {
-		await this.loadContentScripts();
+		try {
+			await this.loadContentScripts();
+		} catch (error) {
+			console.error('Could not load content scripts', error);
+			this.setState({ contentScriptError: error.message });
+			return;
+		}
+
 		this.setState({
 			contentScriptLoaded: true,
 		});
@@ -166,7 +174,11 @@ class AppComponent extends Component {
 	}
 
 	render() {
-		if (!this.state.contentScriptLoaded) return 'Loading...';
+		if (!this.state.contentScriptLoaded) {
+			let msg = 'Loading...';
+			if (this.state.contentScriptError) msg = 'The Joplin extension is not available on this tab due to: ' + this.state.contentScriptError;
+			return <div style={{padding: 10, fontSize: 12, maxWidth: 200}}>{msg}</div>;
+		}
 
 		const warningComponent = !this.props.warning ? null : <div className="Warning">{ this.props.warning }</div>