Gmail change for innerHTML

[DiegoMMR]

Gmail will change and add a trustedHTML policy that doenst allow jquery to load

https://workspaceupdates.googleblog.com/2024/01/extending-trusted-types-to-gmail.html

to test it if you dont have that change you need to install this extension https://chromewebstore.google.com/detail/modheader-modify-http-hea/idgpnmonknjnojddfkpgkljpfnnfcklj

then you need to add this policy

require-trusted-types-for = 'script'

we did a change from innerHTML to setHTML is a temporal fix that worked but prob is not permament

https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML

but in theory the change to jquery 4 should fix it

https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

[josteink]

Eeek. That sounds like it can cause quite a bit of problems, depending on the complexity of the extension.

Would you be willing to upstream and PRs which helps alleviate the issue for now?

While normally I've tried to avoid breaking changes in Gmail.js, given how this sounds like a fairly breaking change on Google's end, I might be willing to accept PRs which includes breaking changes, if that is required to solve this problem.

[josteink]

Talking about how upgraded jQuery solves this... Ive considered for quite a while how it may be time to embrace regular DOM APIs instead of relying on jQuery.

Would using plain DOM APIs help us in this case? Or would we just get the same problems none the less?

[DiegoMMR]

Eeek. That sounds like it can cause quite a bit of problems, depending on the complexity of the extension.

Would you be willing to upstream and PRs which helps alleviate the issue for now?

While normally I've tried to avoid breaking changes in Gmail.js, given how this sounds like a fairly breaking change on Google's end, I might be willing to accept PRs which includes breaking changes, if that is required to solve this problem.

we have the local files for jquery and gmail.js in our repo... so what we did for now was replace all the innerHTML for setHTML with vscode and for that that worked but bc our extension was a bit big it had that innerHTML in more places but the first place where the error was show was on jquery

[DiegoMMR]

Talking about how upgraded jQuery solves this... Ive considered for quite a while how it may be time to embrace regular DOM APIs instead of relying on jQuery.

Would using plain DOM APIs help us in this case? Or would we just get the same problems none the less?

should work using plain DOM APIs i think... bc the problem with that change is on the innetHTML that can also be changed for other things and google provide this https://web.dev/articles/trusted-types?hl=es#rewrite_the_offending_code

[josteink]

@onestep said:

Taking into account that jQuery could not be used anymore due to recent TrustedHTML changes in Gmail, would it make sense to avoid using it altogether for DOM manipulations?

Making that change is a major compatibility break. I'm generally against making breaking changes when one doesn't have to, because usually it involves more work for everyone.

If we are to make a breaking change it should be done properly:

• Implementation has to be changed
• Type-script signatures has to be updated
• Documentation has to be updated
• Changes will need to be regression-tested

If we do this now, it might save us effort down the line... But as mentioned above, there might be even more hurdles down the line.

If so, would also this work be worth it, if it has to be redone again soonish?

In that case, maybe not doing a breaking change but just updating jQuery to latest beta is an acceptable "middle-ground" while seeing how things play out?

Opinions?

[onestep]

Hello @josteink,

As a super quick fix to allow running on jQuery 4, I've prepared a PR to avoid using deprecated jQuery helpers - #780. That worked for me when running on jQuery 4 beta.

[huksley]

Thank you @DiegoMMR for this extension suggestion to test, Google started to roll out changes to us, but I haven't received it. Thanks to this thread, I was able to replicate a problem and fix it very quickly.

For what it's worth, I migrated to new jQuery 4 beta and added only following changes to the codebase, in my case working fine with gmail.js

jQuery.isArray = Array.isArray;
jQuery.extend({
  htmlPrefilter: createTrustedHTML // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy
});
this.gmail = new Gmail(jQuery);

[gregsadetsky]

thanks to everyone here who jumped in to solve this problem!! I've been hit hard, my gmail.js-based extension totally stopped working over the past few days......! but I followed the instructions here, upgraded to jquery 4 beta, changed all of my innerhtml to actual jquery objects, etc.

fingers crossed for the extension review process but yeah. just wanted to give a huge huge thanks. cheers

[mohammedfarhan99]

Thank you @DiegoMMR for this extension suggestion to test, Google started to roll out changes to us, but I haven't received it. Thanks to this thread, I was able to replicate a problem and fix it very quickly.

For what it's worth, I migrated to new jQuery 4 beta and added only following changes to the codebase, in my case working fine with gmail.js

