# So installieren Sie npm-Pakete in benutzerdefinierten Themes/Plugins

**URL:** <https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695>\
**Category:** Development\
**Created:** [26. Februar 2020 um 17:01 UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695 "2020-02-26T17:01:23Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![duranmla](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/duranmla/32/109295_2.png) [@duranmla](https://meta.discourse.org/u/duranmla)\
**Post date:** [18. Mai 2020 um 07:41 UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/6 "2020-05-18T07:41:29Z")

</div>

Schließlich, für jemanden innerhalb derselben Quest. Ich habe es so zum Laufen gebracht:

1. Die Einstellung `content_security_policy` deaktivieren
2. Das Skript explizit programmatisch hinzufügen (nicht `$.getScript` oder andere Ansätze verwenden).

Ein Beispielzusammenfassungsschnipsel dessen, was bei mir funktioniert, ist _(ersetze web-component durch das, was in deinem Fall sinnvoll ist)_:

```js
import { withPluginApi } from "discourse/lib/plugin-api";

let flag = false;

export default {
  name: "web-component",
  initialize() {
    withPluginApi("0.8", api => {
      api.onAppEvent("page:changed", () => {
        if (flag) return;

        addScript(
          "https://unpkg.com/web-component@0.0.1/dist/web-component/web-component.js",
          { defer: "", crossorigin: "anonymous" }
        );

        addWebComponent(
          "web-component",
          {
            id: "web-component"
          },
          `Hallo Welt`
        );

        flag = true;
      });
    });
  }
};

function addWebComponent(tag, attrs, content) {
  var component = document.createElement(tag);

  Object.keys(attrs).forEach(key => {
    component.setAttribute(key, attrs[key]);
  });
  component.textContent = content;

  document.body.appendChild(component);
}

function addScript(src, attrs) {
  var script = document.createElement("script");

  script.setAttribute("src", src);

  Object.keys(attrs).forEach(key => {
    script.setAttribute(key, attrs[key]);
  });

  document.body.appendChild(script);
}

```

---

_[View the full topic](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695)._