PD
🧩 Plasmo DevelopersFraud Enjoyer

Can't figure out how to navigate from my extention to my auth page

I'm trying to test a popup extension I made that has a button that is supposed to navigate to http://localhost:3000 when clicked: 
<script>
  import { fade } from 'svelte/transition';
  function handleLoginClick() {
    window.location.href = 'http://www.localhost:3000';
  }
</script>

<div class="container" transition:fade>
  <div class="header">
    <img class="logo" src="https://www.dropbox.com/scl/fi/zd8sxq5w8dt0nhkm5d271/dunewordmark.png?rlkey=chxno12hj7kjy4zzb27k9rd3k&dl=1" alt="Dune Logo">
    <div class="closeIcon">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1102 3.96732C13.4077 3.66978 13.4077 3.18737 13.1102 2.88982C12.8126 2.59228 12.3302 2.59228 12.0327 2.88982L8 6.9225L3.96732 2.88982C3.66978 2.59228 3.18737 2.59228 2.88983 2.88982C2.59229 3.18737 2.59229 3.66978 2.88983 3.96732L6.92251 8L2.88983 12.0327C2.59229 12.3302 2.59229 12.8126 2.88983 13.1102C3.18737 13.4077 3.66978 13.4077 3.96732 13.1102L8 9.0775L12.0327 13.1102C12.3302 13.4077 12.8126 13.4077 13.1102 13.1102C13.4077 12.8126 13.4077 12.3302 13.1102 12.0327L9.0775 8L13.1102 3.96732Z" fill="#949FB1"></path></svg>
    </div>
  </div>
<script>
  import { fade } from 'svelte/transition';
  function handleLoginClick() {
    window.location.href = 'http://www.localhost:3000';
  }
</script>

<div class="container" transition:fade>
  <div class="header">
    <img class="logo" src="https://www.dropbox.com/scl/fi/zd8sxq5w8dt0nhkm5d271/dunewordmark.png?rlkey=chxno12hj7kjy4zzb27k9rd3k&dl=1" alt="Dune Logo">
    <div class="closeIcon">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1102 3.96732C13.4077 3.66978 13.4077 3.18737 13.1102 2.88982C12.8126 2.59228 12.3302 2.59228 12.0327 2.88982L8 6.9225L3.96732 2.88982C3.66978 2.59228 3.18737 2.59228 2.88983 2.88982C2.59229 3.18737 2.59229 3.66978 2.88983 3.96732L6.92251 8L2.88983 12.0327C2.59229 12.3302 2.59229 12.8126 2.88983 13.1102C3.18737 13.4077 3.66978 13.4077 3.96732 13.1102L8 9.0775L12.0327 13.1102C12.3302 13.4077 12.8126 13.4077 13.1102 13.1102C13.4077 12.8126 13.4077 12.3302 13.1102 12.0327L9.0775 8L13.1102 3.96732Z" fill="#949FB1"></path></svg>
    </div>
  </div>
But when I click it it throws this error: 
popup.html#:14 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
popup.html#:14 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
L
lab•57d ago
You should send a message to bgsw and have bgsw open the tab instead Popup is very restricted/isolated
FE
Fraud Enjoyer•57d ago
Ahhhh ok ok
A
Arcane•57d ago
@Bardo's Eden has reached level 1. GG!
FE
Fraud Enjoyer•57d ago
  <div class="content">
    <h1>Welcome to Dune</h1>
    <p>Log in to access your account</p>
      <button onclick={async () => {const resp = await sendToBackground({name: "authenticate", })}} class="btn-primary">Log in</button>
    <p class="forgot-password">Forgot your password?</p>
    <p class="signup">Don't have an account? <a href="#">Sign up</a></p>
  </div>
</div>
  <div class="content">
    <h1>Welcome to Dune</h1>
    <p>Log in to access your account</p>
      <button onclick={async () => {const resp = await sendToBackground({name: "authenticate", })}} class="btn-primary">Log in</button>
    <p class="forgot-password">Forgot your password?</p>
    <p class="signup">Don't have an account? <a href="#">Sign up</a></p>
  </div>
</div>
import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  chrome.tabs.create({ url: "http://localhost:3000" })
  res.send({ success: true })
}

export default handler
import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  chrome.tabs.create({ url: "http://localhost:3000" })
  res.send({ success: true })
}

export default handler
Want results from more Discord servers?
Add your server
More Posts
Parallel dev serversI need to both run `plasmo dev --verbose` and `plasmo dev --verbose --target=firefox-mv3`, but when Absolutely! In Plasmo, to send a messageAbsolutely! In Plasmo, to send a message from a side panel to a content script in the main world, yoHow to sendToBackground from main worldi've try all of messaging method but background still not receive anythingHow to fetch current tab localStorage?How to use this storage Api in plasmo to to fetch the localStorage of the current open tab?. And whHow can I open the side panel programmatically?I am interested in opening the side panel programmatically by messaging the background script from t@Pallas#2819 I keep getting this error@Pallas I keep getting this error when I run `pnpm build`: "🟣 Plasmo v0.84.2 🔴 The Browser Extensibutton click inside CSUI closes the CSUIWhen I click on a button inside the injected CSUI, the whole component is closing. I am using a useebackground errorIm using the with background example, I don't see any console log on the service worker. How can I anyone got any good example of CSUI lifecycle?I have been going through the official docs back and forth but still having tough time to fully grasQuick screen changeHere is a simple code that i have developed. I was wandering how i can avoid the quick screen changePermission Denied Error on Firefox mv2I am running a content script which has an async function that makes an api call to fetch some data Rendering issue on single page application (SPA) like youtubeI am trying to make something for youtube where i am using inline anchor. I want to inject a button Custom Font Isn't Working on TwitterI've made a simple code to change the font on websites like Stack Overflow and Twitter. It works on Build variable to indicate "background" or "content" script?Right now the only thing I can do to determine if a shared function is running in content or backgro