jQuery.isArray = Array.isArray;
jQuery.extend({
  htmlPrefilter: createTrustedHTML // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy
});
this.gmail = new Gmail(jQuery);

Although this fix renders the extension content, the trustedHtml error still occurs in Gmail.api.tools.add_toolbar_button failing to render the button in gmail's toolbar for me, is anyone else also facing this issue?

[josteink]

New version published to npmjs with preliminary changes as version 1.1.13.

[josteink]

Thank you @DiegoMMR for this extension suggestion to test, Google started to roll out changes to us, but I haven't received it. Thanks to this thread, I was able to replicate a problem and fix it very quickly.

For what it's worth, I migrated to new jQuery 4 beta and added only following changes to the codebase, in my case working fine with gmail.js

jQuery.isArray = Array.isArray;

jQuery.extend({

  htmlPrefilter: createTrustedHTML // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy

});

this.gmail = new Gmail(jQuery);

Although this fix renders the extension content, the trustedHtml error still occurs in Gmail.api.tools.add_toolbar_button failing to render the button in gmail's toolbar for me, is anyone else also facing this issue?

The HTML you pass in to the function needs to be converted into "trusted" html using the same technique as the htmlPrefilter for Jquery.

I've tested that in my extension and that works without any issues.

[skyderman]

Hello,

Did you have observe on "compose" work ?

[josteink]

Hello,

Did you have observe on "compose" work ?

I'm having issues with my compose modules too, but haven't had time to look into how/why that's failing yet.

[MadcowD]

The issue with observers is this return statement:

    var classes = cn.trim ? cn.trim().split(/\s+/) : []
    if (!classes.length) classes.push("") // if no class, then check for anything observing nodes with no class
    console.log("classes", classes)
    for (let className of classes) {
      var observers = dom_observer_map[className]
      console.log("asd", className)
      if (className === "An") {
        console.log("observers", observers)
      }
      if (!observers) {
        return
      }

For whatever reason An is now the second class, and the first class has no observers so it just returns. I think it should be continue not return...

[mohammedfarhan99]

Thank you @DiegoMMR for this extension suggestion to test, Google started to roll out changes to us, but I haven't received it. Thanks to this thread, I was able to replicate a problem and fix it very quickly.

For what it's worth, I migrated to new jQuery 4 beta and added only following changes to the codebase, in my case working fine with gmail.js

jQuery.isArray = Array.isArray;

jQuery.extend({

htmlPrefilter: createTrustedHTML // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy

});

this.gmail = new Gmail(jQuery);

Although this fix renders the extension content, the trustedHtml error still occurs in Gmail.api.tools.add_toolbar_button failing to render the button in gmail's toolbar for me, is anyone else also facing this issue?

The HTML you pass in to the function needs to be converted into "trusted" html using the same technique as the htmlPrefilter for Jquery.

I've tested that in my extension and that works without any issues.

Yes it works, I had made a silly mistake, I had passed the createTrustedHtml logic as an arrow function, which for some reason jQuery was not able to override because of lexical scoping ig, passing createTrustedHtml logic as function(string){} instead of (string) =>{} solved it

[kinkoazc]

The issue with observers is this return statement:

    var classes = cn.trim ? cn.trim().split(/\s+/) : []
    if (!classes.length) classes.push("") // if no class, then check for anything observing nodes with no class
    console.log("classes", classes)
    for (let className of classes) {
      var observers = dom_observer_map[className]
      console.log("asd", className)
      if (className === "An") {
        console.log("observers", observers)
      }
      if (!observers) {
        return
      }

For whatever reason An is now the second class, and the first class has no observers so it just returns. I think it should be continue not return...

@josteink I'm having the same issue with the compose event. Indeed, while return of a non-false value functioned for $.each as continue, it's no longer the case in a for...of.

Created following PR for this.

[josteink]

FYI this PR is merged and now available in v1.1.14.

[onestep]

@kinkoazc thanks, my bad that I haven't checked for returns inside forEach when I converted them to for...of. 🤦

[josteink]

@kinkoazc thanks, my bad that I haven't checked for returns inside forEach when I converted them to for...of. 🤦

No worries. Mistakes happens.

You made some huge improvements which helped everyone in the community and the community helped you back.

It's how open-source is supposed to work 🙂

[kaeevans]

I'm still having trouble with this. I updated to the latest version of gmail-js and jquery, and I added this to my gmailJsLoader.js file:

const createTrustedHTML = trustedTypes.createPolicy("default", {
  createHTML: (to_escape) => to_escape,
});

jQuery.isArray = Array.isArray;
jQuery.extend({
  htmlPrefilter: createTrustedHTML, // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy
});

But I'm getting this error:

Uncaught TypeError: jQuery3.extend is not a function
Context
https://mail.google.com/mail/u/0/#inbox
Stack Trace
dist/gmailJsLoader.js:5652 (anonymous function)
dist/gmailJsLoader.js:5657 (anonymous function)

[josteink]

You need the jquery 4 beta.

[kaeevans]

I have the jQuery 4 beta. My package.json says "jquery": "^4.0.0-beta", And when I add a breakpoint and run jQuery.fn.jquery in the console it says '4.0.0-beta'. But it still seems to be using jQuery3 somehow

[josteink]

I don't see you importing/requiring jquery as a package in that example.

Maybe that's what you're missing?

[kaeevans]

Here's the entire file:

const GmailFactory = require("gmail-js");
const jQuery = require("jquery");

const createTrustedHTML = trustedTypes.createPolicy("default", {
  createHTML: (to_escape) => to_escape,
});

jQuery.isArray = Array.isArray;
jQuery.extend({
  htmlPrefilter: createTrustedHTML, // Create "magical" trusted HTML as in https://web.dev/articles/trusted-types#create_a_trusted_type_policy
});

// don't mess up too bad if we have several gmail.js-based
// extensions loaded at the same time!
window._gmailjs = window._gmailjs || new GmailFactory.Gmail(jQuery);

[josteink]

Not sure if thats your only error, but I at least spotted this tiny thing:

const createTrustedHTML = trustedTypes.createPolicy("default", {
  createHTML: (to_escape) => to_escape,
});

jQuery.extend({
  htmlPrefilter: createTrustedHTML
});

Here you are passing the whole trusted HTML policy in to jquery, which simply expects a function to convert string to trusted strings.

Use this instead:

const trustedHTMLpolicy = trustedTypes.createPolicy("default", {
  createHTML: (to_escape) => to_escape,
});

jQuery.extend({
  htmlPrefilter: trustedHTMLpolicy.createHTML // this is the actual function which jQuery needs
});

[guzman-rc]

GmailJS Node Boilerplate gives me an error. These are the steps followed:

1. git clone https://github.com/josteink/gmailjs-node-boilerplate/
2. cd gmailjs-node-boilerplate
3. npm install
4. npm update
5. Edit the package.json file and put "jquery": "^4.0.0-beta"
6. npm run build

And finally I load the extension. When I open Gmail in Chrome I get the following error:

Uncaught TypeError: $ is not a function at Gmail.api.dom.inbox_content (gmail.js:316:16) at Gmail.api.observe.on_dom (gmail.js:2733:24) at Gmail.api.observe.on (gmail.js:2329:24) at startExtension (extension.js:18:19) at extension.js:10:5

Could you please help me to correct the error?

[josteink]

I intended to update the boilerplate but never got around to it, and forgot it completely.

Should be updated now. Tested and works.

[guzman-rc]

Great, now it works but I get the following output: Hello, null. This is your extension talking!

This function is not working properly: const userEmail = gmail.get.user_email();

[josteink]

Weird. Works for me.

Howeever, it seems like most things are up and running as they should now, so I just would file that as an individual bug, and see if someone can come up with a PR to fix it.

[guzman-rc]

It seems that the error occurs with personal accounts: @gmail.com, with professional accounts it works correctly.

To fix this error, add these instructions:

if(api.tracker.globals.length == 0 && GLOBALS !== "undefined" && GLOBALS.length > 11)
     api.tracker.globals = GLOBALS;

to the function: api.get.user_email

api.get.user_email = function() {
  if(api.tracker.globals.length == 0 && GLOBALS !== "undefined" && GLOBALS.length > 11)
    api.tracker.globals = GLOBALS;

  let user_email = api.tracker.globals[10];   

  if (user_email) {
    return user_email;
  }
  const elements = document.getElementsByClassName("eYSAde");
  for (const el of elements) {
    if (el.innerHTML.indexOf("@") === -1) {
      return el.innerHTML;
    }
  }
      return null;
};

[kaeevans]

Something about the way you imported jquery into the boilerplate project fixed my bug.

Separate but related issue: the compose.body() function appears to be broken. I get this console error when I call compose.body("text") for a reply compose box:

jquery.module.min.js:2 Uncaught TypeError: Illegal invocation
    at T.fn.init.<anonymous> (jquery.module.min.js:2:44823)
    at Y (jquery.module.min.js:2:6326)
    at T.fn.init.html (jquery.module.min.js:2:44634)
    at Gmail.api.dom.compose.body (gmail.js:4183:25)
    at eval (eval at <anonymous> (extension.js:49:17), <anonymous>:1:9)
    at extension.js:49:17                        <-- this is where I call compose.body()
    at handler (gmail.js:2573:21)
    at Gmail.api.observe.trigger_dom (gmail.js:2451:13)
    at Gmail.api.tools.insertion_observer (gmail.js:2797:37)
    at MutationObserver.<anonymous> (gmail.js:2710:39)

[guzman-rc]

Error when executing the function: gmail.tools.add_compose_button

Uncaught TypeError: Illegal invocation
    at T.fn.init.<anonymous> (jquery.module.min.js:2:44823)
    at Y (jquery.module.min.js:2:6326)
    at T.fn.init.html (jquery.module.min.js:2:44634)
    at Gmail.api.tools.add_compose_button (gmail.js:3712:16)
    at extension.js:31:15
    at handler (gmail.js:2573:21)
    at Gmail.api.observe.trigger_dom (gmail.js:2451:13)
    at Gmail.api.tools.insertion_observer (gmail.js:2797:37)
    at MutationObserver.<anonymous> (gmail.js:2710:39)

This is my extension.js file

"use strict";

(() => {
  // src/extension.js
  var loaderId = setInterval(() => {
    if (!window._gmailjs) {
      return;
    }
    clearInterval(loaderId);
    startExtension(window._gmailjs);
  }, 100);

  function startExtension(gmail) {
    console.log("Extension loading...");
    window.gmail = gmail;

    gmail.observe.on("load", () => {
      const userEmail = gmail.get.user_email();
      console.log("Hello, " + userEmail + ". This is your extension talking!");

      gmail.observe.on("view_email", (domEmail) => {
        console.log("Looking at email:", domEmail);
        const emailData = gmail.new.get.email_data(domEmail);
        console.log("Email data:", emailData);
      });

      gmail.observe.on("compose", (compose) => {
        console.log("New compose window is opened!", compose);

    var compose_ref = gmail.dom.composes()[0];      
    gmail.tools.add_compose_button(compose_ref, 'content_html', function() {
        // Code here            
    }, 'Custom Style Classes');

      });
    });
  }
})();

[josteink]

Please file these as separate issues. The included details are very nice to have.

[sieppl]

Based on your comments here is a workaround that was working for me, when fixing the problem with jquery 4 beta:

npm install dompurify

and in my extension.js:

const jQuery = require("jquery");
const DOMPurify = require("dompurify");

trustedTypes.createPolicy("default", {
  createHTML: string => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true}),
});

