Merge pull request #29 from ut-code/feature/updatesidepanel

拡張機能促し

Author: shirokuma222

src/content.ts

@@ -1,6 +1,83 @@
 // content.tsx
 export {}
 
+// 対象のホスト名
+const TARGET_HOST = 'browser-hack.utcode.net';
+if (window.location.host === TARGET_HOST) {
+  let isSidePanelOpen = false;
+  const warningElement = document.createElement('div');
+  warningElement.id = 'sidepanel-warning';
+  warningElement.innerHTML = `
+    <p><strong>注意</strong></p>
+    <p>サイドパネルが開かれていません。右上の<span class="badge">ブ</span>をクリックしてサイドパネルを開いてください。</p>
+  `;
+
+  const badge = warningElement.querySelector<HTMLSpanElement>('.badge')
+  if (badge) {
+    Object.assign(badge.style, {
+      display: 'inline-block',
+      width: '1.6em',
+      height: '1.6em',
+      backgroundColor: '#6a6767ff',
+      textAlign: 'center',
+      lineHeight: '1.6em',
+      color: '#ffffff',
+    })
+  }
+
+  // スタイルを直接設定
+  warningElement.style.position = 'fixed';
+  warningElement.style.top = '20px';
+  warningElement.style.right = '20px';
+  warningElement.style.padding = '20px';
+  warningElement.style.backgroundColor = '#fff3cd';
+  warningElement.style.color = '#ff0000ff';
+  warningElement.style.border = '1px solid #ffc107';
+  warningElement.style.borderRadius = '8px';
+  warningElement.style.zIndex = '9999';
+  warningElement.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
+  warningElement.style.fontFamily = 'sans-serif';
+  warningElement.style.display = 'none'; // 最初は非表示
+
+  document.body.appendChild(warningElement);
+
+  // 2秒後にサイドパネルが開かれていなければ警告を表示
+  const warningTimeout = setTimeout(() => {
+    if (!isSidePanelOpen) {
+      warningElement.style.display = 'block';
+    }
+  }, 2000);
+
+  // タブが閉じるとリセット
+  window.addEventListener('beforeunload', () => {
+    isSidePanelOpen = false;
+    clearTimeout(warningTimeout); 
+  });
+
+  chrome.runtime.onConnect.addListener((port) => {
+    if (port.name !== 'sidepanel') return
+    ports.add(port)
+
+    // サイドパネルからのメッセージをリッスン
+    port.onMessage.addListener((msg) => {
+      if (msg.type === 'SIDE_PANEL_OPENED') {
+        isSidePanelOpen = true;
+        warningElement.style.display = 'none'; // 警告を非表示にする
+      }
+    });
+
+    const initialValues = getCurrentValues()
+    lastJson = JSON.stringify(initialValues)
+    port.postMessage({
+      type: 'DOM_VALUE_UPDATE',
+      pageKey: PAGE_KEY,
+      values: initialValues,
+    })
+
+    port.onDisconnect.addListener(() => ports.delete(port))
+  })
+}
+
 const PAGE_KEY = `${location.origin}${location.pathname}`
 
 function isDisplayed(el: Element | null): boolean {
@@ -79,6 +156,7 @@ chrome.runtime.onConnect.addListener((port) => {
   if (port.name !== 'sidepanel') return
   ports.add(port)
 
+
   const initialValues = getCurrentValues()
   lastJson = JSON.stringify(initialValues)
   port.postMessage({

src/sidepanel/App.tsx

@@ -66,6 +66,11 @@ function App() {
 
         port = chrome.tabs.connect(tab.id, { name: 'sidepanel' })
 
+        // --- ここから追加 ---
+        // サイドパネルが開いたことを content.ts に通知
+        port.postMessage({ type: 'SIDE_PANEL_OPENED' });
+        // --- ここまで追加 ---
+
         port.onMessage.addListener((msg) => {
           if (msg?.type === 'DOM_VALUE_UPDATE') {
             const { p1, p2, p3Visible, p4 } = msg.values