Android: Allow debugging plugins (#10156)

packages/app-mobile/components/ExtendedWebView.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import {
-	forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useRef, useState,
+	forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState,
 } from 'react';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { WebViewErrorEvent, WebViewEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes';
@@ -50,6 +50,7 @@ interface Props {
 	mixedContentMode?: 'never' | 'always';
 
 	allowFileAccessFromJs?: boolean;
+	hasPluginScripts?: boolean;
 
 	// Initial javascript. Must evaluate to true.
 	injectedJavaScript: string;
@@ -142,6 +143,10 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 		logger.error('Error', event.nativeEvent.description);
 	}, []);
 
+	const allowWebviewDebugging = useMemo(() => {
+		return Setting.value('env') === 'dev' || (!!props.hasPluginScripts && Setting.value('plugins.enableWebviewDebugging'));
+	}, [props.hasPluginScripts]);
+
 	// - `setSupportMultipleWindows` must be `true` for security reasons:
 	//   https://github.com/react-native-webview/react-native-webview/releases/tag/v11.0.0
 
@@ -172,7 +177,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 			mixedContentMode={props.mixedContentMode}
 			allowFileAccess={true}
 			allowFileAccessFromFileURLs={props.allowFileAccessFromJs}
-			webviewDebuggingEnabled={Setting.value('env') === 'dev'}
+			webviewDebuggingEnabled={allowWebviewDebugging}
 			injectedJavaScript={props.injectedJavaScript}
 			onMessage={props.onMessage}
 			onError={props.onError ?? onError}

packages/app-mobile/components/NoteEditor/NoteEditor.tsx

@@ -517,6 +517,7 @@ function NoteEditor(props: Props, ref: any) {
 					ref={webviewRef}
 					html={html}
 					injectedJavaScript={injectedJavaScript}
+					hasPluginScripts={codeMirrorPlugins.length > 0}
 					onMessage={onMessage}
 					onLoadEnd={onLoadEnd}
 					onError={onError}

packages/app-mobile/plugins/PluginRunner/PluginRunnerWebView.tsx

@@ -107,13 +107,13 @@ const PluginRunnerWebViewComponent: React.FC<Props> = props => {
 			}
 		`;
 
-
 		return (
 			<>
 				<ExtendedWebView
 					webviewInstanceId='PluginRunner'
 					html={html}
 					injectedJavaScript={injectedJs}
+					hasPluginScripts={true}
 					onMessage={pluginRunner.onWebviewMessage}
 					onLoadEnd={onLoadEnd}
 					onLoadStart={onLoadStart}

packages/app-mobile/plugins/PluginRunner/dialogs/PluginUserWebView.tsx

@@ -103,6 +103,7 @@ const PluginUserWebView = (props: Props) => {
 			baseUrl={plugin.baseDir}
 			webviewInstanceId='joplin__PluginDialogWebView'
 			html={html}
+			hasPluginScripts={true}
 			injectedJavaScript={injectedJs}
 			onMessage={messenger.onWebViewMessage}
 			onLoadEnd={onWebViewLoaded}

packages/lib/models/Setting.ts

@@ -1179,6 +1179,24 @@ class Setting extends BaseModel {
 				autoSave: true,
 			},
 
+			'plugins.enableWebviewDebugging': {
+				value: false,
+				type: SettingItemType.Bool,
+				section: 'plugins',
+				public: true,
+				appTypes: [AppType.Mobile],
+				show: (_settings) => {
+					// Hide on iOS due to App Store guidelines. See
+					// https://github.com/laurent22/joplin/pull/10086 for details.
+					return shim.mobilePlatform() !== 'ios';
+				},
+				needRestart: true,
+				advanced: true,
+
+				label: () => _('Plugin WebView debugging'),
+				description: () => _('Allows debugging mobile plugins. See %s for details.', 'https://https://joplinapp.org/help/api/references/mobile_plugin_debugging/'),
+			},
+
 			'plugins.devPluginPaths': {
 				value: '',
 				type: SettingItemType.String,

readme/api/references/mobile_plugin_debugging.md

@@ -0,0 +1,6 @@
+# Debugging mobile plugins
+
+On Android, it's possible to debug mobile plugins with the Chrome development tools. To do this,
+1. Enable plugin WebView debugging. To do this, go to "Configuration" > "Plugins" > "Advanced settings" and enable "Plugin webview debugging".
+2. Restart Joplin.
+3. Follow the [Chrome devtools instructions for debugging Android devices](https://developer.chrome.com/docs/devtools/remote-debugging/).