plasmohq / docs Goto Github PK

📘 Documentation site

JavaScript 1.51% TypeScript 4.18% CSS 2.24% MDX 92.07%

docs's Introduction

Plasmo Framework Documentation

The Plasmo Framework is a declarative browser extension development SDK. We abstract away most of the configuration of building browser extensions so that you can focus on the functionality of your product and ship faster!

Check out the documentation.

PRs welcome!

License

MIT ⭐ Plasmo

docs's People

Contributors

Stargazers

Watchers

Forkers

arifali123 ahmedazizkhelifi kyounghwan01 aaron5670 p6l-richard process1024 rahulrao0209 zingzheng nakalsio obinnaaka jonerrr nado1001 kevin51jiang ibbi jqphu mrchrishahn gabrifila fe-noob veer0x1 bbuono ktym4a clairefro pd4d10 pm006215 linkb15 zweihander-main wensle ashwanth1109 agentburgundy mentalgear edtervit psygik monarchwadia wfk007 martenmatrix iperzic goomai dvvolynkin k1tikurisu brandon-kong sshallow braden-w developer-mustafa monsterpi13 srkl

docs's Issues

content-scripts-ui related issues

Current plasmo version: 0.57.2

Question：
Content-scripts-ui is injected into the html outside of the body, and I want to make sure that it's injected into the body.

Don't see how to configure in the documentation
I was hoping you could help me

Feedback for “Submit Your Extension”

Summary

The link to Browser Platform Publish is broken.

Broken Link

http://bpp.browser.market/

The right link (maybe)

https://github.com/marketplace/actions/browser-platform-publisher

Related text

The Plasmo Framework ships with a convenient GitHub action called [Browser Platform Publish(opens in a new tab)]>(http://bpp.browser.market/) or BPP.

Chrome submission percularities and gotcha

when adding new permission to extension, chrome requires manual justification
the first publish on chrome must be manual zip
The manifest must be at top root

Enhance popup documentation

https://discord.com/channels/946290204443025438/946290204904390690/1035356093330772028

Sure, I was testing it in the React Developer Tools and 1Password extensions and both do not allow to open the content of popup.html at the url chrome-extension://extension_id/popup.html

Also, I found this post https://marcomelilli.com/posts/chrome-extension-determine-if-inside-popup-or-tab and its example works quite well, I tried this line and the method getViews returns 1 when I'm inside the popup and 0 when I open the popup.html url, so I can hide the content in that case
(typeof chrome != undefined && chrome.extension) ?
chrome.extension.getViews({ type: "popup" }).length > 0 : null;

Feedback for “Storage API”

This could use more explanation, particularly for the react hook implementation.

There is a problem with “Background Service Worker + Shortcut Commands”

There is an issue.

Chrome extension shortcut commands are not working in build mode.
Shortcut commands work in dev mode. but after building they don't work.
add the following codes and run "pnpm build".

//background.ts code
export {}
chrome.commands.onCommand.addListener(function(command) {
    if (command === "shortcutPressed") {
        console.log("shortcut command was pressed");
    }
  });
console.log("background.ts is active");

//package.json manifest code
  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "commands": {
      "shortcutPressed": {
        "suggested_key": {
          "default": "Alt+W"
        },
        "description": "Open the extension main popup"
      }
    }
  }

Feedback for “Quickstart with Supabase”

I am building a Plasmo extension using Svelte and am trying to send data to Supabase. I created a .env.local file with the environment variables (PLASMO_PUBLIC_SUPABASE_URL, PLASMO_PUBLIC_SUPABASE_KEY). However, the env variables cannot be accessed from the background script or the popup (they are undefined). Any advice?

Feedback for “Life Cycle of Plasmo CSUI”

Please add proper documentation for how to add modals on the main screen using any event happening in extension like a button click or change

[DOC] --target flag, with firefox-mv2

Announcing the launch of preliminary mv2 support

Add fileName to all code examples

