https://www.plasmo.com/ logo
Join Discord
Powered by
Using chrome.scripting.executeScript
# support-framework
q
Using chrome.scripting.executeScript
.
Hey @bumpy-balloon-39501set up this thread for us
Glad you're enjoying Plasmo!
So right now we only support the 
func
argument rather than 
files
b
I see. And with that I can't 
import
anything. It really has to be 'ol fashioned JS.
q
ah actually you can use typescript!
b
i see that in your example!
whoa
what magic is happening?
q
@bumpy-balloon-39501 has reached level 1. GG!
q
Haha it's a nice side effect of the bundler we're using under the hood, Parcel!
The only thing you have to keep in mind is to contain everything within your function
b
Interesting. I can try and hack around with that. I was trying to build the typescript func as a class with a static method and that seemed to be a no go
q
if you reference code that's outside of the function you're injecting, it won't know what it is
I actually haven't tried putting an import statement in there. Not sure what would happen
b
so my ts file that would be imported looks like
Copy code
export default class App {
  
  constructor() {

  }

  static present() {
    console.log("Present the app")
  }

  close() {
    console.log("Close It")
  }
}
but I could never get that to compile correctly and the browser didn't know what to do with it
What I am going for is a Pinterest style experience so when the extension is clicked an iFrame is injected into the Dom and the entire app runs remotely inside the iFrame.
Moving away from classes and static methods and to the example you shared I can get this working.
A tradeoff I'm willing to live with!
q
Got it. What I'd recommend is something like this:
Copy code
chrome.action.onClicked.addListener(function(tab) {
  chrome.scripting.executeScript({
    func: injectIframe
  });
});
all you need is the 
activeTab
permission
b
yup! I got that far.
q
@bumpy-balloon-39501 has reached level 2. GG!
q
The other thing some people in our community discovered is you can load external iframes in mv3
b
Really was just about getting the code inside 
injectIframe
right
Oh?
q
so you could totally host your entire app somewhere else
b
That's my idea, yes!
q
and then you don't have to go through chrome review any time you want to make a change
b
Is there another way people are going about loading external iFrames than what I'm currently doing?
q
This code might not work at all but the general idea
Copy code
const injectIframe = () => {
   const iframe = document.createElement("iframe")
   iframe.src = "mycoolwebsite.com"
   // maybe set height width idk
   document.body.appendChild(iframe)
}
you'll have to set the world variable in your 
executeScript
to 
MAIN
like in the example I linked before I believe. (If it's not necessary please lmk! I'm not an expert in this stuff yet!)
b
Cool! OK Yes that's the direction I was heading.
This is super helpful.
Thank you!
q
Np! Let us know if you have any other questions or feedback!
b
Just tested the whole thing end to end and it looks like you do not need 
MAIN
added iframe to the DOM no problem
Thanks again!
2 Views
PreviousNext
Powered by