همگام سازی وضعیت برنامه های افزودنی Chrome – انجمن DEV

npx degit codegino/svelte-tailwind-chrome-plugin#02-options my-target-folder

cd my-target-folder
npm install
npm run dev

// src/components/Counter.svelte
<script lang="ts">
  export let count: number;
  let message: string = null;

  const increment = () => (count += 1);
  const decrement = () => (count -= 1);


-  const handleSave = () => {
-    chrome.storage.sync.set({ count }).then(() => {
-      message = "Updated!";
-
-      setTimeout(() => {
-        message = null;
-      }, 2000);
-    });
-  };
+  const handleSave = async () => {
+    await chrome.storage.sync.set({ count });
+    message = "Updated!";
+
+    // This is the only different behavior
+    await chrome.runtime.sendMessage({count, type: "count_updated"});
+
+    setTimeout(() => {
+      message = null;
+    }, 2000);
+  };
</script>

// src/components/Counter.svelte
<script lang="ts">
+  import { onMount } from "svelte";

  export let count: number;
  let message: string = null;


+  onMount(() => {
+    chrome.runtime.onMessage.addListener(handleMessageEvent);
+  });
+
+  function handleMessageEvent(request, _, sendResponse) {
+    if (request.type === "count_updated") {
+      count = request.count;
+    }
+  }

  const increment = () => (count += 1);
  const decrement = () => (count -= 1);

  const handleSave = async () => {
    await chrome.storage.sync.set({ count });
    message = "Updated!";

    await chrome.runtime.sendMessage({count, type: "count_updated"});

    setTimeout(() => {
      message = null;
    }, 2000);
  };
</script>

// src/components/Counter.svelte
function handleMessageEvent(request, _, sendResponse) {
  if (request.type === "count_updated") {
+    sendResponse({ message: `from ${count} to ${request.count}` });
    count = request.count;
  }
}

const handleSave = async () => {
  await chrome.storage.sync.set({ count });
  message = "Updated!";


-  await chrome.runtime.sendMessage({count, type: "count_updated"});
+  const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
+  message += ` ${res.message}`;

  setTimeout(() => {
    message = null;
  }, 2000);
};

// src/components/Counter.svelte
  const handleSave = async () => {
    await chrome.storage.sync.set({ count });
    message = "Updated!";


-    const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
-    message += ` ${res.message}`;
+    try {
+      const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
+      message += ` ${res.message}`;
+    } catch (error) {
+      // Handle error here
+      console.log("TODO:", error);
+    }

    setTimeout(() => {
      message = null;
    }, 2000);
  };

// src/components/Counter.svelte
const handleSave = async () => {
  await chrome.storage.sync.set({ count });
  message = "Updated!";

  chrome.runtime.sendMessage({count, type: "count_updated"},
    (res) => {
      const lastError = chrome.runtime.lastError;

      // This conditional check is important to remove the error
      if (lastError) {
        // Handle error here
        console.log("TODO:", lastError.message);
        return;
      }
      message += ` ${res.message}`;
    }
  );

  setTimeout(() => {
    message = null;
  }, 2000);
};

// src/components/Counter.svelte
import { onDestroy } from "svelte";

// Rest of the code...

onDestroy(() => {
  chrome.runtime.onMessage.removeListener(handleMessageEvent);
});

// src/components/Counter.svelte
// Rest of the code...

onMount(() => {
  chrome.runtime.onMessage.addListener(handleMessageEvent);

  return () => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  };
});

// src/components/Counter.svelte
onMount(() => {
  chrome.runtime.onMessage.addListener(handleMessageEvent);

  // For demo purposes only
  setTimeout(() => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  }, 4000);

  return () => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  };
});