v1.7.0

.gitignore

@@ -19,4 +19,6 @@ public/manifest.json
 
 CLAUDE.md
 
-/DOCS
+/DOCS
+
+.claude/

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"]
+    }
+  }
+}

manifest.js

@@ -34,15 +34,11 @@ const manifest = {
   content_scripts: [
     {
       matches: ['https://*.tistory.com/manage/newpost/*', 'https://*.tistory.com/manage/page?returnURL=/manage/pages'],
-      js: ['src/pages/contentInjected/index.js'],
+      js: ['src/pages/contentInjected/index.js', 'src/pages/contentUI/index.js'],
       // KEY for cache invalidation
       css: ['assets/css/contentStyle<KEY>.chunk.css'],
       all_frames: true,
     },
-    // {
-    //   matches: ['http://*/*', 'https://*/*', '<all_urls>'],
-    //   js: ['src/pages/contentUI/index.js'],
-    // },
   ],
   web_accessible_resources: [
     {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react-vite",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "티스토리 확장프로그램 StoryHelper",
   "license": "MIT",
   "repository": {

public/_locales/en/messages.json

@@ -103,6 +103,10 @@
     "description": "SEO optimization checker feature",
     "message": "SEO Optimization Checker (v1.5)"
   },
+  "feature_preview_side_view": {
+    "description": "Preview side view feature",
+    "message": "Preview Side View (v1.7)"
+  },
   "shortcut_publish": {
     "description": "Publish post shortcut",
     "message": "Publish Post"
@@ -223,6 +227,14 @@
     "description": "Image size bulk edit prompt",
     "message": "Resize all images in the content:"
   },
+  "menu_side_view_on": {
+    "description": "Side view activate menu text",
+    "message": "Preview Side View"
+  },
+  "menu_side_view_off": {
+    "description": "Side view deactivate menu text",
+    "message": "Close Side View"
+  },
   "tooltip_alt_tag_editor": {
     "description": "Alt tag editor tooltip",
     "message": "Edit Alt Tag"

public/_locales/ko/messages.json

@@ -103,6 +103,10 @@
     "description": "SEO 최적화 검증 기능",
     "message": "SEO 최적화 검증기능 (v1.5)"
   },
+  "feature_preview_side_view": {
+    "description": "미리보기 사이드뷰 기능",
+    "message": "미리보기 사이드뷰 (v1.7)"
+  },
   "shortcut_publish": {
     "description": "글 발행 단축키",
     "message": "글 발행"
@@ -223,6 +227,14 @@
     "description": "이미지 크기 일괄 수정 프롬프트",
     "message": "본문의 이미지의 크기를 모두 수정합니다:"
   },
+  "menu_side_view_on": {
+    "description": "사이드뷰 활성화 메뉴 텍스트",
+    "message": "미리보기 사이드뷰"
+  },
+  "menu_side_view_off": {
+    "description": "사이드뷰 비활성화 메뉴 텍스트",
+    "message": "사이드뷰 닫기"
+  },
   "tooltip_alt_tag_editor": {
     "description": "Alt 태그 수정 툴팁",
     "message": "Alt 태그 수정"

src/pages/background/index.ts

@@ -3,6 +3,12 @@ import 'webextension-polyfill';
 
 chrome.runtime.setUninstallURL('https://storyhelper.shipfriend.dev/feedback');
 
+chrome.runtime.onInstalled.addListener(details => {
+  if (details.reason === 'install') {
+    chrome.tabs.create({ url: 'https://storyhelper.shipfriend.dev/introduce' });
+  }
+});
+
 reloadOnUpdate('pages/background');
 
 /**

src/pages/content/injected/altTager.ts

@@ -3,11 +3,7 @@ import { createTooltip, showTooltip, hideTooltip } from '@pages/content/util/too
 
 async function altTager() {
   const result = await chrome.storage.local.get('func_1');
-  if (typeof result.func_1 === 'boolean') {
-    if (!result.func_1) {
-      return;
-    }
-  }
+  if (result.func_1 === false) return;
   let altTag = '';
 
   const menu = $('#mceu_18', document.body);

src/pages/content/injected/checkSEO.ts

@@ -7,11 +7,7 @@ const checkSEO = async () => {
   let hasShownReviewPromptThisSession = false;
   const result = await chrome.storage.local.get('func_4');
 
-  if (typeof result.func_4 === 'boolean') {
-    if (!result.func_4) {
-      return;
-    }
-  }
+  if (result.func_4 === false) return;
 
   const post: Document = getEditorDocument();
   const OPTIMIZED_SVG =

src/pages/content/injected/components/SVG.ts

@@ -19,3 +19,5 @@ export const ImageScale = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 export const TextCounter = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-icon lucide-text"><path d="M15 18H3"/><path d="M17 6H3"/><path d="M21 12H3"/></svg>`;
 
 export const SEO = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-check-icon lucide-list-check"><path d="M11 18H3"/><path d="m15 18 2 2 4-4"/><path d="M16 12H3"/><path d="M16 6H3"/></svg>`;
+
+export const SidebarView = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-columns2-icon lucide-columns-2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/></svg>`;

src/pages/content/injected/imageSize.ts

@@ -5,21 +5,18 @@ import { getEditorDocument } from '@root/utils/dom/utilDOM';
 
 async function imageSize() {
   const result = await chrome.storage.local.get('func_2');
-  if (typeof result.func_2 === 'boolean') {
-    if (!result.func_2) {
-      return;
-    }
-  }
-  const menu = document.body.querySelector('#mceu_18');
+  if (result.func_2 === false) return;
+  const anchor = document.body.querySelector('#altTager') ?? document.body.querySelector('#mceu_18');
   const imageSizer = document.createElement('div');
+  imageSizer.id = 'sh-image-sizer-btn';
   imageSizer.classList.add('mce-widget', 'mce-btn', 'mce-menubtn', 'mce-fixed-width');
 
   const button = document.createElement('button');
   imageSizer.appendChild(button);
 
   button.innerHTML =
     '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="17" height="17"><path d="M9.854,14.854L1.707,23h6.293v1H1.5c-.827,0-1.5-.673-1.5-1.5v-6.5H1v6.293L9.146,14.146l.707,.707ZM22.5,0h-6.5V1h6.293L14.146,9.146l.707,.707L23,1.707v6.293h1V1.5c0-.827-.673-1.5-1.5-1.5Z"/></svg>';
-  menu.insertAdjacentElement('afterend', imageSizer);
+  anchor.insertAdjacentElement('afterend', imageSizer);
 
   // Tooltip 생성
   const tooltip = createTooltip(chrome.i18n.getMessage('tooltip_image_resizer'));

src/pages/content/injected/index.ts

@@ -3,15 +3,15 @@ import textCounter from '@pages/content/injected/textCounter';
 import altTager from '@pages/content/injected/altTager';
 import imageSize from '@pages/content/injected/imageSize';
 import checkSEO from '@pages/content/injected/checkSEO';
-import statusIndicator from '@pages/content/injected/statusIndicator';
+import previewSideView from '@pages/content/injected/previewSideView';
 
 (async () => {
   await keyMapping();
-  await imageSize();
-  await altTager();
+  await altTager(); // 1. #mceu_18 뒤에 삽입
+  await imageSize(); // 2. #altTager 뒤에 삽입
   await checkSEO();
   await textCounter();
-  await statusIndicator();
+  await previewSideView(); // 3. #sh-image-sizer-btn 뒤에 삽입
 })();
 
 console.log('StoryHelper Load Complete');

src/pages/content/injected/keymap.ts

@@ -10,11 +10,7 @@ interface Shortcut {
 
 async function keyMapping() {
   const result = await chrome.storage.local.get('func_0');
-  if (typeof result.func_0 === 'boolean') {
-    if (!result.func_0) {
-      return;
-    }
-  }
+  if (result.func_0 === false) return;
 
   const editor = $('#tinymce', getEditorDocument());