Merge pull request #4 from yorifuji/dev

1.0.4

README.md

@@ -2,19 +2,13 @@
 
 ## 概要
 
-これは、Figmaを非Dev Modeで閲覧していると次のような警告を画面上部に表示するChrome拡張機能です。
+これは、Figma を非 Dev Mode で閲覧していると次のような警告を画面に表示する Chrome 拡張機能です。
 
 ![image](./images/banner.png)
 
-## 機能
-
-- URL パラメータ（`?m=dev`）に基づいて開発モードを検出
-- 非開発モード時に警告メッセージを表示
-- ユーザーが警告を閉じる機能
-
 ## インストール方法
 
-### chrome web store
+### Chrome web store
 
 [Non-Dev Mode Alert - Chrome ウェブストア](https://chromewebstore.google.com/detail/non-dev-mode-alert/edpldihlkibendkdckeikfdnibkbejaf)
 
@@ -29,3 +23,9 @@
 
 - 拡張機能をインストールすると自動的に動作します。
 - 警告メッセージが表示された場合、「非表示」ボタンをクリックして閉じることができます。
+
+## 機能
+
+- URL パラメータ（`?m=dev`）に基づいて開発モードを検出
+- 非開発モード時に警告メッセージを表示
+- ユーザーが警告を閉じる機能

main.js

@@ -7,10 +7,11 @@
   function checkDevMode() {
     const url = new URL(window.location.href);
     const isDevMode = url.searchParams.get(DEV_MODE_PARAM) === DEV_MODE_VALUE;
+    const isDesignPath = url.pathname.startsWith("/design/");
 
-    if (!isDevMode && !isAlertClosed) {
+    if (!isDevMode && !isAlertClosed && isDesignPath) {
       showAlert();
-    } else if (isDevMode) {
+    } else if (isDevMode || !isDesignPath) {
       isAlertClosed = false;
       removeAlert();
     }

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Non-Dev Mode Alert",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Figmaを非Dev Modeで閲覧していると画面上に警告を表示するChrome拡張機能です",
   "icons": {
     "16": "icon16.png",

styles.css

@@ -1,8 +1,7 @@
 .non-dev-mode-alert {
     position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 20px;
+    right: 20px;
     background-color: #ff4d4d;
     color: #fff;
     padding: 10px 20px;