6 files changed, 21 insertions, 29 deletions
diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index f301b4c6..c0410ab8 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -167,7 +167,6 @@ export class Backend {
             ['getStylesheetContent',         this._onApiGetStylesheetContent.bind(this)],
             ['getEnvironmentInfo',           this._onApiGetEnvironmentInfo.bind(this)],
             ['clipboardGet',                 this._onApiClipboardGet.bind(this)],
-            ['getDisplayTemplatesHtml',      this._onApiGetDisplayTemplatesHtml.bind(this)],
             ['getZoom',                      this._onApiGetZoom.bind(this)],
             ['getDefaultAnkiFieldTemplates', this._onApiGetDefaultAnkiFieldTemplates.bind(this)],
             ['getDictionaryInfo',            this._onApiGetDictionaryInfo.bind(this)],
@@ -686,11 +685,6 @@ export class Backend {
         return this._clipboardReader.getText(false);
     }
 
-    /** @type {import('api').ApiHandler<'getDisplayTemplatesHtml'>} */
-    async _onApiGetDisplayTemplatesHtml() {
-        return await fetchText('/display-templates.html');
-    }
-
     /** @type {import('api').ApiHandler<'getZoom'>} */
     _onApiGetZoom(_params, sender) {
         return new Promise((resolve, reject) => {
diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js
index f07702da..30fcfc29 100644
--- a/ext/js/comm/api.js
+++ b/ext/js/comm/api.js
@@ -210,13 +210,6 @@ export class API {
     }
 
     /**
-     * @returns {Promise<import('api').ApiReturn<'getDisplayTemplatesHtml'>>}
-     */
-    getDisplayTemplatesHtml() {
-        return this._invoke('getDisplayTemplatesHtml', void 0);
-    }
-
-    /**
      * @returns {Promise<import('api').ApiReturn<'getZoom'>>}
      */
     getZoom() {
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 621ea833..65736759 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -39,12 +39,9 @@ export class DisplayGenerator {
         this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document);
     }
 
-    /**
-     * @param {import('../comm/api.js').API} api
-     */
-    async prepare(api) {
-        const html = await api.getDisplayTemplatesHtml();
-        this._templates.load(html);
+    /** */
+    async prepare() {
+        await this._templates.loadFromFiles(['/templates-display.html']);
         this.updateHotkeys();
     }
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 4cd2d611..588508b5 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -318,7 +318,7 @@ export class Display extends EventDispatcher {
 
         // Prepare
         await this._hotkeyHelpController.prepare(this._application.api);
-        await this._displayGenerator.prepare(this._application.api);
+        await this._displayGenerator.prepare();
         this._queryParser.prepare();
         this._history.prepare();
         this._optionToggleHotkeyHandler.prepare();
diff --git a/ext/js/dom/html-template-collection.js b/ext/js/dom/html-template-collection.js
index 981d5528..a71d954f 100644
--- a/ext/js/dom/html-template-collection.js
+++ b/ext/js/dom/html-template-collection.js
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {fetchText} from '../core/fetch-utilities.js';
+
 export class HtmlTemplateCollection {
     constructor() {
         /** @type {Map<string, HTMLTemplateElement>} */
@@ -23,17 +25,23 @@ export class HtmlTemplateCollection {
     }
 
     /**
-     * @param {string|Document} source
+     * @param {string[]} urls
      */
-    load(source) {
-        const sourceNode = (
-            typeof source === 'string' ?
-            new DOMParser().parseFromString(source, 'text/html') :
-            source
-        );
+    async loadFromFiles(urls) {
+        const htmlRawArray = await Promise.all(urls.map((url) => fetchText(url)));
+        const domParser = new DOMParser();
+        for (const htmlRaw of htmlRawArray) {
+            const templatesDocument = domParser.parseFromString(htmlRaw, 'text/html');
+            this.load(templatesDocument);
+        }
+    }
 
+    /**
+     * @param {Document} source
+     */
+    load(source) {
         const pattern = /^([\w\W]+)-template$/;
-        for (const template of sourceNode.querySelectorAll('template')) {
+        for (const template of source.querySelectorAll('template')) {
             const match = pattern.exec(template.id);
             if (match === null) { continue; }
             this._prepareTemplate(template);
diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js
index c835f8e6..d0cfd838 100644
--- a/ext/js/pages/settings/settings-controller.js
+++ b/ext/js/pages/settings/settings-controller.js
@@ -44,7 +44,6 @@ export class SettingsController extends EventDispatcher {
         this._pageExitPreventionEventListeners = new EventListenerCollection();
         /** @type {HtmlTemplateCollection} */
         this._templates = new HtmlTemplateCollection();
-        this._templates.load(document);
     }
 
     /** @type {import('../../application.js').Application} */
@@ -69,6 +68,7 @@ export class SettingsController extends EventDispatcher {
 
     /** */
     async prepare() {
+        await this._templates.loadFromFiles(['/templates-settings.html']);
         this._application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         if (this._canObservePermissionsChanges()) {
             chrome.permissions.onAdded.addListener(this._onPermissionsChanged.bind(this));