Need to inject script onto third-party website-- best tool?
-
I'm an old geezer who used to do this using bookmarklets, but that option's been closed in every browser, it looks like.
I know there's some browser add-ins that can do this. Do you guys have a recommendation of one that:
- Isn't a wide-awake nightmare to use
- Works on at least Chrome and Firefox (if it works on Edge also that's a bonus)
- Lets me load JS from local filesystem files (not sure if possible?)
The other alternative is Fiddler hackery, but that's annoying and difficult to set up.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
used to do this using bookmarklets, but that option's been closed in every browser, it looks like.
Huh? I have bookmarklets on Chrome that still work fine. Never tried it with any other browser though, as I only use Chrome.
-
@polygeekery I read an article probably 2 years ago now saying they were going to disable it in Chrome and Firefox (because people were using bookmarklets to steal Facebook credentials)... maybe that never happened?
-
@blakeyrat For Chrome, I use Tampermonkey, which gets the job done.
googles
And it's available for Firefox too.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
@polygeekery I read an article probably 2 years ago now saying they were going to disable it in Chrome and Firefox (because people were using bookmarklets to steal Facebook credentials)... maybe that never happened?
I just checked, my bookmarklets still work in Chrome, so maybe that is your answer?
-
My GWT code server bookmarklets work. That being said, you have to explicitly allow specific hosts to compile.
-
Quick and dirty test shows bookmarklets work, but are no longer allowed to load JavaScript from
file://urls. (Chrome explicitly prints an error in the console. Firefox silently fails.)Does Tampermonkey allow that? Or is it a fundamental restriction of modern browsers and I'm going to have to make sure my JS is all on a HTTP server before doing anything?
-
@blakeyrat Tampermonkey expects you to paste/write your code in the plugin and let it keep track of it. I don't know that it can't read it from a file, but I don't know that it can either.
-
@blakeyrat Have you tried loading from the filesystem if you've imported the file into your workspace in the Chrome dev tools? No idea if that helps but it might be worth a shot.
-
@yamikuronue said in Need to inject script onto third-party website-- best tool?:
Tampermonkey expects you to paste/write your code in the plugin and let it keep track of it.
Call me crazy, but I want to do my JS development in an IDE instead of a browser plugin.
@jazzyjosh said in Need to inject script onto third-party website-- best tool?:
Have you tried loading from the filesystem if you've imported the file into your workspace in the Chrome dev tools?
No, because I don't know what that sentence means in multiple ways. (Chrome dev tools have "workspaces"? "Workspaces" can have files imported? This is all new to me. Also the word "workspace" doesn't appear anywhere in its UI, as far as I can find. So.)
What I'm looking for here is super-fast iteration. I'm developing a JS script to be integrated into an existing product, and since this is just a proof of concept I figured it'd be easier to demonstrate the functionality using something like a bookmarklet instead of having to work with this team for months to get their permission to add the JS to their product, when it's only a proof of concept anyway.
Point is: ideally I change the script in my IDE, from there I don't have to do any more than hit F5 on the site and click a bookmarklet button. That's the kind of solution I'm looking for.
God I'm rusty on this shit.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
Call me crazy, but I want to do my JS development in an IDE instead of a browser plugin.
Yeah, it tries to give you an IDE experience but obviously what you're used to is going to be easier for you:
But you probably want the Workspaces stuff in Chrome. It lets you say, this file on my disk is being served up as this asset on the website, so when you make live edits inside Chrome's devtools, it saves it to the disk for you as well as changing the dom you're seeing in the browser.
-
@yamikuronue There is literally no button or menu item in the Chrome dev tools named "workspaces". I have no idea what you guys are talking about.
-
-
Tampermonkey exists for Edge as well, just an fyi.
-
@yamikuronue I see Google's famous UI development skills strike again. (For the record, the feature's UI only exists as a contextual menu in a pane where you'd never think to even try opening a contextual menu.)
Problem is, it doesn't seem to do what I need. I don't want it to persist changes by duplicating the app on my local drive, I want Chrome to serve up a file on my local drive as if it were on a HTTP server. Not sure this is going to help me.
Time to download TamperMonkey and see if it works with local files.
EDIT: from its features page:
Tampermonkey's editor is nice, but you do have your own, that is faster, better, ... The solution is to enable the file access and then you can @require the local copy of your script.
I just need to enable "the" file access.
Ugh. This guy can't type and I'm trusting him to write development tools for me. Seriously.
-
Were you asking yourself, "hey what bug is Blakeyrat going to find instantly because all software is useless garbage?"
Well here you go.
First I thought it was completely busted. (Clicking "Create a new script..." doesn't do anything at all when clicked.)
Then when getting ready to screenshot, I found the real problem: there's zero agreement between where my mouse pointer is and where Tampermonkey thinks it is. I don't have any screenshot software handy that'll record the mouse pointer, so I dressed one up:
The red dot is where my mouse pointer is located. The green rectangle is where Tampermonkey THINKS it's located. Awesome.
Bonus WTF: when trying to upload this image, I dragged it to the bottom of the NodeBB text window, and it appeared halfway through the word "software". Maybe NodeBB's a little confused on this whole "mouse pointer?" thing also.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
The red dot is where my mouse pointer is located. The green rectangle is where Tampermonkey THINKS it's located. Awesome.
Out of curiosity, non-100% monitor? (because who uses hi-dpi monitors anyways! ... thinks about it - hmm, all except one of my Windows systems now...)
-
Oh it's "worse" than that. The main monitor's at something like 175% (it's a 14" netbook with a super high res display, it's literally unreadable at anything less than 150%) and that Chrome tab was open on an external monitor at a flat 100%.
And yet, it's a fucking Chrome extension, shouldn't Chrome hide that shit from its own addins and shit? Like, why isn't the ACTUAL application here taking care of it?
But yes you're right: some piece of code in Chrome or in the addin is checking the zoom of my primary monitor and blithely assuming all other monitors have the same zoom, because all software developers are retarded idiots who produce buggy shit all the time.
-
@blakeyrat
I would not be surprised if the root cause was actually in the underlying Windows API for determining what DPI you're running on... Hyper-V Manager, IE, Edge, all have similar problems if your monitors are not the same zoom rate.
-
@izzion said in Need to inject script onto third-party website-- best tool?:
Hyper-V Manager, IE, Edge, all have similar problems if your monitors are not the same zoom rate.
This is why I only enable hidpi support in my software. Doing per-monitor is hard. I'm willing to accept it will be blurry on one monitor. (at least until I truly get time to deal with it - and wxWidgets actually supports it)
And I've been known to run
mtto get an app's manifest and change it to "no, you really don't know what the fuck you're talking about". (it does mean enablingHKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\SideBySide\PreferExternalManifest(dword))
-
@izzion Blah blah blah, just tell me how many decades I'm going to need to deal with this broken bullshit so I know how to dose my Soma.
-
I know back in the day greasemonkey could install user scripts from arbitrary web sites, but I don't know if tampermonkey still does this or how easily you can update to a new version. Likely adds way too many clicks to the refresh flow.
-
@dcon said in Need to inject script onto third-party website-- best tool?:
Doing per-monitor is hard
But it shouldn't be. It's 2017: multi-monitor setups and high DPIs are increasingly common. HDPI multimon support should be a lot better than it is.
-
@izzion said in Need to inject script onto third-party website-- best tool?:
I would not be surprised if the root cause
I think the root cause is "Math is hard".
-
In any cases, these instructions:
https://forum.tampermonkey.net/viewtopic.php?p=1832#p1832
appear to work.
The only quibble is I don't like the script running 100% of the time on the site, but I can deal with that by just toggling Tampermonkey on and off as needed.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
I'm an old geezer who used to do this using bookmarklets, but that option's been closed in every browser, it looks like.
every browser I've got still works fine.
javascript:alert('code here');
you have to manually add the bookmark. it wouldn't let you load js from local files (unless you run a local apache to load from http://localhost/
and i figured i'd be late to that answer.
Some IDEs run a webserver for you on localhost though, so you could spin those up, start the webserver to host your file and then use the localhost:20323 whatever URL to load the files in chrome.
-
@blakeyrat This works fine in Edge. We've now narrowed-down the culprit to Chrome.
EDIT: but Edge does not have the option to allow extensions to access the filesystem.
EDIT EDIT: nor does Firefox. I think I'm just going to have to set up a localhost web server and use that solution.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
@yamikuronue I see Google's famous UI development skills strike again. (For the record, the feature's UI only exists as a contextual menu in a pane where you'd never think to even try opening a contextual menu.)
Problem is, it doesn't seem to do what I need. I don't want it to persist changes by duplicating the app on my local drive, I want Chrome to serve up a file on my local drive as if it were on a HTTP server. Not sure this is going to help me.
Time to download TamperMonkey and see if it works with local files.
EDIT: from its features page:
Tampermonkey's editor is nice, but you do have your own, that is faster, better, ... The solution is to enable the file access and then you can @require the local copy of your script.
I just need to enable "the" file access.
Ugh. This guy can't type and I'm trusting him to write development tools for me. Seriously.
Articles are hard, okay? They don't even exist in many languages. I don't make fun of people who can't wrap their heads around cases.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
EDIT EDIT: nor does Firefox. I think I'm just going to have to set up a localhost web server and use that solution.
yay me.
-
@gąska said in Need to inject script onto third-party website-- best tool?:
Articles are hard, okay? They don't even exist in many languages. I don't make fun of people who can't wrap their heads around cases.
If you don't have the attention to detail to ask a native speaker to read your text, why should I trust that you have the attention to detail to, for example, actually test your application with a non-100% zoom setting?
Turns out I shouldn't, and this guy didn't.
-
Next question: is it possible to get Chrome/Firefox/etc to 100% trust a self-signed certificate forever?
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
@gąska said in Need to inject script onto third-party website-- best tool?:
Articles are hard, okay? They don't even exist in many languages. I don't make fun of people who can't wrap their heads around cases.
If you don't have the attention to detail to ask a native speaker to read your text
Maybe the only native speakers he knows are people who write comments on Youtube? It's not his fault if he was born in Eastern European shithole. And the DPI bug might very well be in Chrome's extension API, not the extension itself.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
Next question: is it possible to get Chrome/Firefox/etc to 100% trust a self-signed certificate forever?
Have you tried adding it as root certificate in your operating system?
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
Next question: is it possible to get Chrome/Firefox/etc to 100% trust a self-signed certificate forever?
I'm having trouble finding reliable info for Chrome, as they seem to have changed some stuff recently that's confounding it. However, on this page there should be an item in the first white box saying "Manage certificates", and that may give you what you need.
This thread seems to have details on the recent change in certificate requirements that's causing problems.
-
@gąska said in Need to inject script onto third-party website-- best tool?:
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
Next question: is it possible to get Chrome/Firefox/etc to 100% trust a self-signed certificate forever?
Have you tried adding it as root certificate in your operating system?
IIRC, a while back something or another happened and the browsers stopped equal trust to system certificates.
Yeah, here we go.
-
Sorry I didn't update the thread, Chrome actually has an option in its secret settings screen to not check certs on localhost requests (or rather, to always trust them), that's what I ended up using. Not an ideal solution, but the 364 other Chrome methods have all been patched-out over the years.
chrome://flags/#allow-insecure-localhost
-
Just skimmed. But if you're on Firefox:
- Install Greasemonkey
- Create a script
- It will fart out a .txt file in your Profile directory
- Open that .txt file in the IDE of your choice, and do whatever you want
Done.
-
As for running a local server, maybe HFS would help? I've used it before and it works quite well. A lot simpler to set up as well.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
chrome://flags/#allow-insecure-localhost
That's nice to know actually... though I can't imagine any hack containing the words "allow-insecure" would fly at work :/
-
At this point I'd recommend setting up letsencrypt and skip the self-signed troubles that way, but that requires your server (in this case your laptop, I buttume) to have a publicly accessible FQDN, which might be more trouble than it's worth.
Fuck that requirement with a spiky off-blue dildo. Just gimme my cert! Anyway, you might want to have it generated somewhere else and then just copy the certs locally (the only problem being, you'll have to do that again every 3-ish months since autoupdate won't work with that workflow). Might be worth it if it's an ongoing thing I guess, but if it's a one-off it's probably more hassle than it's worth
-
@onyx I mean, I think everybody's overthinking-- just use OpenSSL to generate a self-signed certificate (req -new -x509) with the common name localhost and a three year or so validity period. It's not forever, but Chrome will start to warn you if everything else about the certificate is perfect but the validity period is "too long". (It's not wrong but it's a pain for development.)
-
@heterodox self-signed can be an almost insormountable pain at times though. Probably not a case here, but you can't really get them working for WebSockets for example. Oh, ok, you can, in FF, and only in FF, if you try to open the
wss://URI it will actually ask you to confirm a security exception. But that's FF only.Again, this is likely not a concern here, but I learned a long time ago that dealing with self-signed certs is more pain than getting a valid one working, even if it involves other kinds of pain.
-
@onyx said in Need to inject script onto third-party website-- best tool?:
@heterodox self-signed can be an almost insormountable pain at times though. Probably not a case here, but you can't really get them working for WebSockets for example. Oh, ok, you can, in FF, and only in FF, if you try to open the
wss://URI it will actually ask you to confirm a security exception. But that's FF only.That has nothing to do with it being self-signed. There's nothing special about self-signed certificates except they have a path length of 1. It has to do with either:
- The certificate not being in the browser's trust store (almost 100% of the time)
- The common name on the certificate being incorrect
- The key usage or extended key usage extensions being incorrect (uncommon)
- The current date not being within the validity period on the certificate
- The validity period on the certificate being too long
If you're not familiar with X.509 it can sometimes be tricky to get self-signed certificates right, but once you do, they're just like any other certificate. You're attesting that you trust this service running on localhost, so you won't be bothered.
-
@heterodox said in Need to inject script onto third-party website-- best tool?:
I mean, I think everybody's overthinking-- just use OpenSSL to generate a self-signed certificate (req -new -x509) with the common name localhost and a three year or so validity period.
Or I can just click one button in IIS instead of dealing with reg -clicrap -ex35438632 -sdae -megaxyYY4343
But the problem is all browsers HATE self-signed certs. Firefox lets you relatively easily add a permanent exemption for them, Chrome requires you (AFAICT) to turn off cert checking for Localhost altogether.
Chrome used to have a better way to do this, but it's been patched-out over the years of UI changes.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
@heterodox said in Need to inject script onto third-party website-- best tool?:
I mean, I think everybody's overthinking-- just use OpenSSL to generate a self-signed certificate (req -new -x509) with the common name localhost and a three year or so validity period.
Or I can just click one button in IIS instead of dealing with reg -clicrap -ex35438632 -sdae -megaxyYY4343
You can create a self-signed certificate through certmgr.msc which has a nice GUI for custom requests. You can then move the certificate right into the appropriate certificate store, too, which takes care of IE and Chrome. certmgr.msc just doesn't have any defaults for certificate fields, so you actually have to know more about what you're doing. There are no templates unless you're in a domain with an enrollment policy.
If you're clicking the button in IIS, IIS is getting a self-signed certificate, unless you're in a domain with an enrollment policy. Do you think it's performing magic there?
But the problem is all browsers HATE self-signed certs.
What I'm saying is that that is factually untrue. You generate the self-signed certificate, then add it to the trust store like any other CA. If that doesn't work for you (the browser "HATES" your certificate still), then something else is wrong with your certificate. It's easy to get certificates wrong (security is complex), but don't blame the browser is all I'm saying.
-
@heterodox said in Need to inject script onto third-party website-- best tool?:
What I'm saying is that that is factually untrue. You generate the self-signed certificate, then add it to the trust store like any other CA. If that doesn't work for you (the browser "HATES" your certificate still), then something else is wrong with your certificate. It's easy to get certificates wrong (security is complex), but don't blame the browser is all I'm saying.
I stand corrected in the specific case of Firefox. I just created a self-signed certificate in certmgr.msc and took notes (no command-line interface neded-- clicky, typey, clicky, clicky, done), exported it and converted it to PEM for Apache (that's the one command-line part I really can't figure out how to avoid), then started up Apache. https://localhost/ in IE?: Loaded perfectly, no warnings or insecure flag. https://localhost/ in Chrome?: Loaded perfectly, no warnings or insecure flag. Warning in Firefox which could be solved with a permanent exception, but that yields an "insecure" flag. I tried importing into the trust store to remove even the insecure flag, but turns out Firefox requires an exception for self-signed certificates even if the self-signed certificate is a valid CA in the trust store.
Fuck you, Firefox. There's a reason I stopped using you about five years ago. The fact that you still can't use Microsoft certificate stores is shameful and you're opinionated about PKIX in ways that go above and beyond the relevant standards.
-
@heterodox Ok well I'm too bone-head stupid to make that work, and what I do have working is sufficient.
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
what I do have working is sufficient.
Fair enough.
-
@heterodox said in Need to inject script onto third-party website-- best tool?:
I just created a self-signed certificate in certmgr.msc and took notes (no command-line interface neded-- clicky, typey, clicky, clicky, done),
Seriously, though, could you link to directions more specific than clicky typey?
If it reduces friction in IE, Edge and Chrome than it's still worthwhile. I made my cert in IIS' GUI which apparently does it differently?
-
@blakeyrat said in Need to inject script onto third-party website-- best tool?:
I made my cert in IIS' GUI which apparently does it differently?
It uses the same APIs. It creates the cert/key pair in the computer's My store, but doesn't put it in the Root store since normally a server's certificate would not need to be trusted on the server itself.
If you already have a working certificate, you can export it and then import it into the Root store. You can do this in Internet Explorer by clicking the lock icon, clicking View certificate, then clicking Install Certificate and selecting the Trusted Root Certification Authorities store when importing. If you want to generate a new self-signed certificate and trust it, you can do the below:
- Open mmc, add Certificates snap-in to manage certificates for Computer account, Local computer.
- Right-click Personal > Certificates and select All Tasks | Advanced Operations | Create Custom Request.
- Proceed without enrollment policy and with CNG key template, PKCS #10 request format.
- Expand Custom request and click Properties.
- On the Subject tab, add subject name of type Full DN and value CN=localhost.
- On the Private Key tab, expand Key options and change Key Size to 2048, check Make private key exportable.
- Expand Select hash algorithm and select Hash algorithm sha256.
- Click OK, save the request file (you can delete it afterward, you're not sending it to a CA)
- Refresh Certificate Enrollment Requests > Certificates and then drag the localhost certificate/key pair to Trusted Root Certification Authorities > Certificates.
At this point the certificate is trusted by IE and Chrome. Now how you get your Web server to use that certificate/key pair depends on your Web server.
