Provide Javascript function/API to toggle between development and production mode with API key

[jdimeo]

In our use case, we have a static HTML site. I would like to initially load that page in production mode with no API key. In our case, we don't even need Tolgee to load translations from files because the translations are already present in the static HTML. However, if a user enters their API key, we want to "switch" to development mode where the data becomes editable in context.

I figured out how to switch API keys using this code:

document.getElementById("tmskey").addEventListener("focusout", e => {
	tg.properties.config.apiKey = e.target.value;
	tg.properties.scopes = undefined;
	tg.coreService.loadApiKeyDetails();
});

(the tmskey is a password <input> on the page)

but this still requires me to start in "development" mode with a read-only API key, I can't start with no key at all until the user provides a key because then Tolgee is initialized into the wrong mode. Additionally, I tried doing tg.stop() and then re-initializing, but Tolgee didn't like that with console errors about highlighting not being a function (the stop/init/run loop isn't idempotent)

[stepan662]

If I'm not mistaken this is solved in v5.

tg.addPlugin(InContextTools({
  credentials: {
    apiKey: ...
  }
}))

[cccccroge]

Not fully understand the code above. Since I don't see any element that has id tmskey. Here's my solution:

...
// chrome extension will save the credentials to these two keys
const apiUrl = sessionStorage.getItem('__tolgee_apiUrl');
const apiKey = sessionStorage.getItem('__tolgee_apiKey');

if (!apiUrl || !apiKey) {
  console.error('Cannot initialize Tolgee dev tools, no apiUrl or apiKey');
}

const tolgee = Tolgee().use(InContextTools()).use(FormatSimple()).init({
  apiUrl: apiUrl,
  apiKey: apiKey,
  ...
});
tolgee.run();