<template>
  <div class="#app">
    <el-switch v-model="DEVELOPER_MODE" @change="change" />
    <span :style="{ marginLeft: '10px' }"> 开启开发者模式 </span>
  </div>
</template>

<script setup>
import { ref } from "vue";
const { sessionStorage } =
  chrome.extension.getBackgroundPage().backgroundState || {};
const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE == 1);

chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "sessionStorage") {
    DEVELOPER_MODE.value = message.value.DEVELOPER_MODE == 1;
  }
});

const bg = chrome.extension.getBackgroundPage();

const { tabs } = bg.chrome || {};

/*** 获取当前 tab ID*/
function getCurrentTabId() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      resolve(tabs.length ? tabs[0].id : null);
    });
  });
}

const change = async (checked) => {
  const tabId = await getCurrentTabId();
  if (checked) {
    tabs.sendMessage(tabId, {
      type: "setSessionStorage",
      key: "DEVELOPER_MODE",
      value: 1,
    });
  } else {
    tabs.sendMessage(tabId, {
      type: "removeSessionStorage",
      key: "DEVELOPER_MODE",
    });
  }

  tabs.sendMessage(tabId, { type: "reload" });
};
</script>

<style>
body {
  background-color: rgba(255, 255, 255, 0.8);
}
#app {
  display: flex;
  align-items: center;
  width: 200px;
  height: 40px;
}
</style>