First draft version with Svelte for popup and additional build steps

src/styles/injectable/icons.scss

@@ -0,0 +1,39 @@
+@mixin insert-icon($icon_src) {
+  mask-image: url($icon_src);
+  -webkit-mask-image: url($icon_src);
+}
+
+.icon {
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.icon.icon-tag {
+  @include insert-icon('/img/tag.svg');
+}
+
+.icon.icon-paint-brush {
+  @include insert-icon('/img/paint-brush.svg');
+}
+
+.icon.icon-arrow-left {
+  @include insert-icon('/img/arrow-left.svg');
+}
+
+.icon.icon-info-circle {
+  @include insert-icon('/img/info-circle.svg');
+}
+
+.icon.icon-wrench {
+  @include insert-icon('/img/wrench.svg');
+}
+
+.icon.icon-globe {
+  @include insert-icon('/img/globe.svg');
+}
+
+.icon.icon-plus {
+  @include insert-icon('/img/plus.svg');
+}

src/styles/injectable/input.scss

@@ -0,0 +1,11 @@
+@use '../colors';
+
+input {
+  background: colors.$input-background;
+  border: 1px solid colors.$input-border;
+  color: colors.$text;
+
+  font-family: monospace;
+  padding: 0 6px;
+  line-height: 26px;
+}

src/styles/injectable/tag.scss

@@ -0,0 +1,17 @@
+@use '../colors';
+
+.tag {
+  background: colors.$tag-background;
+  line-height: 28px;
+  color: colors.$tag-text;
+  font-weight: 700;
+  font-size: 14px;
+  padding: 0 4px;
+  display: flex;
+
+  .remove {
+    content: "x";
+    margin-left: 6px;
+    cursor: pointer;
+  }
+}

src/styles/injectable/tags-editor.scss

@@ -0,0 +1,12 @@
+@use '../colors';
+@import "input";
+
+tags-editor {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+
+  input {
+    width: 180px;
+  }
+}