target specific entry files

popup.chrome.tsx
popup.safari.tsx
popup.firefox.tsx

Adding docs on pcss, scss, sass, etc...

[DOC] how to use --with-* flag

[RFC] Plasmo Upgrade Helper

How do you envision this feature/change to look/work like?

Development of an upgrade helper similar to React Native's one that allows inputting the currently installed Plasmo version and desired version and shows what steps are needed to make the codebase compatible with it.

The upgrade helper outputs the exact set of instructions needed for that version jump, including all versions in between.

Currently, the only information about updating Plasmo seems to be at https://docs.plasmo.com/framework/workflows/faq#how-do-i-update-plasmo-to-the-latest-version.

I don't know if this belongs in the issues for this repo or the docs repo so feel free to move it.

What is the purpose of this change/feature? Why?

With Plasmo's APIs and feature set being very volatile, it can be difficult to know what to change when upgrading versions (especially with larger upgrades). This is especially true as more and more extension get build with Plasmo but won't get updates as frequently as Plasmo does.

Looking at the Plasmo releases, there are breaking changes from time to time and other changes of the recommended way to do things. To keep codebases up-to-date with Plasmo's features, one currently has to go through the changelog manually and find out what to change. Creating an upgrade helper would help increase the lifetime of Plasmo extensions and potentially help the spread of newer Plasmo versions.

(OPTIONAL) Example implementations

https://react-native-community.github.io/upgrade-helper/

(OPTIONAL) Contact Details

No response

Verify canary release

I verified that the issue exists in plasmo canary release

Code of Conduct

I agree to follow this project's Code of Conduct
I checked the current issues for duplicate problems.

[DOC] Using alias to reconfigure import path

https://discord.com/channels/946290204443025438/946290204904390690/1014592283246596186

Feedback for “Quickstart with Supabase”

Hi,

How do you use the same supabase client in your popup and content file?

Feedback for “Itero TestBed: Your Browser Extension Testing Solution”

when my team remove one extension on itero, all other extensions are also removed on the panel.

--source-maps (build) and --no-source-maps (dev) flag

Feedback for “Migrate to Plasmo Framework”

Where can I configure webpack related plugins?

A process.env variable to indicate a bundle being built for conditional imports?

Is there an environment variable that indicate what bundle is being built? Something akin to process.env.PLASMO_BUNDLE containing a value like background or content? Honestly I only care to know during build time if something is a background bundle because I'd like to be able to conditionally change imports. E.g.

const sentry = process.env.PLASMO_BUILD === "background" 
  ? await import("~background/lib/sentry") 
  : await import("~contents/lib/sentry")

Or if implemented via import assertions, stage 3 where you would replace the import with null if the bundle type did not match the bundle being built

import sentryBG from "~background/lib/sentry" with { bundle: "background" }
import sentryContent from "~contents/lib/sentry" with { bundle: "content" }

const sentry = sentryBG ?? sentryContent
sentry.captureException(new Error("Wat"))

Right now the only check I can think of to determine if it's a background bundle is "serviceWorker" in globalThis but this is a runtime check, not a build check, so it cannot be tree shaken causing bundles to include code that will never be executed or worse trigger build/runtime errors.

It would also enable the ability to build a chrome extension api wrapper that would allow content scripts to execute background specific apis via sendToBackground messaging to an internal handler if invoked in a content script.

[DOC] new icon assets resolution

We now support more base icon name:

icon
icon512
icon-512
icon-512x512
icon1024
icon-1024
icon-1024x1024

As well as the production/development variant:

icon.production.png
icon.development.png

etc.etc....

See: PlasmoHQ/plasmo#172

update storage usage docs for hook import path

Feedback for “Itero TestBed”

It's not very clear from reading this section how to configure Github Integration. I later found an option from within my Itero account page.

I was actually expecting a way to upload my zip image from my own Github Action workflow. Is this possible? If not, could it be something that could be considered in the feature roadmap? My build has nuances that I'd rather control in my own repository instead of through the config on Itero's side.

