Doesn't work with new FB layout. What now?

[Bisie]

I used to keep the old layout to keep this addon working. But now FB forces me to use the new layout. And I don't see a way to make fb-post-screenshot work again. Am I overlooking something?

[JZersche]

They're pushing the new layout which also breaks my own script as well.. unfortunately.
https://greasyfork.org/en/scripts/408525-fb-post-tools-statistics-debug

My skill level is not the same as the developer of this add-on. However, everything should still be possible. But from what I can tell, it should be possible to re-adapt the current script the developer has written, along with my own to get this working again. It's just a matter of selecting a different CSS Selector as a reference for where the screenshot should be taken, and switching that to the new layout among other adjustments.

Looking at his script, it basically seems to grab the post URL somehow, opens that post in a new window with a predefined width and height, and then makes use of a canvas element, followed by drawWindow() to draw a rectangle around the post, from which it then does something with post requests and converts the canvas element in to a dataURL, and pushes it to an array named image_data_urls which are generated somehow using postMessage()'s help, and then issues a browser runtime to save the data url.

I think if I can understand that I can probably re-create this extension with a little time. The original developer obviously understands the code better than I do, but it's definitely possible to update the extension for the new version of FB.

[JZersche]

If the developer decides to start to work on this, I have lines 36-53 replicated for the new selectors. I tried to stick to the original code as much as possible. But so far these will select all of the same elements as before. I'm currently trying to get this working myself and thought I would share my progress here. I was having trouble with getting the post.href. Facebook has made it so that the post.href is only visible after the timestamp area is hovered, it changes:
<div class="oajrlxb2 g5ia77u1 qu0x05…l0nx0 gpro0wi8 b1v8xokw" aria-label="5h" role="button" tabindex="0">
—>
<a class="oajrlxb2 g5ia77u1 qu0x05…l0nx0 gpro0wi8 b1v8xokw" aria-label="5h" href="https://www.facebook.com…71SfUg&__tn__=%2CO%2CP-R" role="link" tabindex="0">

I've tried dispatching a hover and mouseover event to that div, and the ones preceding it with bubbling to no avail. As it turns out, it was a react event named 'pointerover'. The code I've written below, I uses wOxxOm's setMutationHandler, to scan each <div class="oajrlxb2 g5ia77u1 qu0x05… node, and dispatch that event to them. If you have another method for obtaining the post URL's I would love to see it.

[hckr]

Thank you @JZersche for your input. As you can tell by now, it's not that easy to maintain this add-on, especially for free and after hours (I'm not complaining at all :D )

The problem with all selectors is that even when one class name changes, the whole thing will break and that's why I always tried to make the code as much generic as possible. Class names are generated (I guess) by some build process in their React toolchain. They also do A/B tests which means different users might get slightly different layout or class names / behaviour. That's why when I see document.querySelector('.oajrlxb2.g5ia77u1.qu0x051f.esr5mh6w.e9989ue4.r7d6kgcz.rq0escxv.nhd2j8a9.nc684nl6.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.jb3vyjys.rz4wbd8a.qt6c0cv9.a8nywdso.i1ao9s8h.esuyzwwr.f1sip0of.lzcic4wl.gmql0nx0.gpro0wi8.b1v8xokw') I sense problems. It's too specific.

I'll try to make it work with the new FB layout, but can't promise any deadlines.
Contributions and suggestions are welcome, of course.

[JZersche]

The problem with all selectors...
—

Pretty sure I could work around that. I'm just confused by the more complicated part of the code which I'm still working to understand. I don't know if the .class names will be the same for you or not. I have it working. Maybe you can look the code and make the adjustments that are necessary, or I can do it myself.

https://pastebin.com/Qf0gu6Wu

https://user-images.githubusercontent.com/24817874/91398577-5b760680-e80a-11ea-9505-5d762e0681cf.png
https://user-images.githubusercontent.com/24817874/91344803-7580fc00-e7ac-11ea-9a2f-fa0498795e7b.png

I don't understand, the confirmation secret portion of the code. Could you elaborate?

[hckr]

Great, thank you for your effort. It would be best if you forked this repo, made the changes and opened a pull request. Then we could talk about the changes and eventually merge it.

The code isn't the nicest, I know. I settled with communication with a popup for two reasons: 1) the tab with all the threads being expanded was becoming unresponsive either way, 2) it gives the possibility to screenshot multiple posts (there might also have been other reasons I can't remember now). This confirmation secret is used to make sure the message with a command was received by the other end (in this case a popup). The same content script is run in all tabs with a Facebook page, so to differentiate the case when the popup is opened, there is a message sent from the main window (tab) – the one in which the user clicked on the screenshot option – to the opened popup. This message is being sent over and over until it is confirmed the message was received by the other end and the process has started. It is a bit hacky, but I haven't come up with a way to know when the page is loaded in the popup, and before it is, the message via postMessage won't be received.

I hope I answered you at least a bit. If you have more questions, don't hesitate to ask.

[JZersche]

Ah, thanks for clarifying that. I thought it had something to do with that. I need to study the code more. I actually had my own version of this at one point, which I coded differently. You've taken a more technical approach.

The version I had didn't require a new window to be opened, but I had issues with the screenshots being centered, and I imagine that's how you dealt with it. It might be practical to make use of a script a guy named 'wOxxOm' wrote. It really makes things easier.

Your mutationObserver method is pretty similar to what using wOxxOm's library would do, I ended up using it since the mutation observer relies on added nodes, wOxxOms setMutationHandler does something special that I can't seems to understand, it seems quicker. I've had a lot of luck with it and I'm more comfortable using it. I don't think it's necessary to remove it because the mutationObserver by itself incorporates more flexibility. I just need a way to insert the buttons more smoothly.. I could only get the buttons to insert into the menu if the user clicked the ... twice. I could have probably used the way you're doing it, but for now I've started working on a script using wOxxOm's library.
https://greasyfork.org/en/scripts/12228-setmutationhandler

