PD
🧩 Plasmo Developers•2y ago
notdevkey

How do I access the current website URL from Plasmo popup?

Hey all, I'm trying to access the active tab URL from Plasmo popup. I'm already using storage and I need to store the url to have the extension disabled for the current website. How would I get the website URL using Plasmo?
1 Reply
notdevkey
notdevkeyOP•2y ago
just found the solution, for anyone wondering 
const [currentTab, setCurrentTab] = useState("");

  useEffect(
    () =>
      chrome.tabs.query(
        {
          active: true,
          currentWindow: true,
        },
        function (tabs) {
          const tab = tabs[0];
          if (tab.url) {
            setCurrentTab(tab.url);
          }
        },
      ),
    [chrome],
  );

  return (
    <Switch
      className="data-[state=checked]:bg-green-500"
      checked={!settings.disabledHosts.includes(currentTab)}
      onCheckedChange={(isChecked) =>
        isChecked
          ? setSettings((prev) => ({
              ...prev,
              disabledHosts: settings.disabledHosts.filter(
                (host) => host !== currentTab,
              ),
            }))
          : setSettings((prev) => ({
              ...prev,
              disabledHosts: [...settings.disabledHosts, currentTab],
            }))
      }
    />
  )
const [currentTab, setCurrentTab] = useState("");

  useEffect(
    () =>
      chrome.tabs.query(
        {
          active: true,
          currentWindow: true,
        },
        function (tabs) {
          const tab = tabs[0];
          if (tab.url) {
            setCurrentTab(tab.url);
          }
        },
      ),
    [chrome],
  );

  return (
    <Switch
      className="data-[state=checked]:bg-green-500"
      checked={!settings.disabledHosts.includes(currentTab)}
      onCheckedChange={(isChecked) =>
        isChecked
          ? setSettings((prev) => ({
              ...prev,
              disabledHosts: settings.disabledHosts.filter(
                (host) => host !== currentTab,
              ),
            }))
          : setSettings((prev) => ({
              ...prev,
              disabledHosts: [...settings.disabledHosts, currentTab],
            }))
      }
    />
  )
and also add 
"permissions": [
      "activeTab",
      "tabs"
    ],
"permissions": [
      "activeTab",
      "tabs"
    ],
to manifest in package.json this is a quick and ugly looking code, but it works RainbowRoach

Did you find this page helpful?