Asif Posts - Answer Overflow

Asif

•Created by Asif on 3/17/2024 in #👟framework

Tab page injecting CSS into website's runtime

I am devloping my sign in option with tab pages. But if i style the body this directly affect website body. How to prevent this? I don't want to inject my CSS into website. tabs/signin.tsx

import './signin.css'

export default Signin = () => {...}

import './signin.css'

export default Signin = () => {...}

tabs/signin.css

body{
 background: red;
}

body{
 background: red;
}

3 replies

PD🧩 Plasmo Developers

•Created by Asif on 2/26/2024 in #👟framework

Rendering issue on single page application (SPA) like youtube

I am trying to make something for youtube where i am using inline anchor. I want to inject a button on every video on youtube homepage. My code is here

import cssText from "data-text:~contents/style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
import { useEffect, useState } from "react"

export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/"]
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll("a#thumbnail.ytd-thumbnail")

const HomePage = ({ anchor }) => {
  return (
    <button className="home-button-position">
      ...
    </button>
  )
}

export default HomePage

import cssText from "data-text:~contents/style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
import { useEffect, useState } from "react"

export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/"]
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll("a#thumbnail.ytd-thumbnail")

const HomePage = ({ anchor }) => {
  return (
    <button className="home-button-position">
      ...
    </button>
  )
}

export default HomePage

The problem is: If i land on a single video page, then i navigate to youtube home page, the buttons on every video is not rendering. But if i refresh the home page again, the buttons rendered and working fine. How to solve this issue? Please suggest me

5 replies

PD🧩 Plasmo Developers

•Created by Asif on 1/3/2024 in #👟framework

Google & Facebook OAuth without firebase

Hello, I am trying to make authentication system with google oauth. But as firebase is not free to use after certain request, that's why i want to do it by implementing the endpoint which i do in my react application. For this case i am using a package named @react-oauth/google But this is not working properly. I got some error like

Refused to load the script 'https://accounts.google.com/gsi/client' 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:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://accounts.google.com/gsi/client' 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:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Can anyone help me how to fix it? Or is there any blog or documentation for implement google and facebook oauth?

15 replies

PD🧩 Plasmo Developers

•Created by Asif on 11/10/2023 in #👾extension

How send message from background to content script UI

13 replies

PD🧩 Plasmo Developers

•Created by Asif on 10/28/2023 in #👟framework

Render content UI on specific URL in SPA

I am using overlay in content ui. I want to show it on a specific url. That's why i use the config below:

export const config: PlasmoCSConfig = {
  matches: ["https://*.zillow.com/*_zpid/"]
}

export const config: PlasmoCSConfig = {
  matches: ["https://*.zillow.com/*_zpid/"]
}

When i land on a matching url the UI is completely fine. But if i go to another page in this website without matching config url , the UI should be removed. But it doesn't because of single page application. The UI render only when the page reload. How to overcome this problem? Please help me

2 replies

Gaming

Programming