Clipper: Better handling of error on tabs where extension is not available

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",

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>