// Adds an event listener that triggers when a tab is activated (focused).
chrome.tabs.onActivated.addListener(function (info) {
  // Queries the active tab within the current window.
  chrome.tabs.query({ active: true }, function (tabs) {
    // Sends a message to the active tab to perform an action (e.g., updating the tab).
    chrome.tabs.sendMessage(tabs[0].id, { action: "SETTINGS_UPDATED" });
  });
});

import useStore from "@root/src/hooks/useStore";
import "@pages/options/Options.css";
import { setStorageData } from "@root/src/utils";
 
const Options = () => {
  const [state, dispatch] = useStore();
 
  const saveSettings = async () => {
    await setStorageData(state);
    chrome.runtime.sendMessage({ action: "SETTINGS_UPDATED", payload: state });
  };
 
  return (
    <div className="min-h-screen  justify-between items-center flex">
      <div className="flex flex-col m-auto w-1/2 space-y-4">
        <h1 className="text-5xl">Options</h1>
        <input
          type="text"
          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          value={state.name}
          onChange={(e) =>
            dispatch({
              type: "UPDATE_SETTINGS",
              payload: { name: e.target.value },
            })
          }
        />
        <button
          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          onClick={saveSettings}
        >
          Save
        </button>
        <p className="text-sm">
          Changes done here get reflected to content script without
          automatically
        </p>
      </div>
    </div>
  );
};
 
export default Options;

import logo from "@assets/img/logo.png";
import useStore from "@root/src/hooks/useStore";
 
export default function App() {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [state, dispatch] = useStore();
 
  return (
    <div className="text-black border-2 p-2">
      <div className="bg-indigo-200 h-full w-full flex justify-center items-center">
        <div className="text-center">
          <div className="flex justify-center">
            <img
              src={chrome.runtime.getURL(logo)}
              alt="Launchify"
              className="h-12 w-12"
            />
          </div>
          <h1 className="text-3xl">Welcome to {state.name}</h1>
          <h1 className="text-xl">Let&apos;s get started</h1>
        </div>
      </div>
    </div>
  );
}

import { useEffect, useReducer } from "react";
import { getStorageData } from "@root/src/utils";
// Reducer function to handle state changes
function reducer(state, action) {
  switch (action.type) {
    // Action to set the initial state
    case "UPDATE_SETTINGS":
      return {
        ...state,
        ...action.payload,
      };
    // Default case returns the current state
    default:
      return state;
  }
}
 
// Custom hook to manage state using useReducer and useEffect
const useStore = () => {
  // Initialize the state and dispatch function using useReducer
  const [state, dispatch] = useReducer(reducer, {
    name: "Launchify",
  });
 
  // useEffect hook to handle side effects
  useEffect(() => {
    // Add a message listener to listen for messages from the background script or other parts of the extension
    chrome.runtime.onMessage.addListener(async (message) => {
      switch (message.action) {
        // Handle the 'SETTINGS_UPDATED' action sent from the background script
        case "SETTINGS_UPDATED": {
          // Currently does nothing, but can be extended with further logic to update the component state or perform other actions
          const response = await getStorageData(Object.keys(state));
          dispatch({ type: "UPDATE_SETTINGS", payload: response });
          return true;
        }
      }
      return true; // Indicates asynchronous response
    });
 
    // Cleanup function to remove the message listener when the component is unmounted or dependencies change
    return () => {
      chrome.runtime.onMessage.removeListener(() => {});
    };
  }, [dispatch, state]); // Dependencies array for useEffect, re-runs the effect when dispatch or state changes
 
  // Return the current state and dispatch function from the hook
  return [state, dispatch];
};
 
export default useStore;
 
/*
 * This code defines a custom hook, `useStore`, which manages state using `useReducer` and listens for messages from the Chrome extension runtime.
 *
 * 1. The `reducer` function handles state changes based on action types.
 *    - The 'SET_INIT_STATE' action sets the initial state with the name 'Launchify'.
 *    - The default case returns the current state if the action type is not recognized.
 *
 * 2. The `useStore` hook initializes state using `useReducer` with the `reducer` function and initial state.
 *    - `state` represents the current state.
 *    - `dispatch` is a function to dispatch actions to update the state.
 *
 * 3. The `useEffect` hook is used to add and remove a message listener.
 *    - `chrome.runtime.onMessage.addListener` listens for messages sent from other parts of the extension.
 *    - The listener checks the action type of the received message.
 *    - If the action type is 'SETTINGS_UPDATED', it currently does nothing but can be extended with further logic.
 *      - This is where you would handle the 'SETTINGS_UPDATED' action sent from the background script to update the component state or perform other actions as needed.
 *      - For example, you might update the state with new data related to the active tab.
 *    - The cleanup function returned by `useEffect` removes the message listener to prevent memory leaks.
 *    - The dependencies array `[dispatch, state]` ensures the effect runs when these dependencies change.
 *
 * 4. The `useStore` hook returns the current state and the dispatch function for use in React components.
 *
 * 5. `export default useStore` makes the custom hook available for import in other parts of the application.
 */