VasilyShelkov/create-react-extension

How to use with newtab.html?

bigandy opened this issue · 9 comments

bigandy commented

My use case is a new tab. In public/manifest.json I want to be able to add public/newtab.html so that:

"chrome_url_overrides": {
    "newtab": "newtab.html"
},

and it to magically reload every time I make a change to src/App.js. It works if I change manifest.json to

"chrome_url_overrides": {
    "newtab": "popup.html"
},

but I'd like the ability to have more than one file being watched/served, or to customise the one that is being watched/served.

Thanks

zoffyzhang commented

I tried to add a options.html, and I figured it out. here's what I've done:

  1. yarn eject
  2. delete require('./utils/copyPublicFolder') in start.js and build.js
  3. add copy-webpack-plugin to webpack.config.js
  4. create options.html in public folder and create options.js in src folder
  5. modify paths.js and webpack.config.js to resolve the new files
VasilyShelkov commented

Hi, sorry I haven't been very active... If anyone is interested in adding an MR, please feel free.. I have been intending to add support to develop both an options page, new tab and developer tools bundle.

I will get look to add this feature in the coming couple of weeks so that people don't need to eject.

frenetix commented

Hey @VasilyShelkov , any chance you'll include Options support this in the near future?
I've tried @zoffyzhang's approach with no luck (I probably took the wrong turn at some point)... I'll retry, but thought I'd ask before :)
Thanks!

VasilyShelkov commented

Hi @frenetix, thanks for asking. I haven't been very active on this project recently. I will like to add support for this soon but don't want to promise anything this week because I've just moved house. I will give another update by Friday 4th of September as this is a feature I think would widen how many people use this project (and therefore useful for others).

Still if anyone would like to add a PR, they are very welcome as well. I appreciate it might not be the most obvious thing to do without digging a bit deeper into the project and understanding how CRA works

  • 👍2
VasilyShelkov commented

The latest release of create-react-extension now supports the options.html page.

For those wanting to update to support the new options page, just update react-browser-extension-scripts to version 4.0.10 and add the following files:

This version might looks strange, I intend to follow the versions of react-scripts and add 0-9 for any specific create-react-extension features that are released

  • 🎉2
VasilyShelkov commented

If there's another feature that I'm missing that there's a want to be added, then open a new issue. I'll close this issue for now in favour of having released support for adding an options page built using React

Mattesackboy commented

Any way to change the options/popup page src folder? Let's say I'd like to have my options page under src/Settings/Settings.js

VasilyShelkov commented

@Mattesackboy unfortunately that is the one opinionated convention that this project requires to work with zero configuration.

You can work around it though:

  1. The "cleanest" way of doing it would be to npm run eject similar to the original create-react-app eject command and then change the path to your entry point to your desired entry file/folder. This does lose the benefit of easily maintaining the dependencies and updates with this project (same as Create React App).
  2. Recommended: My suggestion if it's really a problem for you is just build your app in another folder and just import it from the entry point. I appreciate this may be a little annoying, however, in the grand scheme of things allows you to keep getting updates without much hassle via this project.
Mattesackboy commented

Ok, thanks! I'll try what you've suggested :)