gildas-lormeau / SingleFile

Web Extension for saving a faithful copy of a complete web page in a single HTML file
GNU Affero General Public License v3.0
15.64k stars 1.01k forks source link

Export MS Teams chat #483

Closed Ob18kenobi closed 4 years ago

Ob18kenobi commented 4 years ago

I try to download the chat in a Microsoft Teams website (teams.microsoft.com). Unfortunately only the surroundings (name of teams etc) are saved, the actual chat is completely empty. I have the same problem when trying to print the page or use the save functionality of Firefox itself.

It would be great to have the possibility to download Teams Chat, the internet if full of people trying to archive the chat and there seems to be no simple solution.

gildas-lormeau commented 4 years ago

I just did a test in Chrome and Firefox and it worked fine for me even though I cannot really test the chat because I'm alone in my team and I cannot chat with myself. Here is the page I saved in the attached zip file. Did you change any setting in SingleFile?

Edit: removed the link since I was not able to reproduce the issue, see next post.

gildas-lormeau commented 4 years ago

I invited myself in Teams and I was able to chat and save the conversation without any particular issue.

gildas-lormeau commented 4 years ago

Actually, I noticed icons of the participants were missing when using Firefox. The fix for this issue will be available in the next version.

Ob18kenobi commented 4 years ago

Thank you for your extremely quick reply!

Reading it I thought the reason might be some restrictions with my work laptop but unfortunately I have the same problem when trying it from my private computer. I just did a clean install of SingleFile, I use Firefox.

Can you share the URL of the teams site you used for your test? Maybe it is an issue with our Teams?

Ob18kenobi commented 4 years ago

Or I could invite you to a Teams if you give me an email address - not sure if there is a way to privately communicate here?

gildas-lormeau commented 4 years ago

You can contact me at gildas.lormeau@gmail.com and I'll invite you in my team.

Ob18kenobi commented 4 years ago

I just tested saving different chas and I think I am starting to see a pattern. I can save shorter chats just like the example you did but with longer chats that contain more posts the save file is blank. Or it might some kind of message type (smilys, pictures, ...) which creates the problem?

gildas-lormeau commented 4 years ago

@Ob18kenobi I think I was a bit optimistic yesterday when I told you the CLI tool would help to solve this problem. I dis some test and there are actually 2 issues that makes things more complicated than I expected:

Ob18kenobi commented 4 years ago

:-(

I guess there is a reason why no publicly available tool is able to export a full teams chat. Thank you for giving it a try! And thank you for SingleFile, a very useful addon. Unless you have other ideas to solve this we can close this issue.

gildas-lormeau commented 4 years ago

UPDATE You can use an extension instead of applying the instructions below manually, see https://github.com/gildas-lormeau/single-file-export-chat.

@Ob18kenobi Well there is a maybe solution but it's a bit manual and specific to Microsoft Teams.

Here are the steps to follow:

  1. Make sure that you scrolled to the top and the bottom of the chat conversation you want to save
  2. Press F12 to open the developer tools
  3. Select the tab "Console" in the developer tools
  4. Paste the code below in the console, it should zoom out the page
    const zoomFactor = (document.querySelector(".ts-main-flex").offsetHeight / document.querySelector(".list-wrap").offsetHeight);
    document.documentElement.style.setProperty("transform", "scale(" + zoomFactor + ")");
    document.documentElement.style.setProperty("transform-origin", "top");
    document.documentElement.style.setProperty("min-height", (100 / zoomFactor) + "vh");
  5. Once the page is fully loaded, paste the code below in the console, it should expand all the grouped chats.
    document.querySelectorAll(".expand-collapse").forEach(link => link.click());
    document.querySelectorAll(".ts-see-more-button.ts-see-more-fold").forEach(link => link.click());
  6. Paste the code below in the console, it should adjust the zoom level
    const newZoomFactor = (document.querySelector(".ts-main-flex").offsetHeight / document.querySelector(".list-wrap").offsetHeight);
    document.documentElement.style.setProperty("transform", "scale(" + newZoomFactor + ")");
    document.documentElement.style.setProperty("min-height", (100 / newZoomFactor) + "vh");
  7. Once the page is fully loaded, paste the code below to reset the zoom and add a scrollbar
    document.documentElement.style.removeProperty("transform");
    document.documentElement.style.removeProperty("transform-origin");
    document.documentElement.style.setProperty("overflow", "auto");
  8. Save the page with SingleFile
  9. Take a coffee, enjoy the passing of time, pray for your CPU
  10. And voilà! Your saved page should be okay
Ob18kenobi commented 4 years ago

@gildas-lormeau Ok, tried this. When entering the code after step 4 I get the following errors: grafik

The first one is about a lack of declaration of the "Zeichenkodierung" - declaration of character code in English? Complains that the code is not found but should be within the first 1024 characters. The second one is about memory usage of "will-change". It is to high, the limit is area of the document multiplied by 3 (1828272 px). Usage of "will-change" beyond the limit will be ignored.

The zoomed out version looks like it did work properly (but hard to see obviously, there might be blank spaces in the end). I then did step 6 which only semi-worked: the document is back to normal size but the scroll bar to the right is gone. I only see the initial part and cannot scroll down (no scroll bar, mouse wheel or arrow keys have no effect).

gildas-lormeau commented 4 years ago

The errors you see can be ignored, these are just warnings actually.

I'm really surprised the scrollbar is not displayed. If you want, you can send me the saved page in our conversation on MS Teams and I'll try to see what went wrong.

Ob18kenobi commented 4 years ago

I should do more tests before posting here.... Just tried it again, this time it works fine. Same Teams. Random glitch? Anyway: Yeah, this is great! Thanks a lot.

The only remaining issue are the cases where Teams chats are grouped and closed by Teams. In that case the archived version cannot show the content. One option is to manually open all before archiving, a bit tedious but feasible.

gildas-lormeau commented 4 years ago

I'm glad to hear it works. I updated the instructions to open all the grouped chats, see steps 5 to 8.

Edit 1: I updated the code. Edit 2: There is a bug when adjusting the zoom factor, I'm trying to fix it. Edit 3: It should be fixed. Also, you won't need to save the page twice with this new procedure.

Ob18kenobi commented 4 years ago

@gildas-lormeau

Thank you for the updates and sorry for the late reply. Semi-sucess: I tried multiple times with different Teams. Sometimes it works fine, sometimes it works but the chat is not expanded. And sometime it gets stuck in step 5 with the following error message:

grafik

This seems to be either an infinite or a very long loop, after half an hour the console is still scrolling with this error message, step 5 never finishes.

I also noticed one more issue: If a single post is long Teams does not show the entire post, only the first 10 lines or so and then there is a "show more" button. Is it possible to include an instruction to also show long posts?

gildas-lormeau commented 4 years ago

@Ob18kenobi I updated the procedure (cf. step 5) to click on the "show more" buttons.

Regarding the "custom scroll" error, I guess it will be more complicated. I'd have to be able to reproduce it to analyze what's wrong, but I can't because our discussion is not long enough on MS Teams, I guess.

gildas-lormeau commented 4 years ago

So, I'm closing this issue because it cannot really be fixed in SingleFile. It might be possible to automate this procedure with a user script though.

DavidGP commented 1 year ago

Hello all,

just found this thread as I've been looking for a way to save complete MS Teams chats for a while now.

I'd love to try the code posted above, but I'm getting the following error in the Console on the first block of code:

VM7544:1 Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight').
    at <anonymous>:1:112
(anonymous) @ VM7544:1

In the meantime, has there come up any other way to save complete Teams chats with Single File? When I try it, at least half of a long Teams chat does get saved, including all images. The other half, however, remains greyed out, as if the contents had not yet been scrolled and displayed, e.g. in terms of lazy loading:

image

I have tried all possible combinations of "send scroll events", "shrink the page" and "wait for images" in the settings, but without success.

gildas-lormeau commented 1 year ago

I just tested the procedure and I confirm it still works on my end. I think I would need an example of saved page from you in order to understand what could go wrong in your case. You can send it to me at gildas.lormeau <at> gmail.com.

DavidGP commented 1 year ago

Here at Stackoverflow there are two answers with similar approaches, one for Chrome and one for Firefox. Both I have tried, and unfortunately do not work either.

I'll email a Teams chat to you, saved with SingleFile.

gildas-lormeau commented 1 year ago

I'll email a Teams chat to you, saved with SingleFile.

BTW, make sure the conversation takes more place than the height of your screen.

DavidGP commented 1 year ago

Yes, I mailed you a conversation that is multiple times the length that is visible here: image

gildas-lormeau commented 1 year ago

Thank you, I did not see your email because it was in my spam folder. I'll do some tests and keep you updated.

DavidGP commented 1 year ago

I just sent you another email on the issue.

By the way, thousands (to millions) of corporate Teams users all over the world are searching in various degrees of desperation for a way to download, save and/or print Teams chats, as can be read in many places on the net. The issue also has been all over the various Microsoft Community forums for years, for example here, with thousands of upvotes over the years (and now simply closed by Microsoft).

Even Microsoft themselves helplessly recommend either copying and pasting message after message into Word or taking screenshots and saving those.

If SingleFile made it possible to save entire Teams Group chats to a file, this would be nothing less than sensational. I believe that many would even pay for this without second thought.

gildas-lormeau commented 1 year ago

UPDATE You can use an extension instead of applying the instructions below manually, see https://github.com/gildas-lormeau/single-file-export-chat.

Thank you for your help and your feedback @DavidGP.

Here is the procedure to follow in order to save a MS Teams chat with SingleFile:

  1. Open the chat conversation
  2. Open the console by pressing F12
  3. Paste the code below in the console and type Enter
    
    const SCROLL_DELAY = 1000;
    const mainFrame = frames[0];
    const bodyElement = mainFrame.document.querySelector(".ui-box.ap");
    const wrapperElement = bodyElement.parentElement;
    scrollToTop();

function scrollToTop() { if (wrapperElement.scrollTop > 100) { wrapperElement.scrollTop = 100; setTimeout(scrollToTop, SCROLL_DELAY); } else { wrapperElement.scrollTop = 0; setTimeout(() => { const zoomFactor = wrapperElement.clientHeight / bodyElement.clientHeight; document.documentElement.style.setProperty("transform", "scale(" + zoomFactor + ")"); document.documentElement.style.setProperty("transform-origin", "top"); document.querySelector("iframe").style.setProperty("height", ((1 / zoomFactor) * 100) + "vh"); }, SCROLL_DELAY); } }

4. Once the page zoomed out, save it with SingleFile
5. Open the saved page
6. Open the console by pressing F12
7. Paste the code below in the console and type Enter
```js
document.documentElement.replaceWith(frames[0].document.documentElement);
document.documentElement.style.setProperty("position", "static");
document.body.style.setProperty("height", "auto");
document.body.style.setProperty("overflow", "auto");
const chatContent = document.querySelector("ul");
document.body.innerHTML = "";
document.body.appendChild(chatContent);
  1. If you're using Chrome, make sure the setting "allow access to file URLs" is enabled here: chrome://extensions/?id=mpiodijhokgodhhofbcjdecpffjipkle/
  2. Save the page again
DavidGP commented 1 year ago

Thank you Gildas, it totally works!

So, I'm closing this issue because it cannot really be fixed in SingleFile. It might be possible to automate this procedure with a user script though.

So I fear that this is still valid -- no real way to include this by default in SingleFile?

gildas-lormeau commented 1 year ago

Unfortunately, this code is very specific to this issue so integrating it in SingleFile is not really possible. However, I updated it in order to scroll automatically to the top of the conversation. You could also transform these 2 scripts as bookmarklets to make things a bit easier for you. If several people ask me for this feature, I could eventually implement it as a dedicated SingleFile fork.

DavidGP commented 1 year ago

Thanks very much for your help. At least there is now a robust way to save long Teams group chats to a file – as incredible as it is that there is no proper or official Microsoft way to do it.

gildas-lormeau commented 1 year ago

I created a dedicated extension, it's a work in progress but it's functional. See https://github.com/gildas-lormeau/single-file-export-chat.

DavidGP commented 1 year ago

I'm sorry I'm replying only now, I missed your post completely.

Your new extension works perfect, even for very long chats. This is fantastic and world's first for saving Teams chats! Thanks so much!

gildas-lormeau commented 1 year ago

@DavidGP Thank you also for the feedback :)

abernar-85 commented 1 year ago

Hi! This extension is so much great! Thank you for doing it I am having issues with single file for exporting MS Teams chats. When I save the chat with the extension the chat is not saved and the error I get in the extension is this as follows: image Could you help me please to solve this issue? Would be very very helpful to make this work. Regards

abernar-85 commented 1 year ago

Hi! If I use alternative solution from Nov 25 to use original Single-file I get these problems: image Could you help me please?

gildas-lormeau commented 1 year ago

Unfortunately, Microsoft updated the implementation and the extension is now broken.

Pio55 commented 1 year ago

Unfortunately, Microsoft updated the implementation and the extension is now broken.

Do you mean, the extension "single-file-export-chat" doesn't work anymore, while your browser addon "SingleFile" still works? Is it correct?

Thanks

Pio55 commented 1 year ago

UPDATE You can use an extension instead of applying the instructions below manually, see https://github.com/gildas-lormeau/single-file-export-chat.

Thank you for your help and your feedback @DavidGP.

Here is the procedure to follow in order to save a MS Teams chat with SingleFile:

  1. Open the chat conversation
  2. Open the console by pressing F12
  3. Paste the code below in the console and type Enter
const SCROLL_DELAY = 1000;
const mainFrame = frames[0];
const bodyElement = mainFrame.document.querySelector(".ui-box.ap");
const wrapperElement = bodyElement.parentElement;
scrollToTop();

function scrollToTop() {
  if (wrapperElement.scrollTop > 100) {
    wrapperElement.scrollTop = 100;
    setTimeout(scrollToTop, SCROLL_DELAY);
  } else {
    wrapperElement.scrollTop = 0;
    setTimeout(() => {
      const zoomFactor = wrapperElement.clientHeight / bodyElement.clientHeight;
      document.documentElement.style.setProperty("transform", "scale(" + zoomFactor + ")");
      document.documentElement.style.setProperty("transform-origin", "top");
      document.querySelector("iframe").style.setProperty("height", ((1 / zoomFactor) * 100) + "vh");
    }, SCROLL_DELAY);
  }
}
  1. Once the page zoomed out, save it with SingleFile
  2. Open the saved page
  3. Open the console by pressing F12
  4. Paste the code below in the console and type Enter
document.documentElement.replaceWith(frames[0].document.documentElement);
document.documentElement.style.setProperty("position", "static");
document.body.style.setProperty("height", "auto");
document.body.style.setProperty("overflow", "auto");
const chatContent = document.querySelector("ul");
document.body.innerHTML = "";
document.body.appendChild(chatContent);
  1. If you're using Chrome, make sure the setting "allow access to file URLs" is enabled here: chrome://extensions/?id=mpiodijhokgodhhofbcjdecpffjipkle/
  2. Save the page again

Hello everyone, I read that extension "single-file-export-chat" doesn't work anymore. Instead, do the instructions above to use SingleFile to backup a Teams chat still work for anyone of you? When I click F12, and paste the first frame of code in Google Chrome console, I get a blocking error... I attach a screenshot:

Screenshot 2023-11-01 181320

Many Thanks

DavidGP commented 1 year ago

Hi, not sure how it if and how that currently still works. I think by now Teams has also received an update with a completely different runtime environment (or whatever that's called), so saving probably doesn't work as it did before.

I'm still making do by using Opera, zooming all the way out, narrowing the Opera window, and then saving at least moderately long Teams chats as one long PDF file.

Pio55 commented 1 year ago

Hi, not sure how it if and how that currently still works. I think by now Teams has also received an update with a completely different runtime environment (or whatever that's called), so saving probably doesn't work as it did before.

I'm still making do by using Opera, zooming all the way out, narrowing the Opera window, and then saving at least moderately long Teams chats as one long PDF file.

Thank you for your answer, David... I also will try using Opera... in that case, however, the PDF you get is "not searchable", is it?

pedrosantos867 commented 9 months ago

Is there any way this extension can be updated to continue working? I can help

pedrosantos867 commented 9 months ago

Is there any way this extension can be updated to continue working? I can help

Finally found a somewhat working solution.

Just follow this steps:

  1. Open the Teams app (web version)
  2. Open the Chrome Developer Tools (F12)
  3. Select this element using the chrome element selector (id #chat-pane-list)

image

image

  1. Run this code into the command line
    
    const chatContentElement = document.querySelector('.ui-box')

if (chatContentElement) { const wrapperElement = chatContentElement.parentElement; expandFrameSize(document); resetOverflow(document) }

function expandFrameSize(frameDoc) { const MAX_HEIGHT = "2147483647px"; frameDoc.body.style.setProperty("height", MAX_HEIGHT); }

function resetOverflow(doc) { doc.documentElement.style.setProperty("position", "static"); const docBodyStyle = doc.body.style; docBodyStyle.setProperty("height", "auto"); docBodyStyle.setProperty("overflow", "auto"); }


6. Wait for the conversation to load completly
7. Run the [Single File](https://chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle) chrome extension

**Note:** Surelly there's a way for the code to select the element `#chat-pane-list` automatically without having to select using chrome picker, but for now I didn't find a way. Tried using frame[0] but could't get any further.

Hope this helps you
Pio55 commented 9 months ago

Many, MANY THANKS, Pedro, it worked fine for me... I have downloaded a BIG chat of mine... !

pedrosantos867 commented 9 months ago

Many, MANY THANKS, Pedro, it worked fine for me... I have downloaded a BIG chat of mine... !

I'm glad I could help.

umarnadeembutt commented 8 months ago

I also want to download a big file of my chat from MS Teams. However, because the chat is quite large, my Chrome keeps crashing when trying to go to the first message. Please guide me on what to do in this regard so that I can backup my complete chat.

Note: I have tried all the methods available on the internet, but none of them worked. Only the method you provided is working. Thank you very much. Waiting for your kind reply.

pedrosantos867 commented 8 months ago

I also want to download a big file of my chat from MS Teams. However, because the chat is quite large, my Chrome keeps crashing when trying to go to the first message. Please guide me on what to do in this regard so that I can backup my complete chat.

Note: I have tried all the methods available on the internet, but none of them worked. Only the method you provided is working. Thank you very much. Waiting for your kind reply.

You could try to save the chat in the compact mode. This way the chat is way smaller.

umarnadeembutt commented 8 months ago

I also want to download a big file of my chat from MS Teams. However, because the chat is quite large, my Chrome keeps crashing when trying to go to the first message. Please guide me on what to do in this regard so that I can backup my complete chat. Note: I have tried all the methods available on the internet, but none of them worked. Only the method you provided is working. Thank you very much. Waiting for your kind reply.

You could try to save the chat in the compact mode. This way the chat is way smaller.

Please guide what is compact mode.

pedrosantos867 commented 8 months ago

https://support.microsoft.com/en-gb/office/change-the-spacing-of-your-chat-messages-in-microsoft-teams-3a4eb5cb-0748-47c8-925a-3809f69952cd

umarnadeembutt commented 8 months ago

Thanks, let me try it. How can I contact you brother.

pedrosantos867 commented 8 months ago

Thanks, let me try it. How can I contact you brother.

You can contact me via email, you can find it in my github profile.

umarnadeembutt commented 8 months ago

I also want to download a big file of my chat from MS Teams. However, because the chat is quite large, my Chrome keeps crashing when trying to go to the first message. Please guide me on what to do in this regard so that I can backup my complete chat. Note: I have tried all the methods available on the internet, but none of them worked. Only the method you provided is working. Thank you very much. Waiting for your kind reply.

You could try to save the chat in the compact mode. This way the chat is way smaller.

Please guide what is compact mode.

Hello, I have a chat history spanning 5 months in Microsoft Teams that I need to extract. However, I've been facing an issue where the chat keeps scrolling and gets stuck at the maximum level, which is on December 28, 2024. Due to this, I'm unable to extract the complete chat.

I would like to suggest adding a feature in the code where I can specify a Start Date and End Date. This way, I can download the chat month by month and later merge the files. This would help me manage the large amount of chat data more effectively.

umarnadeembutt commented 8 months ago

Brother waiting for your kind response.