webextensions/live-css-editor

CSS for http version of site doesn't apply to https version

yossizahn opened this issue · 3 comments

yossizahn commented

I had some custom CSS for an http site which recently upgraded to https.
I noticed that the saved settings dissapeared. And there was no simple way to retreive my saved CSS since it would only be availablle on the http version wich was not anymore available & being automatically redirected to https.
I solved it by fetching the saved settings using the JS console while inspecting the extension:

chrome.storage.sync.get('(http://example.com) live-css-last-applied-css', (code) => console.log(code['(http://example.com) live-css-last-applied-css']))

And then copying the CSS over to the https version.

webextensions commented

@yossizahn

Thank you for the report.

We intend to bring an easy to use export/import functionality (which was briefly mentioned in #29) pretty soon.

Till then, this workaround would help other users who might face similar situation.

Supporting the same CSS to work for "http" / "https" / "subdomains" is not targeted as of now (and probably in future as well) to respect the concept of CORS. Though a decent workaround might be provided by detecting when the data exists in other related origins by showing appropriate UI to let the user enable some sort of automatically-copy-and-sync option for the data between those origins.

  • 👍1
webextensions commented

On further thoughts specific to providing UI/UX for this issue as mentioned in the last comment, probably it wouldn't be as useful at the current stage of this extension.

We wish to implement the export/import functionality in near future. And even though it would be a workaround for the described problem, but it would probably be a simple and intuitive one while also serving other purposes.

Marking this issue as Closed in favor of export/import functionality.

A note has been added at: https://github.com/webextensions/live-css-editor/blob/d303b65b5a50931218fb54e5394e0e487af9e941/TODO.md

webextensions commented

For future reference, an alternative solution without JS (it should work fine for http:// URLs):

  • Edit the hosts file to enable custom mapping of domain name to IP address. Learn more about hosts file at: https://kb.leaseweb.com/products/hosting/web-hosting/adding-a-website-to-hosts-file-and-testing-it
  • In the hosts file, make an entry like 192.168.0.1 www.example.com / 127.0.0.1 website.com (replace the IP address with any valid IP having HTTP server and replace domain name with the one for which you want to recover the Magic CSS data)
  • In your browser, go to URL like http://www.example.com/
  • Load Magic CSS and you should be able to access your old data for the given site.

Remember to remove your changes done in the hosts file.