I am not extending jQuery.htmlPrefilter as suggested above.

[shashikiran-im]

Hi Gmail JS team / @mohammedfarhan99 ,

FYI that I had updated code to refer jQuery & added below code & it is working,

const trustedHTMLpolicy = trustedTypes.createPolicy("default", { createHTML: (to_escape) => to_escape, });

$.extend({ htmlPrefilter: trustedHTMLpolicy.createHTML // this is the actual function which jQuery needs });

But gmail.tools.add_toolbar_button() method used to add buttons to toolbar is not working & showing below error in console, jquery.module.min.js:2 Uncaught TypeError: Illegal invocation at T.fn.init. (jquery.module.min.js:2:44823) at Y (jquery.module.min.js:2:6326) at T.fn.init.html (jquery.module.min.js:2:44634) at create_generic_toolbar_button (gmail.js:3673:16) at Gmail.api.tools.add_toolbar_button (gmail.js:3690:16) at extension.js:25:19 at gmail.js:2745:28

Please let me know if anyone had found root for the issue of gmail.tools.add_toolbar_button() not working / share your thoughts on how to address it

Thanks in Advance, Shashikira

[vanphuctdt]

Thanks everyone, after replace with jQuery 4 beta, i got error on gmail.tools.add_compose_button, just to say, this is my fix. ` const policy = trustedTypes.createPolicy('default', { createHTML: string => string, createScriptURL: string => string, createScript: string => string, });

jQuery.isArray = Array.isArray; jQuery.extend({ htmlPrefilter: function (html) { return policy.createHTML(html).toString(); } }); gmail = new Gmail(jQuery);`