Document is not defined on chrome mv3 in a background.ts file

Hello, I have created a context menu that copies something to your clipboard. This is the function I'm using:

function copyToClipboard(text: string) {
  const el = document.createElement("textarea")
  el.value = text
  document.body.appendChild(el)
  el.select()
  document.execCommand("copy")
  document.body.removeChild(el)
}

function copyToClipboard(text: string) {
  const el = document.createElement("textarea")
  el.value = text
  document.body.appendChild(el)
  el.select()
  document.execCommand("copy")
  document.body.removeChild(el)
}

This works fine with firefox but not on chrome. So, is there a better way to add a string to the users clipboard via a context menu listener event that works with chrome mv3?

43 Replies

lab•2y ago

with chrome mv3, you will want to send some event to a content script on that page or spawning an offscreen document. BGSW does not have access to document

jonahOP•2y ago

Ah that makes sense, do you have an example of spawning an offscreen document by any chance?

Arcane•2y ago

@j0ner has reached level 2. GG!

lab•2y ago

There's an issue on github with some workaround: https://github.com/PlasmoHQ/plasmo/issues/527

GitHub

[RFC] Support for Offscreen Documents · Issue #527 · PlasmoHQ/plasmo

How do you envision this feature/change to look/work like? The Offscreen API has been added since Chrome 109 version. This solves a problem with the service worker which can't access the DOM or...

lab•2y ago

Tho note that the offscreen docs is not the target webpage itself

jonahOP•2y ago

i see, thank you for the help mv3 was a mistake 😭

lab•2y ago

lol it might but it's also pretty powerful once you get a hang of it it's like going from single threaded programming to multi-threaded

jonahOP•2y ago

isnt there a bunch of stuff not supported yet via mv3 and bugs

lab•2y ago

the concept of mutex/arc doesn't exist in syncronous programming not supported in the way it worked in mv2 yeah it's the same as sync code cannot run in async runtime xD...

jonahOP•2y ago

true i guess the roll-out was just a total mess on chrome

lab•2y ago

it's just incompatible in its nature, so you will have to figure out alternative yeah that's... their issue xD

jonahOP•2y ago

thank god firefox hasnt switched yet

lab•2y ago

idk I wish firefox would just participate and improve the specs

jonahOP•2y ago

have they not been trying to add mv3 to firefox?

lab•2y ago

the background page is easy to work with but architecture-wise, it's a vector for malicious process not really, in ff there's no BGSW, it's still background page

jonahOP•2y ago

its very hard to strike the perfect balance of security and flexibility

lab•2y ago

yeah and neither of them (chrome and ff) did it well imo

jonahOP•2y ago

the true solution is to nuke the internet and start over again

lab•2y ago

hahah maybe ;d

jonahOP•2y ago

we should have killed javascript when typeof NaN was number

lab•2y ago

lol I think each of these browser are generally just serving 1 overlord atm... which is google search most of FF revenue comes from that xd..

jonahOP•2y ago

yeah and google search sucks rn

lab•2y ago

if not chrome/FF, we're looking at Edge and Safari the other browsers are just Chromium fork

jonahOP•2y ago

yep and firefox is funded by google lol

lab•2y ago

I don't think JS was a mistake, it works well for what its worth imo xD I imagine had python was the scripting language everyone adopted, we would have the exact same discussion about python, but instead of NaN, it's something obscure about Python

jonahOP•2y ago

i think js could be good if we got rid of all the bad backwards compatible changes it still has and had types built in but that would never happen because everything would break

lab•2y ago

yeah that part IDK why they hold on to TBH If it was me, I would just nuke and deprecate those shit

jonahOP•2y ago

that would end up nuking huge parts of the internet

lab•2y ago

yeah but they can just... suck it and hire web dev to fix/upgrade their site

jonahOP•2y ago

i wish

Arcane•2y ago

@j0ner has reached level 3. GG!

lab•2y ago

we're just deferring that inevitability xD... but I guess that's also why extension is powerful BTW, what extension are you working on atm?

jonahOP•2y ago

https://github.com/jonerrr/mailcow-alias-extension this

GitHub

GitHub - jonerrr/mailcow-alias-extension: A Chrome and Firefox exte...

A Chrome and Firefox extension for generating Mailcow aliases - GitHub - jonerrr/mailcow-alias-extension: A Chrome and Firefox extension for generating Mailcow aliases

lab•2y ago

I think one of the main reason for this was bc of the web consortium and all the working group (i.e,, gate keepers), who keeps the web standard body and try to have backward compat but... IDK I feel like a lot of stuff should be forcefully removed xD

jonahOP•2y ago

yeah

lab•2y ago

ooh very nice what's the diff between mailcow vs using a +something?

jonahOP•2y ago

mailcow is a selfhosted mail suite with like everything you need for a mail server easily and it has an api (which is not that good but it exists) ive also been working on an OCR translation extension. i spent way too long reverse engineering how the google lens api works because they have the best ocr and translation

lab•2y ago

how are you doing that? Is there like a binary?

jonahOP•2y ago

basically im scanning on web page for image elements, uploading the image to google, and usign their api to get back the points and text to overlay over the image its very janky because i need to refetch the image to scan it 😅 another quick question, Im trying to upload the built firefox-mv2 zip to the firefox store but im getting file is too large to parse errors. is there an easy way to lower the file size?

lab•2y ago

Are you including any binary files within your bundle?

jonahOP•2y ago

its complaning about the options and popup js files let me see maybe i can reduce the size

lab•2y ago

also try upgrade plasmo to latest, older version had an issue with stripping out unused bundle but even then, the issue you're seeing is due to either assets import (via data-base64 scheme), OR using an icon library that doesn't have proper export scheme

jonahOP•2y ago

hm its probably my icon lib (tabler icons react) or some other dumb node module ill figure it out eventually

Gaming

Programming

Document is not defined on chrome mv3 in a background.ts file