From 1a1f74da033af713f6326afb90af27ccc209907f Mon Sep 17 00:00:00 2001 From: Rishi Shah Date: Mon, 19 Feb 2024 15:25:43 -0500 Subject: [PATCH 1/3] added docs for https://forums.ankiweb.net/t/error-loading-image-on-front-side-of-note-using-javascript/18610 --- src/hooks-and-filters.md | 21 +++++++++++++++++++++ src/reviewer-javascript.md | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/hooks-and-filters.md b/src/hooks-and-filters.md index c074e3d..dd4821e 100644 --- a/src/hooks-and-filters.md +++ b/src/hooks-and-filters.md @@ -116,6 +116,27 @@ From Anki 2.1.36: styling or content into external pages like the graphs screen and congratulations page that are loaded with load_ts_page(). + +#### Managing External Resources in Webviews +Add-ons may expose their own web assets by utilizing `aqt.addons.AddonManager.setWebExports()`. Web exports registered in this manner may then be accessed under the `/_addons` subpath + +For example, to allow access to a `my-addon.js` and `my-addon.css` residing +in a "web" subfolder in your add-on package, first register the corresponding web export: +```python +from aqt import mw +mw.addonManager.setWebExports(__name__, r"web/.*(css|js)") +``` +Then, append the subpaths to the corresponding web_content fields within a function subscribing to `gui_hooks.webview_will_set_content`: +```python +def on_webview_will_set_content(web_content: WebContent, context) -> None: + addon_package = mw.addonManager.addonFromModule(__name__) + web_content.css.append(f"/_addons/{addon_package}/web/my-addon.css") + web_content.js.append(f"/_addons/{addon_package}/web/my-addon.js") +``` +Note that '/' will also match the os specific path separator. + + + ## Legacy Hook Handling Older versions of Anki used a different hook system, using the functions diff --git a/src/reviewer-javascript.md b/src/reviewer-javascript.md index 4a36885..f611774 100644 --- a/src/reviewer-javascript.md +++ b/src/reviewer-javascript.md @@ -5,7 +5,7 @@ For a general solution not specific to card review, see Anki provides a hook to modify the question and answer HTML before it is displayed in the review screen, preview dialog, and card layout screen. -This can be useful for adding Javascript to the card. +This can be useful for adding Javascript to the card. If you wish to load external resources in your card, please see [managing external resources in webviews](hooks-and-filters.md#managing-external-resources-in-webviews) An example: From f7c9f95b2466c27d297602f901417bb2d9e4a0a5 Mon Sep 17 00:00:00 2001 From: Rishi Shah Date: Tue, 20 Feb 2024 23:55:13 -0500 Subject: [PATCH 2/3] Update src/hooks-and-filters.md Co-authored-by: Damien Elmes --- src/hooks-and-filters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks-and-filters.md b/src/hooks-and-filters.md index dd4821e..9310448 100644 --- a/src/hooks-and-filters.md +++ b/src/hooks-and-filters.md @@ -118,7 +118,7 @@ From Anki 2.1.36: #### Managing External Resources in Webviews -Add-ons may expose their own web assets by utilizing `aqt.addons.AddonManager.setWebExports()`. Web exports registered in this manner may then be accessed under the `/_addons` subpath +Add-ons may expose their own web assets by utilizing `aqt.addons.AddonManager.setWebExports()`. Web exports registered in this manner may then be accessed under the `/_addons` subpath. For example, to allow access to a `my-addon.js` and `my-addon.css` residing in a "web" subfolder in your add-on package, first register the corresponding web export: From a649c9cda174ccb91f23adbc83c1dc970d741957 Mon Sep 17 00:00:00 2001 From: Rishi Shah Date: Tue, 20 Feb 2024 23:55:28 -0500 Subject: [PATCH 3/3] Update src/reviewer-javascript.md (typo) Co-authored-by: Damien Elmes --- src/reviewer-javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reviewer-javascript.md b/src/reviewer-javascript.md index f611774..b4adbe2 100644 --- a/src/reviewer-javascript.md +++ b/src/reviewer-javascript.md @@ -5,7 +5,7 @@ For a general solution not specific to card review, see Anki provides a hook to modify the question and answer HTML before it is displayed in the review screen, preview dialog, and card layout screen. -This can be useful for adding Javascript to the card. If you wish to load external resources in your card, please see [managing external resources in webviews](hooks-and-filters.md#managing-external-resources-in-webviews) +This can be useful for adding Javascript to the card. If you wish to load external resources in your card, please see [managing external resources in webviews](hooks-and-filters.md#managing-external-resources-in-webviews). An example: