Comments (36)
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);
from gmail.js.
New version published to npmjs with preliminary changes as version 1.1.13
.
from gmail.js.
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.
from gmail.js.
@kinkoazc thanks, my bad that I haven't checked for
return
s insideforEach
when I converted them tofor...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 🙂
from gmail.js.
Please file these as separate issues. The included details are very nice to have.
from gmail.js.
@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?
from gmail.js.
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.
from gmail.js.
@kinkoazc thanks, my bad that I haven't checked for return
s inside forEach
when I converted them to for...of
. 🤦
from gmail.js.
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
});
from gmail.js.
I intended to update the boilerplate but never got around to it, and forgot it completely.
Should be updated now. Tested and works.
from gmail.js.
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.
from gmail.js.
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.
from gmail.js.
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?
from gmail.js.
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
from gmail.js.
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
from gmail.js.
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.
from gmail.js.
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
from gmail.js.
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?
from gmail.js.
Hello,
Did you have observe on "compose" work ?
from gmail.js.
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.
from gmail.js.
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...
from gmail.js.
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
from gmail.js.
FYI this PR is merged and now available in v1.1.14.
from gmail.js.
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)
from gmail.js.
You need the jquery 4 beta.
from gmail.js.
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
from gmail.js.
I don't see you importing/requiring jquery as a package in that example.
Maybe that's what you're missing?
from gmail.js.
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);
from gmail.js.
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?
from gmail.js.
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();
from gmail.js.
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.
from gmail.js.
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;
};
from gmail.js.
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)
from gmail.js.
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');
});
});
}
})();
from gmail.js.
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
from gmail.js.
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);`
from gmail.js.
Related Issues (20)
- gmail.observe.on('view_email', () => {}) is not fired HOT 16
- Synchronous 'DOMNodeInserted' DOM Mutation Event is deprecated HOT 3
- Synchronous 'DOMSubtreeModified' DOM Mutation Event is deprecated HOT 3
- Reloading window makes the the user email undefined HOT 2
- gmail.observe.on("compose") observer returns type of "compose" when reply button is clicked HOT 6
- How to Utilize the "make_request" and "make_request_async" Methods?
- Button added to toolbar in Gmail label page shows for few seconds & gets hidden (by Gmail)
- `recipient_change` hook throws console errors when compose is closed
- Detecting attachment open from search list HOT 1
- "view_email" event fires twice HOT 1
- Update header before send request HOT 2
- Error in the function: gmail.tools.add_compose_button HOT 7
- Error in the function compose.body() HOT 3
- Nonstop requests sent to play.google.com HOT 1
- api.get.user_email does not work with non-workspace email addresses
- GmailJS library (1.1.14) is failing to load (with error in console) HOT 1
- GmailJS method add_toolbar_button is not working HOT 3
- why this project can not be used at the server side with node? HOT 1
- Detect dark mode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gmail.js.