What happened to my addon?

Anki Add-ons
1

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.

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

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

Anyone can help?

3

It appears this approach has broken in recent Anki versions: How to make web pages extensible by add-ons? · Issue #3187 · ankitects/anki · GitHub

1 Like
4

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).

5

Can you link to the other add-on?

6
another add-on's code

Here is the code of it.

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.

$deckOptions.then((options) => {

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