feat: alt 태그 입력기능 구현

manifest.js

@@ -15,7 +15,7 @@ const manifest = {
   name: '__MSG_extensionName__',
   version: packageJson.version,
   description: '__MSG_extensionDescription__',
-  permissions: ['storage', 'sidePanel'],
+  permissions: ['storage', 'sidePanel', 'scripting', 'activeTab'],
   side_panel: {
     default_path: 'src/pages/sidepanel/index.html',
   },
@@ -36,7 +36,7 @@ const manifest = {
   },
   content_scripts: [
     {
-      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
+      matches: ['https://*.tistory.com/manage/newpost/*'],
       js: ['src/pages/contentInjected/index.js'],
       // KEY for cache invalidation
       css: ['assets/css/contentStyle<KEY>.chunk.css'],

src/pages/content/injected/altTager.ts

@@ -0,0 +1,34 @@
+function func() {
+  console.log('컨텐츠 스크립트가 정상적으로 로드되었습니다.');
+
+  const menu = document.body.querySelector('#mceu_18');
+  console.log(menu);
+  const altTager = document.createElement('div');
+  altTager.classList.add('mce-widget', 'mce-btn', 'mce-menubtn', 'mce-fixed-width');
+
+  const button = document.createElement('button');
+  altTager.appendChild(button);
+
+  button.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-400q0-33 23.5-56.5T200-680h160v80H200v400h560v-400H600v-80h160q33 0 56.5 23.5T840-600v400q0 33-23.5 56.5T760-120H200Zm280-200L320-480l56-56 64 63v-487h80v487l64-63 56 56-160 160Z"/></svg>';
+  menu.insertAdjacentElement('afterend', altTager);
+
+  altTager.addEventListener('click', () => {
+    const userInput = window.prompt('텍스트를 입력하세요:', '');
+
+    if (userInput !== null) {
+      // 사용자가 확인 버튼을 눌렀을 때의 로직
+      console.log('본문의 Alt 태그를 모두 수정합니다:', userInput);
+
+      const post: Document = (document.getElementById('editor-tistory_ifr') as HTMLIFrameElement).contentDocument;
+      const imgs: HTMLImageElement[] = Array.from(post.body.getElementsByTagName('img'));
+      console.log(imgs);
+      imgs.forEach(img => (img.alt = userInput));
+    } else {
+      // 사용자가 취소 버튼을 눌렀거나 창을 닫았을 때의 로직
+      console.log('사용자가 입력을 취소했습니다.');
+    }
+  });
+}
+
+export default func();

src/pages/content/injected/index.ts

@@ -7,4 +7,14 @@
  * If you want to use other modules in content scripts, you need to import them via these files.
  *
  */
-import('@pages/content/injected/toggleTheme');
+
+import('@pages/content/injected/altTager');
+
+// const script = document.createElement('script');
+// script.src = chrome.runtime.getURL('src/pages/injected/index.js');
+// (document.head || document.documentElement).appendChild(script);
+// script.onload = function () {
+//   script.remove();
+// };
+
+console.log('index.ts 로드 완료');

src/pages/content/injected/toggleTheme.ts

@@ -1,12 +1,12 @@
-import exampleThemeStorage from '@src/shared/storages/exampleThemeStorage';
-import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+// import exampleThemeStorage from '@src/shared/storages/exampleThemeStorage';
+// import refreshOnUpdate from 'virtual:reload-on-update-in-view';
 
-refreshOnUpdate('pages/content/injected/toggleTheme');
+// refreshOnUpdate('pages/content/injected/toggleTheme');
 
-async function toggleTheme() {
-  console.log('initial theme!', await exampleThemeStorage.get());
-  await exampleThemeStorage.toggle();
-  console.log('toggled theme', await exampleThemeStorage.get());
-}
+// async function toggleTheme() {
+//   console.log('initial theme!', await exampleThemeStorage.get());
+//   await exampleThemeStorage.toggle();
+//   console.log('toggled theme', await exampleThemeStorage.get());
+// }
 
-void toggleTheme();
+// void toggleTheme();

src/pages/popup/Popup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import '@pages/popup/Popup.css';
 import withSuspense from '@src/shared/hoc/withSuspense';
 import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
@@ -7,18 +7,30 @@ const Popup = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const tabList = ['기능 목록', '단축키 설정', '크레딧'];
   const funcList = ['추가 단축키 활성화', '이미지 대체텍스트 입력기', '페이지 미리보기'];
-  // const [checkedList, setCheckedList] = useState([]);
+  const [checkedList, setCheckedList] = useState({});
 
-  const onClickCheckBox = (index: number, isChecked: boolean): void => {
-    // const funcKey = `func_${index}`;
-    chrome.storage.local
-      .set({
-        funcKey: isChecked,
-      })
-      .then(res => {
-        console.log(res);
+  const onClickCheckBox = (event: React.MouseEvent<HTMLInputElement>, index: number) => {
+    const funcKey: string = `func_${index}`;
+    const target = event.target as HTMLInputElement;
+
+    chrome.storage.local.set({ [funcKey]: target.checked }).then(() => {
+      setCheckedList(prev => {
+        return { ...prev, [funcKey]: target.checked };
       });
+    });
+  };
+
+  const loadPreChecked = (): void => {
+    const arr = funcList.map((func, i) => `func_${i}`);
+    chrome.storage.local.get(arr, result => {
+      setCheckedList(result);
+    });
   };
+
+  useEffect(() => {
+    loadPreChecked();
+  }, []);
+
   return (
     <main className="popup-container">
       <h1>Story Helper</h1>
@@ -37,15 +49,10 @@ const Popup = () => {
       </div>
       <ul className="funcList">
         {funcList.map((func, i) => {
+          const key = `func_${i}`;
           return (
             <li key={i}>
-              <input
-                type="checkbox"
-                onChange={e => {
-                  console.log('체크됨');
-                  onClickCheckBox(i, e.target.checked);
-                }}
-              />
+              <input type="checkbox" defaultChecked={checkedList[key]} onClick={event => onClickCheckBox(event, i)} />
               <span>{func}</span>
             </li>
           );