# Open edX Summer Challenge: Fix Learning MFE's integration with Browser Plugins for Translations **URL:** \ **Category:** i18n\ **Created:** [June 15, 2021, 1:22am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171 "2021-06-15T01:22:34Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![nimisha](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nimisha/32/1511_2.png) [@nimisha](https://discuss.openedx.org/u/nimisha)\ **Post date:** [June 15, 2021, 1:22am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171/1 "2021-06-15T01:22:34Z")
Hi everyone, **TL;DR** See below for information on our inaugural _Open edX Summer Challenge_, ending **July 31st, 2021** that aims to increase localization access for our global learners. **Context** edX’s [Teaching and Learning](https://github.com/orgs/edx/teams/teaching-and-learning) and [Community Engineering](https://github.com/orgs/edx/teams/community-engineering) teams have [modernized the Open edX platform’s in-course learner experience](https://edx.readthedocs.io/projects/open-edx-release-notes/en/latest/juniper_learner.html#learning-sequence-experience), overhauling its frontend technology in the form of a [new Learning Micro-frontend (MFE) application](https://github.com/edx/frontend-app-learning). This new MFE was tagged for early community adoption with the [Juniper release](https://edx.readthedocs.io/projects/open-edx-release-notes/en/latest/juniper_learner.html#learning-sequence-experience). This newly re-platformed experience comes with mobile responsiveness and improved UX and API performance. It also addresses one of our long-term needs of site security concerns by sandboxing user-authored content and code within iFrames. **Problem** One of the tradeoffs that we discovered with embedding content within iFrames is that in-browser plugins for Translations no longer work in the new Learning MFE. For example, while the [Google Translate Chrome Extension](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb/) translated content within course content XBlocks in the old experience, it no longer does in the new experience (see the HTML XBlock and the Problem XBlock below). ![Screen Shot 2021-06-14 at 7.48.53 PM](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/f/f2273062afc24112bec9cac1d9d5eebcfbe33e6c.png) **2021 Summer Challenge** The technical problem described above is a time-sensitive issue. In an upcoming Open edX named release, the new learning MFE will be the default learner experience, and the old experience will be deprecated and removed. While we will likely want to fix this in time for December’s Maple release, already, many learners on [edX.org](http://edX.org) are running into this issue. It prevents access to valuable educational content for global learners who leverage in-browser translation tools to navigate the web. For those of you who love ❤ challenges, do you raise your hand ✋🏼 to solve this one? Can you, this summer ( **by July 31st** ), fix the new Learning MFE’s integration with browser-plugins for Translations? _(There’s a [stackoverflow article](https://stackoverflow.com/questions/22936421/google-translate-iframe-workaround/25177215) related to this that may - or may not - help you.)_ **Sign Up** If you are eager to tackle this issue, respond to this post. If you have a functional solution, share it on this thread - it may spark other ideas as well. To get a workable solution merged into the platform, we would connect you with a [Core Committer](https://open.edx.org/blog/open-edx-core-committers-program/) to bring your solution to fruition. In return, for appreciation of your ingenuity in accepting this challenge and your commitment to addressing the needs of our global learners, you will receive a coveted _Open edX Summer Challenge_ badge and additional recognition. Nimisha and the Open edX Team ---
**Author:** ![Manish\_Hada](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/manish_hada/32/1651_2.png) [@Manish\_Hada](https://discuss.openedx.org/u/Manish_Hada)\ **Post date:** [June 15, 2021, 8:26am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171/2 "2021-06-15T08:26:41Z")
> [@nimisha](#): > > Problem XBlock below) Looks like its due to cross site. google translator works if iframe point to same domain. I will try some solution. ---
**Author:** ![Manish\_Hada](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/manish_hada/32/1651_2.png) [@Manish\_Hada](https://discuss.openedx.org/u/Manish_Hada)\ **Post date:** [June 18, 2021, 5:05am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171/3 "2021-06-18T05:05:51Z")
I closely looked into problem and found the following: **Reason:** It is happending because of **cross site** and nothing to do with google translation. Due to cross site, the script is not able to get content of iframe to translate. **Possible Solution:** 1. It works if iframe url belongs to same domain. so if we create url as subdirectory instead of subdomain then problem solve automatically. I don’t know, how hard it is but best solution which may solve many problem which we are not aniticipating yet due to iframe. 2. Due to cross-site, parent window and iframe window can not communicate directly but both have function **postMessage** which can be used to pass messages between each other. [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). we need to play with this to find some solution. ---
**Author:** ![jill](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/jill/32/3188_2.png) [@jill](https://discuss.openedx.org/u/jill)\ **Post date:** [June 18, 2021, 6:04am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171/4 "2021-06-18T06:04:13Z")
@Manish_Hada Great work diagnosing this issue! > [@Manish\_Hada](#): > > 1. It works if iframe url belongs to same domain. so if we create url as subdirectory instead of subdomain then problem solve automatically. I don’t know, how hard it is but best solution which may solve many problem which we are not aniticipating yet due to iframe. [MFEs _can_ be deployed to subdirectories instead of subdomains](https://github.com/edx/configuration/tree/master/playbooks/roles/mfe_deployer#deployment-using-subdirectories), so this solution could work for small sites. But since it kinda ruins the scalability benefits of MFEs, it’s not a great solution for [edx.org](http://edx.org) and large deployments. But I guess if it’s the only one that works, they could proxy requests to the subdomain-deployed MFEs? > [@Manish\_Hada](#): > > 1. Due to cross-site, parent window and iframe window can not communicate directly but both have function **postMessage** which can be used to pass messages between each other. [Window: postMessage() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). we need to play with this to find some solution. Not sure whether google translate sends the page any signals when it’s been invoked to translate a page. But if it does, maybe we could catch that event and do something with it? I briefly looked into rewriting the iframe URLs [as suggested on StackOverflow](https://stackoverflow.com/a/25177215/4302112), but aside from all the wrappers that Google puts around the translated content, the [translate.google.com](http://translate.google.com) page has `X-Frame-Options: DENY`, so it can’t be iframed ☹ ---
**Author:** ![Manish\_Hada](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/manish_hada/32/1651_2.png) [@Manish\_Hada](https://discuss.openedx.org/u/Manish_Hada)\ **Post date:** [June 18, 2021, 7:28am UTC](https://discuss.openedx.org/t/open-edx-summer-challenge-fix-learning-mfes-integration-with-browser-plugins-for-translations/5171/5 "2021-06-18T07:28:00Z")
> [@jill](#): > > Not sure whether google translate sends the page any signals when it’s been invoked to translate a page. But if it does, maybe we could catch that event and do something with it? Yes, I investigated js file and it’s parameters, it doesn’t provide any event on change lang but if we might bind event externally then we can do something. I changed lang of iframe through postMessage function but still looking into two things: 1. to bind event on change language. 2. to change iframe language smoothly without left any strain behind. > [@jill](#): > > I briefly looked into rewriting the iframe URLs [as suggested on StackOverflow](https://stackoverflow.com/a/25177215/4302112), but aside from all the wrappers that Google puts around the translated content, the [translate.google.com](http://translate.google.com) page has `X-Frame-Options: DENY` , so it can’t be iframed yes, doesn’t work 🙂