# What happened to my addon?

**URL:** <https://forums.ankiweb.net/t/what-happened-to-my-addon/44965>\
**Category:** Add-ons\
**Created:** [May 18, 2024, 6:06am UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965 "2024-05-18T06:06:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![popyoung](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/popyoung/32/13889_2.png) [@popyoung](https://forums.ankiweb.net/u/popyoung)\
**Post date:** [May 18, 2024, 6:06am UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/1 "2024-05-18T06:06:53Z")

</div>

I have made an add-on with deckoptions. Today I find the option of it went wrong. I tried to delete almost all the code in ‘raw.js’ and it just stuck. Here’s the code. This file is called in python correctly.

```auto
$deckOptions.then((options) => {
  alert(1); //alerted
  options.addHtmlAddon(HTML_CONTENT, () => setup(options));
});

function setup(options) {
  alert(2); //nothing happened
}

```

---

<div class="post-metadata">

**Author:** ![popyoung](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/popyoung/32/13889_2.png) [@popyoung](https://forums.ankiweb.net/u/popyoung)\
**Post date:** [May 20, 2024, 3:02am UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/2 "2024-05-20T03:02:42Z")

</div>

Anyone can help?

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/abdo/32/654_2.png) [@abdo](https://forums.ankiweb.net/u/abdo)\
**Post date:** [May 20, 2024, 1:00pm UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/3 "2024-05-20T13:00:09Z")

</div>

It appears this approach has broken in recent Anki versions: [How to make web pages extensible by add-ons? · Issue #3187 · ankitects/anki · GitHub](https://github.com/ankitects/anki/issues/3187)

---

<div class="post-metadata">

**Author:** ![popyoung](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/popyoung/32/13889_2.png) [@popyoung](https://forums.ankiweb.net/u/popyoung)\
**Post date:** [May 26, 2024, 7:55am UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/4 "2024-05-26T07:55:09Z")

</div>

Thanks for the hint. But It’s weird that I have two add-ons, and another works well, which using the same tech (Raw HTML and JS).

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/abdo/32/654_2.png) [@abdo](https://forums.ankiweb.net/u/abdo)\
**Post date:** [May 27, 2024, 6:04pm UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/5 "2024-05-27T18:04:57Z")

</div>

Can you link to the other add-on?

---

<div class="post-metadata">

**Author:** ![popyoung](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/popyoung/32/13889_2.png) [@popyoung](https://forums.ankiweb.net/u/popyoung)\
**Post date:** [May 31, 2024, 2:38am UTC](https://forums.ankiweb.net/t/what-happened-to-my-addon/44965/6 "2024-05-31T02:38:40Z")

</div>

> **another add-on's code**
>
> Here is the code of it.
> 
> ```auto
> function setup(options) {
> // alert(2);
> // console.log("2");
> const store = options.auxData();
> const boolInput = document.getElementById("autoAdd");
> const boolAutoLink = document.getElementById("autoLink");
> const numberAutoLinkInterval = document.getElementById("autoLinkInterval");
> // const numberInput = document.getElementById("buryInterval");
> 
> // update html when state changes
> store.subscribe((data) => {
> boolInput.checked = data["autoAdd"];
> boolAutoLink.checked = data["autoLink"];
> numberAutoLinkInterval.value = data["autoLinkInterval"];
> // numberInput.value = data["buryInterval"];
> 
> // and show current data for debugging
> // document.getElementById("myDebug").innerText = JSON.stringify(
> // data,
> // null,
> // 4
> // );
> });
> 
> // update config when check state changes
> boolInput.addEventListener("change", (_) =>
> store.update((data) => {
> return { ...data, autoAdd: boolInput.checked };
> })
> );
> boolAutoLink.addEventListener("change", (_) =>
> store.update((data) => {
> return { ...data, autoLink: boolAutoLink.checked };
> })
> );
> numberAutoLinkInterval.addEventListener("change", (_) => {
> let number = 0;
> try {
> number = parseInt(numberAutoLinkInterval.value, 10);
> } catch (err) { }
> 
> return store.update((data) => {
> return { ...data, autoLinkInterval: number };
> });
> });
> 
> // numberInput.addEventListener("change", (_) => {
> // let number = 0;
> // try {
> // number = parseInt(numberInput.value, 10);
> // } catch (err) {}
> 
> // return store.update((data) => {
> // return { ...data, buryInterval: number };
> // });
> // });
> }
> 
> $deckOptions.then((options) => {
> options.addHtmlAddon(HTML_CONTENT, () => setup(options));
> });
> 
> ```
> 
> It works normally and is almost the same as another. In fact, I copied this from the first add-on and did some minor modifications at the beginning. After the first one broke down, I compared them again but found nothing. Both Python files have no error, and HTML files are very similar too. I tried deleting all code in the HTML file, and it didn’t help.

Finally, I found what’s wrong. I changed the function name ‘setup’ to ‘setup2’ in the first add-on. It was fixed. Also, I can change the counterpart in another add-on to fix it. I figure somehow the namespace is mixed. And the better practice for now is just put the code used to be in ‘setup’ outside like this.

```auto
$deckOptions.then((options) => {

  options.addHtmlAddon(HTML_CONTENT, () => {
    //code in setup should be moved to here
    const store = options.auxData();
    //blablabla
  });
});

```