Gmail change for innerHTML #779

DiegoMMR · 2024-02-28T20:39:01Z

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/

The text was updated successfully, but these errors were encountered:

josteink · 2024-02-28T20:58:42Z

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 · 2024-02-28T21:01:05Z

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 · 2024-02-28T21:01:49Z

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 · 2024-02-28T21:04:03Z

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 · 2024-02-29T12:36:25Z

@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?

…artikTalwar#779) - some DOM check functions were rewritten to use native DOM API - jquery 3 dependency was removed from package.json

onestep · 2024-02-29T15:01:06Z

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 · 2024-03-01T12:02:50Z

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);

…artikTalwar#779) - some DOM check functions were rewritten to use native DOM API - jquery 3 dependency was removed from package.json

…artikTalwar#779) - some DOM check functions were rewritten to use native DOM API - jquery 3 dependency was removed from package.json - updated some function signatures in type definitions

gregsadetsky · 2024-03-05T04:59:08Z

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

…artikTalwar#779) - some DOM check functions were rewritten to use native DOM API - jquery 3 dependency was removed from package.json - updated some function signatures in type definitions

mohammedfarhan99 · 2024-03-07T06:07:26Z

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?

#780) * fix: avoid using deprecated jQuery functions to prepare for jQuery 4 (#779) - some DOM check functions were rewritten to use native DOM API - jquery 3 dependency was removed from package.json - updated some function signatures in type definitions * Fixup constructor parameter types. Fix editor-config for typescript too. --------- Co-authored-by: Jostein Kjønigsen <jostein@kjonigsen.net>

josteink · 2024-03-07T08:06:57Z

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

josteink · 2024-03-07T16:58:05Z

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 · 2024-03-07T17:03:46Z

Hello,

Did you have observe on "compose" work ?

josteink · 2024-03-07T18:03:31Z

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 · 2024-03-08T01:32:38Z

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 · 2024-03-08T06:22:19Z

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 · 2024-03-08T09:32:43Z

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 · 2024-03-08T15:03:22Z

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

onestep · 2024-03-09T11:30:56Z

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

josteink · 2024-03-09T11:43:51Z

@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 · 2024-03-14T21:26:29Z

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 · 2024-03-14T21:44:49Z

You need the jquery 4 beta.

kaeevans · 2024-03-14T21:49:16Z

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 · 2024-03-14T22:21:49Z

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

Maybe that's what you're missing?

kaeevans · 2024-03-14T22:25:10Z

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 · 2024-03-15T09:33:40Z

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 · 2024-03-15T13:51:55Z

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

git clone https://github.com/josteink/gmailjs-node-boilerplate/
cd gmailjs-node-boilerplate
npm install
npm update
Edit the package.json file and put "jquery": "^4.0.0-beta"
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 · 2024-03-15T14:43:36Z

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 · 2024-03-15T14:54:49Z

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 · 2024-03-15T15:02:29Z

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 · 2024-03-15T17:08:05Z

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 · 2024-03-15T17:33:03Z

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 · 2024-03-15T18:08:39Z

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 · 2024-03-15T20:35:33Z

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

sieppl · 2024-03-20T13:27:25Z

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 · 2024-03-27T07:50:01Z

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 · 2024-05-30T08:34:17Z

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);`

josteink mentioned this issue Feb 29, 2024

Relying on jquery #592

Open

onestep mentioned this issue Feb 29, 2024

fix: avoid using deprecated jQuery functions to prepare for jQuery 4 … #780

Merged

kinkoazc mentioned this issue Mar 8, 2024

fix for...of return issue #782

Merged

DDorrance90 mentioned this issue Mar 18, 2024

api.get.user_email does not work with non-workspace email addresses #786

Open

josteink mentioned this issue Mar 25, 2024

GmailJS library (1.1.14) is failing to load (with error in console) #787

Open

shashikiran-im mentioned this issue Apr 1, 2024

GmailJS method add_toolbar_button is not working #788

Open

Gmail change for innerHTML #779

Gmail change for innerHTML #779

Comments

DiegoMMR commented Feb 28, 2024 • edited Loading

josteink commented Feb 28, 2024

josteink commented Feb 28, 2024

DiegoMMR commented Feb 28, 2024

DiegoMMR commented Feb 28, 2024 • edited Loading

josteink commented Feb 29, 2024

onestep commented Feb 29, 2024

huksley commented Mar 1, 2024

gregsadetsky commented Mar 5, 2024

mohammedfarhan99 commented Mar 7, 2024

josteink commented Mar 7, 2024

josteink commented Mar 7, 2024

skyderman commented Mar 7, 2024

josteink commented Mar 7, 2024

MadcowD commented Mar 8, 2024

mohammedfarhan99 commented Mar 8, 2024

kinkoazc commented Mar 8, 2024 • edited Loading

josteink commented Mar 8, 2024

onestep commented Mar 9, 2024

josteink commented Mar 9, 2024

kaeevans commented Mar 14, 2024 • edited Loading

josteink commented Mar 14, 2024

kaeevans commented Mar 14, 2024

josteink commented Mar 14, 2024

kaeevans commented Mar 14, 2024

josteink commented Mar 15, 2024

guzman-rc commented Mar 15, 2024

josteink commented Mar 15, 2024

guzman-rc commented Mar 15, 2024

josteink commented Mar 15, 2024

guzman-rc commented Mar 15, 2024 • edited Loading

kaeevans commented Mar 15, 2024

guzman-rc commented Mar 15, 2024

josteink commented Mar 15, 2024

sieppl commented Mar 20, 2024 • edited Loading

shashikiran-im commented Mar 27, 2024 • edited Loading

vanphuctdt commented May 30, 2024

DiegoMMR commented Feb 28, 2024 •

edited

Loading

DiegoMMR commented Feb 28, 2024 •

edited

Loading

kinkoazc commented Mar 8, 2024 •

edited

Loading

kaeevans commented Mar 14, 2024 •

edited

Loading

guzman-rc commented Mar 15, 2024 •

edited

Loading

sieppl commented Mar 20, 2024 •

edited

Loading

shashikiran-im commented Mar 27, 2024 •

edited

Loading