return-youtube-dislike/Website/pages/debug.vue

<template>
  <div>
    <!--   Top Section // "Sections" Card   -->
    <v-card max-width="600px" class="rounded-lg">
      <v-card-title style="padding-bottom: 0">Debug Information</v-card-title>
      <v-card-text style="text-align: left;">
        <!--   Gather Browser Information   -->
        <span><b>Browser Information:</b></span><br>
        <span>Browser: {{ device._parsed.name }}</span><br>
        <span>Browser Vendor: {{ device._parsed.vendor }}</span><br>
        <span>Version: {{ device._parsed.version }}</span><br>
        <span>Operating System: {{ device._parsed.os }}</span><br>
        <span>Operating System Version: {{ device._parsed.os_version }}</span><br>
        <span>Device Type: {{ device._parsed.category }}</span><br><br>
        <!--   Gather Extension Information   -->
        <span><b>Installed Extension Information:</b></span><br>
        <span>Extension Version: <span id="extension-version">Waiting For Extension...</span></span><br>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn @click="copy()">
          <v-icon small style="margin-right: 0.25em;">mdi-content-copy</v-icon>Copy
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        device: this.$ua,
      }
    },

    methods: {
        copy() {

            const toCopy = `\`\`\`
Browser Information:
Browser: ${ this.device._parsed.name }
Browser Vendor: ${ this.device._parsed.vendor }
Version: ${ this.device._parsed.version }
Operating System: ${ this.device._parsed.os }
Operating System Version: ${ this.device._parsed.os_version }
Device Type: ${ this.device._parsed.category }

Installed Extension Information:
Extension Version: ${document.getElementById('extension-version').innerHTML}
\`\`\``;

            navigator.clipboard.writeText(toCopy);
        }
    }

  }

</script>