Diff code for diff directories of the URL

[hcmcfarlane]

Thanks for the ext. Working great so far. I'm wondering how I can apply a different code for a subdirectory in a URL?

For example, I would like to apply some css to mydomain.com, but different code to mydomain.com/subpage. Ideally the css for the subdirectory would not just be added to the high-level domain css, but be the only one loaded, although a solution that only added it would be usable for what I'm trying to do.

First instinct was to use mydomain.com%5Csubpage.css (using the hex character because ofc you can't add a backslash to a filename), but that didn't seem to work.

Thanks! Hannah

[luciopaiva]

Hi Hannah,

That's a very interesting use case. For JavaScript, it's easy checking if you're in subpage before executing some specific logic, but that's not possible with CSS, so I totally get it.

I will think of some way to add that functionality to Witchcraft. One possibility would be to look for a directory named mydomain.com and check if it has a subpage.css file. Witchcraft currently doesn't look into directories, but I think that can be done with little effort.

I'll let you know when I have something.

[luciopaiva]

Hey Hannah,

Good news, I got it working. I have just submitted version 2.5.0 to the Chrome store, but it may take a while until they review it.

You can get a zip file and load it manually if you want to give it a try. The zip file is here: https://github.com/luciopaiva/witchcraft/releases/tag/v2.5.0

This blog post has detailed instructions on how to load extensions manually, in case you need help with that: https://webkul.com/blog/how-to-install-the-unpacked-extension-in-chrome/

Also check the section "Path segments" here to understand how the new feature works.

Hope that helps!

[hcmcfarlane]

Hey Lucio! Great! Thanks so much! Does this also work for pages that end in .html, .aspx etc? (didn't seem to for me, but maybe I did something wrong)

[luciopaiva]

Yes, it's supposed to work no matter the extension (or lack thereof).

Check if you are:

• using the most recent version (v2.5.0)
• missing a www in the host name (Chrome hides www, so it may be there and you can't see it)
• got the correct path to the page. For example, if the page is www.foo.com/bar/index.html, the script needs to be called index.html.css and be under the folder www.foo.com/bar.

[hcmcfarlane]

Hi Lucio, (and sorry for slightly delayed reply). Thank you, I've now got it working great. I didn't have the folders nested correctly, but all sorted now!

If you're interested, I work daily with a web app that has utterly terrible design. I wrote some user-friendly upgrades and have been inserting my style sheets every time I load up the app. That's obviously a bit of a pain, and one sheet isn't really able to cover every possible pathway (of course the underlying code for the website is also terribly designed making it super difficult to target individual elements). Now I can style and re-style elements depending on where I am in the app, without having to manually inject a different stylesheet all the time :)

Witchcraft and your efforts mean that using this shitty interface has gone from an utterly horrific nightmare to a much more manageable annoyance. So thanks very very very much.

[luciopaiva]

Glad to know that it helped to make your work less painful :-) That's an excellent use case for Witchcraft indeed. Thanks for sharing!