Skip to content

Instantly share code, notes, and snippets.

@kohki-shikata
Last active September 21, 2024 03:51
Show Gist options
  • Save kohki-shikata/b21bc607003ce57303db9e291b883d85 to your computer and use it in GitHub Desktop.
Save kohki-shikata/b21bc607003ce57303db9e291b883d85 to your computer and use it in GitHub Desktop.
<script setup lang="ts">
import Sidebar from './components/Sidebar.vue';
import { onMounted, ref } from 'vue';
const fontSize = ref(100); // 初期フォントサイズを100%
// 初期値をストレージから取得
onMounted(() => {
chrome.storage.local.get(['fontSize'], (result) => {
fontSize.value = result.fontSize || 100;
});
});
// @ts-ignore
const increaseFontSize = () => {
fontSize.value += 1; // 1%ずつ増加
saveFontSize();
};
// @ts-ignore
const decreaseFontSize = () => {
fontSize.value = Math.max(fontSize.value - 1, 1); // 10%ずつ減少、最小は10%
saveFontSize();
};
const saveFontSize = () => {
chrome.storage.local.set({ fontSize: fontSize.value });
};
// ストレージの変更を監視
chrome.storage.onChanged.addListener((changes) => {
if (changes.fontSize) {
fontSize.value = changes.fontSize.newValue;
// コンテントスクリプトに通知
chrome.tabs.query({ active: true, currentWindow: true }, (tabs: any) => {
chrome.tabs.sendMessage(tabs[0].id, { action: "updateFontSize", fontSize: fontSize.value });
});
}
});
</script>
<template>
<div class="app">
<Sidebar />
<router-view />
</div>
</template>
<style>
.app {
display: flex;
/* サイドバーとメインコンテンツを横並びに */
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment