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
But when I click it it throws this error:
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>
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.
4 Replies
You should send a message to bgsw and have bgsw open the tab instead
Popup is very restricted/isolated
Ahhhh ok ok
@Bardo's Eden has reached level 1. GG!
<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