# First Attempt (Unhide)

Even though I have it working, I'm gonna attempt to write this my own way and see how far I can get. If you decide to start anything yourself, I think these should yield you the correct page elements. Here below is a new version I'm working on. I've tried to keep the CSS Selectors as compact as possible, and this seems to work. Edit: So far, I'm at the part where the button opens up a new window, pushes the correct permalink into it. This was actually really tricky to accomplish, since they've hidden the href behind a required 'pointerover' event, what needs to be done was every timestamp link had to scanned and event dispatched as soon as the page loaded, so that later on the href variable could be generated from the event.target button click. I had to do it that way, without declaring the variable immediately after dispatching the event, because declaring it immediately after, result in the href being undefined, since it takes about 2 seconds after the dispatch for those urls to actually get inserted in to the selector. Even trying to use setTimeout, resulted in an undefined issue. So I decided that I would just generate all the hrefs before anything is even clicked, and that worked perfectly. You can test this script with TamperMonkey, just paste everything in. So far it's looking like I'll be able to get this working, taking some inspiration from your own code, maybe I can start to understand it better if I re-write it my own way, so far it seems to be going very well.

☺
**You can check my initial progress on this project, here. Where I started writing my own code, which I can barely read xD. The way you've done certain things like:
function screenshotPostInCurrentWindow({anonymize, options, **callback: afterScreenshotCallback**}) {

I've never been familiar with doing things like that. Are there any tutorials related to that subject? Thanks in advance!
There's no way I am going to be able to finish this in a timely manner, while being able to make it as fully functional as you had it, so I was hoping you would take over. But alas, I did get it working! Take a look at the base-code below, and let me know if you want to work together to finish this, or if you would rather start from scratch or from a reference point, e.g. the code located here:

https://hastebin.com/wehiserovo.js**

I have no idea what I'm doing, so it's slow incremental progress. xD I need to familiarize myself with this method of sending messages to windows. It seems complicated to me.

Update: August 28 20:29 – It works! —>

Latest Working code (Need Optimization and Improvements):
Update: August 28 11:20
https://hastebin.com/dedererule.js

https://github.com/JZersche/fb-post-screenshot/tree/JZersche-patch-1/content

[hckr]

@JZersche I see you created a pull request, but inside your own fork (from branch to master), but instead you should've open a pull request in this repo. You can do it like this: master...JZersche:JZersche-patch-1 [click on this link and then "create pull request"]

Be sure to set the option for me to also commit changes (AFAIK there's something like this) and then I could take over and rewrite your code a bit, if you're fine with that.

[JZersche]

Done, I assume you meant the Allow edits by maintainers checkbox, and that's perfect. There are some issues with it working on pages other than the timeline, and occasionally it doesn't grab the URL of a post, but other than that it works fairly well, but there's currently no option functionality to toggle comments on or off.

[Sebi1808]

Dear all,

as I do not have any coding experience, I just wanted to ask you, if you can provide a easy step-by-step guide, how to fix the problem of fb-post 1.11.4 add-on with the new facebook layout.

As I understand your previous comments, you have a solution to use the add-on with the new layout, but to be honest, I don't know what to do. (for example how can I myself change the code? Which software do I need)

As I am doing linguistic research on facebook a working add-on like this, would be very helpful to me.

Thank you very much and kind regards
Sebi

[JZersche]

I have written a new version, anyone interested, feel free to contact me for a full version.

[Sebi1808]

Dear James, it would be so great if I could try your new version. Thx so much for your efforts. Kind regards Sebastian Von: James <notifications@github.com> Gesendet: Donnerstag, 28. Januar 2021 03:15 An: hckr/fb-post-screenshot <fb-post-screenshot@noreply.github.com> Cc: Sebi1808 <github@sz-deutsch.de>; Comment <comment@noreply.github.com> Betreff: Re: [hckr/fb-post-screenshot] Doesn't work with new FB layout. What now? (#32) I have written a new version, anyone interested, feel free to contact me for a full version. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARNPERWJZ733W5Y3YOSKKO3S4DCC3ANCNFSM4QGUEOSA> . <https://github.com/notifications/beacon/ARNPERS4L7WNXOQCYF2J2DLS4DCC3A5CNFSM4QGUEOSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFXJCN5A.gif>

[Bisie]

Hello James, You have no idea how much I miss this app... So, yes, please... Greetings, Koen Op do 28 jan. 2021 10:37 schreef Sebi1808 <notifications@github.com>:

…

Dear James, it would be so great if I could try your new version. Thx so much for your efforts. Kind regards Sebastian Von: James ***@***.***> Gesendet: Donnerstag, 28. Januar 2021 03:15 An: hckr/fb-post-screenshot ***@***.***> Cc: Sebi1808 ***@***.***>; Comment ***@***.***> Betreff: Re: [hckr/fb-post-screenshot] Doesn't work with new FB layout. What now? (#32) I have written a new version, anyone interested, feel free to contact me for a full version. — You are receiving this because you commented. Reply to this email directly, view it on GitHub < #32 (comment)> , or unsubscribe < https://github.com/notifications/unsubscribe-auth/ARNPERWJZ733W5Y3YOSKKO3S4DCC3ANCNFSM4QGUEOSA> . < https://github.com/notifications/beacon/ARNPERS4L7WNXOQCYF2J2DLS4DCC3A5CNFSM4QGUEOSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFXJCN5A.gif> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFITRPLJPCOCZS5LLD6LX4TS4EV7BANCNFSM4QGUEOSA> .