Thanks in advance!

missing command in quickstart guide with TailwindCSS

There is a missing command npx tailwindcss init to generate tailwind.config.js file

Feedback for “Content Scripts” & "options.tsx"

I'm trying to figure out a way to inject specific UI/icon using my content.ts based on a toggle in my options.tsx, but none of the storage/message solutions appear to be working. The only example I see is one that uses content.tsx and options.tsx. Any advice here would be appreciated

[DOC] supported scheme and their use cases

Plasmo implements custom parcel schemes that can be used for many cases. They need documentation tho!

Feedback for “Introduction to Plasmo”

创建项目之后pnpm dev 运行项目 plasmo不是内部命令识别不了

docs throws an application error after enabling page translation

I use page translation to view plasmo documents, but when I turn on page translation and browse multiple pages, the page will throw an exception, and I have to refresh the page to continue browsing the document.
I have this issue when translating web pages into Chinese or German.
Only Chrome's web translation causes the issue, Edge doesn't have the issue.

Can you try to fix this bug?

Application error: a client-side exception has occurred (see the browser console for more information).

framework-0a897eab13466586.js:9 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at uH (https://docs.plasmo.com/_next/static/chunks/framework-0a897eab13466586.js:9:84988)
main-23c1aa3ceb058a6c.js:1 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at uH (https://docs.plasmo.com/_next/static/chunks/framework-0a897eab13466586.js:9:84988)
main-23c1aa3ceb058a6c.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

init with --entry

Error occurs when "pnpm dev" after "pnpm create plasmo" according to the guide

$pnpm create plasmo

The installation went well with the above command.

After executing the below command, an error occurs.

$pnpm dev

file:///D:/work/exam-extention/exam-extention/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/plasmo/dist/index.js:74 Visit https://docs.plasmo.com for documentation and more examples.)}});var qi={};Ie(qi,{default:()=>Pm});import{paramCase as gm}from"change-case";import{resolve as ym}from"path";import{cwd as wm}from"process";async function vm(){re();let t=U("--exp"),e=await Di(),r=wm(),n=ym(r,gm(e)||e);m("Project directory:",n);let o=je(n);if(m("Package name:",o.packageName),t&&!o.packageName.startsWith("with-"))throw new Error("Example extensions must have the with- prefix");await _n(n);let i=await Mt();m(Using package manager: ${i.name} ${i?.version}),await new Bt(o,i,t).create(),await Ti(n,i),await Ni(o,n),await ji(n,r,o,i)}var Pm,Wi=d(()=>{pe();V();b();Ct();xr();De();Ii();Oi();$i();Ai();Ri();Pm=vm});import{WebSocket as xm,WebSocketServer as Sm}from"ws";var Em,Bi,Ui=d(()=>{Em=JSON.stringify({type:"build_ready"}),Bi=async t=>{let e=new Sm({port:t+1});return{triggerReload:()=>{for(let n of e.clients)n.readyState===xm.OPEN&&n.send(Em)}}}});var He,Vt=d(()=>{Ae();He=()=>{let t=Pe(),{target:e,tag:r}=t,[n,o]=e.split("-");return{tag:r,target:e,browser:n,manifestVersion:o}}});import{AssertionError as bm}from"assert";function Je(t){throw new Error("Statement should be unreachable")}function Ur(t,e="Value is invalid"){if(!t)throw new bm({message:e});return t}var lt=d(()=>{});function Fm(t){switch(t){case 0:return"Web";case 1:case 2:case 3:return Gi[t];default:Je(t)}}var Hr,Jt,Jr,ft,_m,km,Vi,Cm,Mm,Lm,Vr,Gr,Ce,Me,X,Hi,Ji,Xd,Gi,Ht,Zd,eh,zi,Ki,th,le,ke,Im,rh,Dm,nh,oh,ih,sh,Yi=d(()=>{lt();Hr="en",Jt=!1,Jr=!1,ft=!1,_m=!1,km=!1,Vi=!1,Cm=!1,Mm=!1,Lm=!1,Gr=Hr,Me=typeof self=="object"?self:typeof global=="object"?global:{};typeof Me.vscode<"u"&&typeof Me.vscode.process<"u"?X=Me.vscode.process:typeof process<"u"&&(X=process);Hi=typeof X?.versions?.electron=="string",Ji=Hi&&X?.type==="renderer",Xd=Ji&&X?.sandboxed;typeof navigator=="object"&&!Ji?(Ce=navigator.userAgent,Jt=Ce.indexOf("Windows")>=0,Jr=Ce.indexOf("Macintosh")>=0,Mm=(Ce.indexOf("Macintosh")>=0||Ce.indexOf("iPad")>=0||Ce.indexOf("iPhone")>=0)&&!!navigator.maxTouchPoints&&navigator.maxTouchPoints>0,ft=Ce.indexOf("Linux")>=0,Vi=!0,Vr=navigator.language,Gr=Vr):typeof X=="object"?(Jt=X.platform==="win32",Jr=X.platform==="darwin",ft=X.platform==="linux",_m=ft&&!!X.env.SNAP&&!!X.env.SNAP_REVISION,Cm=Hi,Lm=!!X.env.CI||!!X.env.BUILD_ARTIFACTSTAGINGDIRECTORY,Vr=Hr,Gr=Hr,km=!0):console.error("Unable to resolve platform.");Gi={[1]:"Mac",[2]:"Linux",[3]:"Windows"};Ht=0;Jr?Ht=1:Jt?Ht=3:ft&&(Ht=2);Zd=Object.values(Gi),eh=Fm(Ht),zi=Jt,Ki=ft,th=Vi&&typeof Me.importScripts=="function",le=Ce,ke=Gr;(n=>{function t(){return ke}n.value=t;function e(){return ke.length===2?ke==="en":ke.length>=3?ke[0]==="e"&&ke[1]==="n"&&ke[2]==="-":!1}n.isDefaultVariant=e;function r(){return ke==="en"}n.isDefault=r})(Im||={});rh=(()=>{if(typeof Me.postMessage=="function"&&!Me.importScripts){let t=[];Me.addEventListener("message",r=>{if(r.data&&r.data.vscodeScheduleAsyncWork)for(let n=0,o=t.length;n<o;n++){let i=t[n];if(i.id===r.data.vscodeScheduleAsyncWork){t.splice(n,1),i.callback();return}}});let e=0;return r=>{let n=++e;t.push({id:n,callback:r}),Me.postMessage({vscodeScheduleAsyncWork:n},"*")}}return t=>setTimeout(t)})(),Dm=!!(le&&le.indexOf("Chrome")>=0),nh=!!(le&&le.indexOf("Firefox")>=0),oh=!!(!Dm&&le&&le.indexOf("Safari")>=0),ih=!!(le&&le.indexOf("Edg/")>=0),sh=!!(le&&le.indexOf("Android")>=0)});var Qi,Xi=d(()=>{Yi();Qi=zi?"windows":Ki?"inotify":"fs-events"});async function ge(t,e){for(let r of t)if(await e(r))return r}var dt=d(()=>{});import{basename as Om,extname as Zi,posix as Nm,win32 as $m}from"path";var Z,es,Ge=d(()=>{Z=t=>t.replaceAll($m.sep,Nm.sep),es=t=>Zi(Om(t,Zi(t)))});import{relative as Tm,resolve as ts}from"path";var Gt,rs,ns=d(()=>{Gt=B(W(),1);b();Ge();rs=async({indexFilePath:t="",withMessaging:e=!1,withMainWorldScript:r=!1},n)=>{m("Creating BGSW entry");let o=ts(n.commonPath.staticDirectory,"background"),i=ts(o,"index.ts"),s=Tm(o,t),a=[e&&'import "./messaging"',t&&import "${Z(s).slice(0,-3)}",r&&'import "./main-world-scripts"'].filter(Boolean).join(`

SyntaxError: missing ) after argument list
at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18)
`

Feedback for “Quickstart with Supabase”

https:itero.plasmo.com/tools/generate-keypairs
There is no input at all

Feedback for “Messaging API”

'plasmo' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
Waiting for the debugger to disconnect...

@plasmohq/messaging No compatible callbacks

In Chrome kernel 96 and older versions, chrome. runtime. sendMessage () does not generate a Promise,

Initialize from Existing Manifest

PlasmoHQ/plasmo#147

The expected type comes from property 'name' which is declared here on type 'Request<never, { id: number; }>

How to solve this type error?

Cannot update extension in Chrome

Hi, I found that the extensions, which are uploaded onto TestBed, cannot be update in Chrome today. They works well before and I just want to report the bug.

Fyi, the extensions on TestBed still can be published to Chrome Web Store by Itero and works fine.

So when I uploaded the new version of the extension onto TestBed, the displaying version on Itero Dashboard has been upgraded, but when I click on Update in the extension page, the extension did not update. I have tried to remove the extension and re-install it by the Install Page, but the one installed is still the previous version.

I think Plasmo is a really brilliant framework, thank you for the work!!

Feedback for “Content Scripts”

Hello! First, thank you for making and maintaining this, it's made chrome extension development really easy and it's so amazing that everything 'just works'

When overriding the manifest in package.json, the development server outputs a message saying that you might need to restart the server. I think it'd be helpful if there was a similar message when you update a PlasmoCSConfig within a content script. Or it could also be noted in the docs. Just a suggestion that would've saved me some time had I have known. Thanks!🙂

Messaging docs do not make it clear that messages from a popup to a content script shouldn't use the messaging API

I was very confused how to send messages from a popup to a content script. I tried to use sendToContentScript + PlasmoMessaging but it was never called. Eventually I found this discussion and used chrome.runtime.onMessage.addListener in the CS and that works, but the docs don't make it clear that this is the right path.

Here are some related issues:
PlasmoHQ/plasmo#486
PlasmoHQ/plasmo#512

Need chrome.notifications.create Example

chrome.notifications.create doesn't seem to be working.
can't tell if I'm doing something wrong or if there's an official bug.

Would be great If there was an example and documentation on chrome.notifications.create

Feedback for “Messaging API” relayMessage does not work

I'm facing an issue while trying to invoke the relayMessage function from a webpage. Regardless of the methods I have tried, I'm unable to successfully call the function. I would appreciate some assistance in resolving this problem.

Steps to Reproduce:

In my web project, I have included the necessary dependencies and initialized the required configurations as per the documentation.
I have written the code to call relayMessage at an appropriate location in the webpage, as shown below:

import type { PlasmoCSConfig } from "plasmo"

import { relayMessage} from "@plasmohq/messaging"

export const config: PlasmoCSConfig = {
    matches: [
        "*://*.localhost/*",
    ]
}

relayMessage({
    name: "node"
})

And on our website page:

import { sendToBackgroundViaRelay } from "@plasmohq/messaging"
async function test() {
    const resp = await sendToBackgroundViaRelay({
        name: "node",
        body: {
            id: 12345,
        }
    })
    console.log(resp)
}
test();

Expected Result:

I expect that after invoking the relayMessage function, the message should be sent successfully and trigger the corresponding logic.

Actual Result:

However, despite my attempts, the function fails to be called successfully. I have checked the console for any error messages, but I haven't come across any helpful hints.

Troubleshooting Steps Taken:

I have ensured that all the required dependencies and configurations are correctly loaded before invoking relayMessage.
I tried adding some debug logs before calling relayMessage to check for any errors or exceptions, but I still couldn't identify the root cause of the issue.
Possible Causes and Solutions:

Thank you!