search

jhen0409 / react-chrome-extension-boilerplate

Boilerplate for Chrome Extension React.js project
MIT License
2.14k stars 388 forks source link

why using an iframe when in "inject" mode? #95

Open zivl opened 6 years ago

zivl commented 6 years ago

When I'm using inject mode I see there's a iframe that is responsible for loading the bundle.js file. Why can't I import the <Root /> (or something similar...) and use it inside <Dock> component?

It adds a lot of headaches to use iframe for modules I have locally... all communication between the tabs and iframe need to go through postMessage and etc.

Cheers,

yjiq150 commented 6 years ago

Check this out. You can run React component without iframe. https://github.com/yjiq150/react-chrome-extension-boilerplate

I just made a PR for the same problem today here. https://github.com/jhen0409/react-chrome-extension-boilerplate/pull/98

zivl commented 6 years ago

@yjiq150 can you explain here in a few words why/how did you walk-around it? why upgrading webpack solved this issue?

yjiq150 commented 6 years ago

Actually it not related to webpack version. I bumped up the version while fixing inject problem.

To inject react component into the context of page, please refer here. I added some notes in there.

https://github.com/yjiq150/react-chrome-extension-boilerplate/blob/master/chrome/extension/content.js