diff --git a/src/common/BrowserAction.ts b/src/common/BrowserAction.ts index fa100670..5bb956ca 100644 --- a/src/common/BrowserAction.ts +++ b/src/common/BrowserAction.ts @@ -1,11 +1,12 @@ import { Messaging } from '@common/Messaging'; +import { Requests } from '@common/Requests'; import { Shared } from '@common/Shared'; import browser, { Action as WebExtAction } from 'webextension-polyfill'; export interface BrowserActionRotating { - image: HTMLImageElement | null; - canvas: HTMLCanvasElement | null; - context: CanvasRenderingContext2D | null; + image: ImageBitmap | null; + canvas: OffscreenCanvas | null; + context: OffscreenCanvasRenderingContext2D | null; degrees: number; canceled: boolean; } @@ -71,9 +72,16 @@ class _BrowserAction { async setRotatingIcon(): Promise { if (Shared.pageType === 'background') { - const image = document.createElement('img'); - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); + const imageResponse = await Requests.fetch({ + method: 'GET', + url: this.currentIcon, + }); + const imageBlob = await imageResponse.blob(); + const image = await createImageBitmap(imageBlob); + const canvas = new OffscreenCanvas(image.width, image.height); + const context = canvas.getContext('2d', { + willReadFrequently: true, + }) as OffscreenCanvasRenderingContext2D; this.rotating = { image, canvas, @@ -81,8 +89,7 @@ class _BrowserAction { degrees: 0, canceled: false, }; - image.onload = () => void this.rotateIcon(); - image.src = this.currentIcon; + await this.rotateIcon(); } else { await Messaging.toExtension({ action: 'set-rotating-icon' }); } @@ -134,7 +141,7 @@ class _BrowserAction { this.rotating.degrees = 0; } - window.setTimeout(() => void this.rotateIcon(), 30); + setTimeout(() => void this.rotateIcon(), 30); } } diff --git a/src/common/Errors.ts b/src/common/Errors.ts index f68ddd9a..e3b3821a 100644 --- a/src/common/Errors.ts +++ b/src/common/Errors.ts @@ -39,10 +39,14 @@ class _Errors { environment: Shared.environment, }, }); - window.Rollbar = this.rollbar; + if (window) { + window.Rollbar = this.rollbar; + } } else if (!allowRollbar && this.rollbar) { delete this.rollbar; - delete window.Rollbar; + if (window) { + delete window.Rollbar; + } } } diff --git a/src/common/Requests.ts b/src/common/Requests.ts index f1dd83dd..dfe132e0 100644 --- a/src/common/Requests.ts +++ b/src/common/Requests.ts @@ -51,10 +51,7 @@ class _Requests { const retryAfterStr = response.headers.get('Retry-After'); if (retryAfterStr) { const retryAfter = Number.parseInt(retryAfterStr) * 1000; - window.setTimeout( - () => void this.sendDirectly(request, tabId, resolve, reject), - retryAfter - ); + setTimeout(() => void this.sendDirectly(request, tabId, resolve, reject), retryAfter); return; } }