Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unfortunate: the the un4chan userscript toolkit #12

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Conversation

qqueue
Copy link
Owner

@qqueue qqueue commented Dec 16, 2014

i.e., the non-ui parts of c4, so others can userscript without being tied to either 4chan's UI choices or c4's UI choices (as much as possible, anyway). unf for short.

I aiming for this library to be usable with polymer, so one could make a Material Design(tm) userscript on top. So far so good, though polymer itself might take some convincing to work within greasemonkey though (haven't tried it yet).

Still TODO is extracting the fancy new SharedWorker-based updater into something usable. I basically want to have an API like:

unf.data.subscribe board, tno, (thread) ->
  ui.rerender-with-new-data thread

which should plug in to most MVWhatever libraries (polymer, react, mithril, etc) nicely. Then, just wrap this up in a separate buildscript/repository, add npm + publishing for greasemonkey @require, and it's ready for use, albeit probably buggy (like c4).

There are some other parts of c4 that might be worth extracting as well, such as the relative dates, lightbox/tooltips, the youtube api queue, and the posting logic. Once that's extracted, c4 is a pretty tiny codebase: some html templates, styles, and a bundle of hideous dom-mangling.

@saxamaphone69 , 4u.

lots more ugliness both within c4 and
the interface I just invented. It'll get better soon though

op = new DOMPost do
thread-no
el.querySelector( \.op )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the spacing? 10 lines below you don't space it like that anymore

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

legacy whitespace. I'm pretty sure the DOM parser is the oldest still-active piece of code in c4/html5chan.

I'll clean it up soon(tm)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vendethiel
Copy link
Contributor

as I said - why not move your helpers-thingies into some npm module as well, and require it both from unfortunate and from the other one?

@saxamaphone69
Copy link

mfw i still have no idea what this means, but am excited nonetheless

@vendethiel
Copy link
Contributor

You can expect great things in @qqueue... You just need to wait a bit : d

Couldn't think of a nice api, so I just wrapped the current
api up in new naming conventions. Good enough for testing, I think.
@qqueue
Copy link
Owner Author

qqueue commented Dec 17, 2014

why not move your helpers-thingies into some npm module as well

I might, but after looking through the code several times, the helpers really aren't that much helpful, and they make the source ever-so-slightly-harder to read without familiarizing yourself with my idiosyncratic set of symbol-named functions. I might extract timing.co, but the other helper/utils seem pretty useless outside of the "hideous dom mangling" done in inlinereplies.co.

@qqueue
Copy link
Owner Author

qqueue commented Dec 17, 2014

After much wrangling, I managed to get a <paper-button> from Polymer working within greasemonkey. I used [vulcanize][0] to get rid of the imports, then manually concatted the rest of the javascript into this:

https://gist.github.com/qqueue/0489a75a10caba0746f4

The userscript block (my code) starts at 18397 . Since it's running at document-start like c4 does, I just replaced the existing document.body and style with the output from vulcanize.

It didn't quite work at first, but after liberal application of console.log, I figured out that the weirdness around Greasemonkey's window and this context confuse some parts of the polymer library code that somehow define window.Polymer as function and var Polymer/this.Polymer as an object, presumably for legacy reasons. Changing window.Polymer to this.Polymer made everything (so far) work fine.

This means that my grand plan for polymer+unfortunate is likely feasible. I'll still need to to dig in to vulcanize and figure out how to output it in a userscript-friendly (styles as text, scripts inline) format, but fixing it to work with greasemonkey was at least a little easier than expected.

@saxamaphone69
Copy link

Interesting you got it working, the Polymer website doesn't even load correctly for me.

browser-2014-12-18

And that's on Nightly. Maybe it's finally time to start using Chrome (isn't it easier to create "apps" too using it)?

@vendethiel
Copy link
Contributor

Fuck chrome.

@saxamaphone69
Copy link

oh ok sorry 😞

@qqueue
Copy link
Owner Author

qqueue commented Dec 18, 2014

I'm getting the same breakage on polymer's site, though only if I have dom.webcomponents.enabled set to true in about:config. Do you have that turned on @saxamaphone69 ?

Re: chrome extensions, I've always planned to make c4 work in chrome eventally (I did have it working in tampermonkey at one point), but since my userbase has always been just me, I don't have a lot of incentive. One thing i do have incentive for is moving out of greasemonkey and into the jetpack addon API (i.e., firefox extension), which seems to have a lot better debug tooling than greasemonkey. I could also then intercept 4chan page loads in a less hacky manner, and make my SharedWorker use an actual file instead of a data URI. https://github.com/mozilla/jpm is probably worth a try.

One other spec I've been keeping track of lately is ServiceWorkers, which allows you to intercept requests for a given domain and mangle the responses however you want, all from a separate javascript worker thread. If you think about it, that's pretty much what I've turned greasemonkey into with the DOM replacement trick--given a URL and the original response, output whatever you want with the old content as input. While it's not built for site augmentation like greasemonkey/addon api is, it does have some interesting parallels.

@saxamaphone69
Copy link

Flipped the pref and the site now works. I must have set it when it first got announced for Firefox and never bothered reading up on it or something.

I only mention Chrome because as far as I know, you can actually debug and test a lot of things within Chrome's console and stuff. But, I'm not an expert. A solo Firefox add-on might be cool, as I would assume doing so would also allow you greater control and such. The only reason I mention Chrome is because from memory, you don't need to worry about fancy stuff, and you can pretty much create one with straight HTML/CSS/JS? I don't know. You guys are the expert, I just like sitting and watching, as I've said before. 🍔

@vendethiel
Copy link
Contributor

@qqueue Please note that there's a 5$ fee to upload extensions to the store, and that "vanilla chrome" can't install non-store extensions (even in dev. mode). You need chromium or chrome canary to dev extensions. Yes, this is awful.

annoying, they must've changed the way that works.
@vendethiel
Copy link
Contributor

Just noticed the PR title has "the" twice in it.

breaking my ancient crufty shit. The ordering
no longer works, oh well.
if you just wait 3 years, TODOs just get implemented, yo
@vendethiel
Copy link
Contributor

👍

Since I now browse that sad board.

Holy shit is livescript sugary, I can see why I liked it.
People are always posting fuck huge images in /tg/ for
some reason, like 6 MB phone pics. annoying.
They finally did it. They broke my 2-year-old shit script.
xhr no longer takes relative "//" urls anymore i guess,
so https everywhere. I'm kind of surprised my sharedworker
shit still works. I remember how terrible it all seemed when
I wrote it. It probably still sux. javascript life.
@vendethiel
Copy link
Contributor

i thought something was actually happening x(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants