Add crmAPI.fetch and crmAPI.fetchBackground functions (fixes #36)

Author: SanderRonde

app/js/background/messagehandling.ts

@@ -148,6 +148,48 @@ export namespace MessageHandling {
 	}> {
 		action: string;
 	}
+	export function doFetch(url: string): Promise<string> {
+		if ('fetch' in window && window.fetch !== undefined) {
+			return fetch(url).then(r => r.text()) as unknown as Promise<string>;
+		}
+
+		return new Promise<string>((resolve, reject) => {
+			const xhr = new window.XMLHttpRequest();
+			xhr.open('GET', url);
+			xhr.onreadystatechange = () => {
+				if (xhr.readyState === 4) {
+					if (xhr.status >= 200 && xhr.status < 300) {
+						resolve(xhr.responseText);
+					} else {
+						reject(xhr.status);
+					}
+				}
+			}
+			xhr.send();
+		});
+	}
+	export function backgroundFetch(message: CRMAPIMessageInstance<string, {
+		url: string;
+		onFinish: number;
+	}>) {
+		const url = message.data.url;
+		doFetch(url).then((responseText) => {
+			modules.globalObject.globals.sendCallbackMessage(message.tabId,
+				message.tabIndex, message.id, {
+					err: false,
+					args: [false, responseText],
+					callbackId: message.data.onFinish
+				});
+		}).catch((err) => {
+			modules.globalObject.globals.sendCallbackMessage(message.tabId,
+				message.tabIndex, message.id, {
+					// Don't signify an error so the promise can be handled
+					err: false,
+					args: [true, `Failed with status ${err}`],
+					callbackId: message.data.onFinish
+				});
+		});
+	}
 
 	async function handleRuntimeMessage(message: CRMAPIMessageInstance<string, any>,
 		messageSender?: _browser.runtime.MessageSender,
@@ -240,6 +282,9 @@ export namespace MessageHandling {
 					modules.Storages.clearStorages();
 					await modules.Storages.loadStorages();
 					break;
+				case 'fetch':
+					await backgroundFetch(message);
+					
 			}
 			respond && respond(response);
 		}

app/js/crmapi.ts

@@ -5934,6 +5934,67 @@ export type CRMAPIMessage = {
 			}
 		};
 
+		/**
+		 * Fetches resource at given url. If this keeps failing with
+		 * a CORB error, try crmAPI.fetchBackground
+		 * 
+		 * @param {string} url - The url to fetch the data from
+		 * @returns {Promise<string>} A promise that resolves to the content
+		 */
+		fetch(url: string): Promise<string> {
+			if ('fetch' in window && window.fetch !== undefined) {
+				return fetch(url).then(r => r.text()) as unknown as Promise<string>;
+			}
+
+			return new Promise<string>((resolve, reject) => {
+				const xhr = new window.XMLHttpRequest();
+				xhr.open('GET', url);
+				xhr.onreadystatechange = () => {
+					if (xhr.readyState === 4) {
+						if (xhr.status >= 200 && xhr.status < 300) {
+							resolve(xhr.responseText);
+						} else {
+							reject(new Error(`Failed xhr with status ${xhr.status}`));
+						}
+					}
+				}
+				xhr.send();
+			});
+		}
+
+		/**
+		 * Fetches resource at given url through the background-page, bypassing
+		 * any CORS or CORB-like blocking
+		 * 
+		 * @param {string} url - The url to fetch the data from
+		 * @returns {Promise<string>} A promise that resolves to the content
+		 */
+		fetchBackground(url: string): Promise<string> {
+			return new Promise<string>((resolve, reject) => {
+				this.__privates._sendMessage({
+					id: this.__privates._id,
+					type: 'fetch',
+					tabId: this.__privates._tabData.id,
+					tabIndex: this.__privates._tabIndex,
+					data: {
+						url: url,
+						onFinish: this.__privates._createCallbackFunction((err: boolean, data: string) => {
+							if (err) {
+								reject(data);
+							} else {
+								resolve(data);
+							}
+						}, new Error(), {
+							maxCalls: 1
+						}),
+						id: this.__privates._id,
+						tabIndex: this.__privates._tabIndex,
+						tabId: this.__privates._tabData.id
+					}
+				})
+			});
+		}
+
 		/**
 		 * Returns the elements matching given selector within given context
 		 *

test/test.ts

@@ -6037,4 +6037,37 @@ describe('CRMAPI', () => {
 			});
 		});
 	});
+	describe('#fetch()', () => {
+		it('should return the data at the URL', async function() {
+			this.timeout(5000);
+			this.slow(2500);
+
+			assert.isFunction(crmAPI.fetch);
+			await asyncDoesNotThrow(() => {
+				return new Promise(async (resolve) => {
+					const result = await crmAPI.fetch('https://www.example.com');
+					assert.isTrue(result.indexOf('example') > -1,
+						'page is successfully loaded');
+					resolve(null);
+				});
+			});
+		});
+	});
+	describe('#fetchBackground()', () => {
+		it('should return the data at the URL', async function() {
+			this.timeout(5000);
+			this.slow(2500);
+
+			assert.isFunction(crmAPI.fetchBackground);
+			await asyncDoesNotThrow(() => {
+				return new Promise(async (resolve) => {
+					debugger;
+					const result = await crmAPI.fetchBackground('https://www.example.com');
+					assert.isTrue(result.indexOf('example') > -1,
+						'page is successfully loaded');
+					resolve(null);
+				});
+			});
+		});
+	});
 });

tools/definitions/crmapi.d.ts

@@ -3160,6 +3160,24 @@ declare namespace CRM {
 			 */
 			GM: GM_Fns;
 
+			/**
+			 * Fetches resource at given url. If this keeps failing with
+			 * a CORB error, try crmAPI.fetchBackground
+			 * 
+			 * @param {string} url - The url to fetch the data from
+			 * @returns {Promise<string>} A promise that resolves to the content
+			 */
+			fetch(url: string): Promise<string>;
+
+			/**
+			 * Fetches resource at given url through the background-page, bypassing
+			 * any CORS or CORB-like blocking
+			 * 
+			 * @param {string} url - The url to fetch the data from
+			 * @returns {Promise<string>} A promise that resolves to the content
+			 */
+			fetchBackground(url: string): Promise<string>
+
 			/**
 			 * Logs given arguments to the background page and logger page
 			 *