feat: Add function to inject external JS into WebView before document load (#7864)

Author: theproducer

android/capacitor/src/main/java/com/getcapacitor/Bridge.java

@@ -121,6 +121,8 @@ public class Bridge {
     private HostMask appAllowNavigationMask;
     private Set<String> allowedOriginRules = new HashSet<String>();
     private ArrayList<String> authorities = new ArrayList<>();
+    private ArrayList<String> miscJSFileInjections = new ArrayList<String>();
+    private Boolean canInjectJS = true;
     // A reference to the main WebView for the app
     private final WebView webView;
     public final MockCordovaInterfaceImpl cordovaInterface;
@@ -1017,14 +1019,28 @@ private JSInjector getJSInjector() {
             String cordovaPluginsJS = JSExport.getCordovaPluginJS(context);
             String cordovaPluginsFileJS = JSExport.getCordovaPluginsFileJS(context);
             String localUrlJS = "window.WEBVIEW_SERVER_URL = '" + localUrl + "';";
+            String miscJS = JSExport.getMiscFileJS(miscJSFileInjections, context);
 
-            return new JSInjector(globalJS, bridgeJS, pluginJS, cordovaJS, cordovaPluginsJS, cordovaPluginsFileJS, localUrlJS);
+            miscJSFileInjections = new ArrayList<>();
+            canInjectJS = false;
+
+            return new JSInjector(globalJS, bridgeJS, pluginJS, cordovaJS, cordovaPluginsJS, cordovaPluginsFileJS, localUrlJS, miscJS);
         } catch (Exception ex) {
             Logger.error("Unable to export Capacitor JS. App will not function!", ex);
         }
         return null;
     }
 
+    /**
+     * Inject JavaScript from an external file before the WebView loads.
+     * @param path relative to public folder
+     */
+    public void injectScriptBeforeLoad(String path) {
+        if (canInjectJS) {
+            miscJSFileInjections.add(path);
+        }
+    }
+
     /**
      * Restore any saved bundle state data
      * @param savedInstanceState

android/capacitor/src/main/java/com/getcapacitor/JSExport.java

@@ -21,6 +21,21 @@ public static String getGlobalJS(Context context, boolean loggingEnabled, boolea
         return "window.Capacitor = { DEBUG: " + isDebug + ", isLoggingEnabled: " + loggingEnabled + ", Plugins: {} };";
     }
 
+    public static String getMiscFileJS(ArrayList<String> paths, Context context) {
+        List<String> lines = new ArrayList<>();
+
+        for (String path : paths) {
+            try {
+                String fileContent = readFileFromAssets(context.getAssets(), "public/" + path);
+                lines.add(fileContent);
+            } catch (IOException ex) {
+                Logger.error("Unable to read public/" + path);
+            }
+        }
+
+        return TextUtils.join("\n", lines);
+    }
+
     public static String getCordovaJS(Context context) {
         String fileContent = "";
         try {

android/capacitor/src/main/java/com/getcapacitor/JSInjector.java

@@ -20,6 +20,7 @@ class JSInjector {
     private String cordovaPluginsJS;
     private String cordovaPluginsFileJS;
     private String localUrlJS;
+    private String miscJS;
 
     public JSInjector(
         String globalJS,
@@ -29,6 +30,19 @@ public JSInjector(
         String cordovaPluginsJS,
         String cordovaPluginsFileJS,
         String localUrlJS
+    ) {
+        this(globalJS, bridgeJS, pluginJS, cordovaJS, cordovaPluginsJS, cordovaPluginsFileJS, localUrlJS, null);
+    }
+
+    public JSInjector(
+        String globalJS,
+        String bridgeJS,
+        String pluginJS,
+        String cordovaJS,
+        String cordovaPluginsJS,
+        String cordovaPluginsFileJS,
+        String localUrlJS,
+        String miscJS
     ) {
         this.globalJS = globalJS;
         this.bridgeJS = bridgeJS;
@@ -37,6 +51,7 @@ public JSInjector(
         this.cordovaPluginsJS = cordovaPluginsJS;
         this.cordovaPluginsFileJS = cordovaPluginsFileJS;
         this.localUrlJS = localUrlJS;
+        this.miscJS = miscJS;
     }
 
     /**
@@ -45,7 +60,7 @@ public JSInjector(
      * @return
      */
     public String getScriptString() {
-        return (
+        String scriptString =
             globalJS +
             "\n\n" +
             localUrlJS +
@@ -58,8 +73,13 @@ public String getScriptString() {
             "\n\n" +
             cordovaPluginsFileJS +
             "\n\n" +
-            cordovaPluginsJS
-        );
+            cordovaPluginsJS;
+
+        if (miscJS != null) {
+            scriptString += "\n\n" + miscJS;
+        }
+
+        return scriptString;
     }
 
     /**

ios/Capacitor/Capacitor/CAPBridgeProtocol.swift

@@ -59,6 +59,8 @@ import WebKit
     func eval(js: String)
     // swiftlint:enable identifier_name
 
+    @objc optional func injectScriptBeforeLoad(path: String)
+
     func triggerJSEvent(eventName: String, target: String)
     func triggerJSEvent(eventName: String, target: String, data: String)
 

ios/Capacitor/Capacitor/CapacitorBridge.swift

@@ -119,6 +119,8 @@ open class CapacitorBridge: NSObject, CAPBridgeProtocol {
     // Whether to inject the Cordova files
     private var injectCordovaFiles = false
     private var cordovaParser: CDVConfigParser?
+    private var injectMiscFiles: [String] = []
+    private var canInjectJS: Bool = true
 
     // Background dispatch queue for plugin calls
     open private(set) var dispatchQueue = DispatchQueue(label: "bridge")
@@ -214,6 +216,8 @@ open class CapacitorBridge: NSObject, CAPBridgeProtocol {
         exportCoreJS(localUrl: configuration.localURL.absoluteString)
         registerPlugins()
         setupCordovaCompatibility()
+        exportMiscJS()
+        canInjectJS = false
         observers.append(NotificationCenter.default.addObserver(forName: type(of: self).tmpVCAppeared.name, object: .none, queue: .none) { [weak self] _ in
             self?.tmpWindow = nil
         })
@@ -245,6 +249,14 @@ open class CapacitorBridge: NSObject, CAPBridgeProtocol {
         }
     }
 
+    /**
+     Export misc JavaScript to the webview
+     */
+    func exportMiscJS() {
+        JSExport.exportMiscFileJS(paths: injectMiscFiles, userContentController: webViewDelegationHandler.contentController)
+        injectMiscFiles.removeAll()
+    }
+
     /**
      Set up our Cordova compat by loading all known Cordova plugins and injecting their JS.
      */
@@ -590,6 +602,17 @@ open class CapacitorBridge: NSObject, CAPBridgeProtocol {
 
     // MARK: - CAPBridgeProtocol: JavaScript Handling
 
+    /**
+     Inject JavaScript from an external file before the WebView loads.
+
+     `path` is relative to the public folder
+     */
+    public func injectScriptBeforeLoad(path: String) {
+        if canInjectJS {
+            injectMiscFiles.append(path)
+        }
+    }
+
     /**
      Eval JS for a specific plugin.
 

ios/Capacitor/Capacitor/JSExport.swift

@@ -53,6 +53,20 @@ internal class JSExport {
         }
     }
 
+    static func exportMiscFileJS(paths: [String], userContentController: WKUserContentController) {
+        for path in paths {
+            if let miscJSFilePath = Bundle.main.url(forResource: "public/\(path.replacingOccurrences(of: ".js", with: ""))", withExtension: "js") {
+                do {
+                    try self.injectFile(fileURL: miscJSFilePath, userContentController: userContentController)
+                } catch {
+                    CAPLog.print("WARNING: Unable to inject js from path \(miscJSFilePath)")
+                }
+            } else {
+                CAPLog.print("WARNING: Unable to inject js from path \(path)")
+            }
+        }
+    }
+
     /**
      Export the JS required to implement the given plugin.
      */