Develop Reference

How does Google Calendar update the content of an email AFTER it is sent?

Google calendar invite emails will update after they are sent if the original event has been changed... how does Google achieve this? Is there a general technique for anyone to do this? Or is this only possible because Google owns both gMail/gCalendar and the two systems are integrated behind the scenes outside of SMTP?
My first guess was that they used an iframe or an image that was loaded when the email was opened, but inspecting the source of the gMail page doesn't show any signs of that.
Here's a screenshot of the updated text:
And here's the HTML for that section of the page when reading the email within gMail:

Note :
Inspecting Source wil give you nothing other than the markup of the content you see in the page after all dynamic operations including ajax.
To check the actual source, you want to visit view-source:url.
Now the question
That information is updated automatically at Run time via a JavaScript code.
In the image, you checked on Inspect element, which show the code of live view and so, you saw the updated content.
It is done by JavaScript DOM and text manipulation.
To verify this,
Click on the address bar.
add view-source: before the url. So, it will look like view-source:https://url
Then press ctrl+f or the corresponding key to find.
Search for the <div id=":8hg" which will show 0 results.
The view-source is load the source of the file without any ajax or JavaScript manipulation.
The div is not present in the source. So, we can understand that it is done dynamically.
When checking in detail,
in the source, we can see a link https://www.google.com/calendar/event?action\u003dVIEW\u0026eid\u003db..... which is stored in an array.
From this link, the content is taken.
(I blacked out some text for privacy).
Based on the return of the url, the content on mail is upated.
To verify this,
In the mail, you can see This invitation is out of date
But in the view-source: page, search for This invitation is out of date and it will return 0 results.
So, it is sure that the Calendar details are taken via an API call by Gmail to the G Calendar API.

I wonder if on sending the email they create an image at some url and then if it changes they just remove it, then in the email they have something like
<div id="updated"></div>
<img src="asdfawe" onerror="document.getElementById('updated').innerhtml="some text""/>
Although im not sure if they can't use the onerror attribute (b/c email + js = bad idea). the only other way is just to use alt attribute and use some css trickery but I don't see how that could result in the inspected code.

Add custom button to gmail inbox with chrome extension

I'm trying to develop a chrome extension to interact with an email inside gmail inbox. Currently I'm using page action to show the icon of the extension and when user clicks on the icon, the plugin assumes the opened page is an email inside gmail inbox and it interacts with the email.
But it seems to be better if I can add a button to gmail web interface instead of the page action icon like below (notice the add button added by a plugin called todoist).
One way to do this is to observe html in other buttons provided by gmail,
and injecting a new button with the content script. But the classes used in elements in gmail seems to be have no verbal meaning and not sure the classes change dynamically. For example to define an icon, the html is like below.
<div class="ase T-I-J3 J-J5-Ji"></div>
Injecting may not work if the classes are changing dynamically. Also the button structure may change if the user changes different themes. (Or may be they are always the same and I can continue injecting)
Is there a standard way to do this? Or else, a stable way to inject the button?
Note: Contextual gadgets is not a solution as I want to get the attachment.

You should use gmail.js add_toolbar_button method using this you can add a custom button in Gmail inbox.
gmail.tools.add_toolbar_button('content_html', function() {
// Code here
}, 'Custom Style Classes');
There are various helper methods through this you can easily build an extension top on Gmail Inbox.

You can also use InboxSDK to inject buttons in Gmail.
Code snippet:
InboxSDK.load(1, 'YOUR_APP_ID_HERE').then(function(sdk){
sdk.Compose.registerComposeViewHandler(function(composeView){
console.log("compose view exists!");
});
});
I know this question is 4 years old but this tool could be useful for someone who is looking for a solution to inject buttons in gmail.

User-Generated-Content—where to start? Users submits content into divs which adds to the gallery

A user would click a submit button and a function would create a div in a gallery on my site with which they could link to if they wanted to share that content specifically. The content is just embedded and hosted on other sites like youtube so the user would not be actually uploading any content or need an account. It's a free open gallery that anyone could copy a url and paste into an input and submit that content into a div in the gallery.
Any ideas where to start? Would this require php?

Well if you're a super beginner or something the first step would be to make your website just the way you want it and inside these div's you can just put the url that the user submitted instead of the content that url points to. [If you can do this then I assume you wouldn't need to ask this question, so don't mind me treating you like a complete beginner]
How would you achieve this? Well you're definitely need:
Some sort of server side language (php is a good choice) that allows you to use the input from the user (The POST request from the form he/she submits),
Check it for correctness / clean up the input / supported websites, etc.
Save this information somewhere (a database) so that you can get it back later.
The next steps would be to now get the information from the database and show it on your gallery page like you want it. This involves:
Getting whatever subset of information you want to display on a particular page from the database. Perhaps only cat related things or something, I don't know.
Just displaying it in your div's using a for loop or something.
.
foreach ($subset as $url) {
echo "<div>$url</div>";
}
Then the last step would be to convert these links into actual videos / images or whatever depending on the type of link. This can be done both client side using Javascript / server side using php or some other language.
This is going to be a lot of manual work, looking through every websites api and figuring out how to convert a url into a video for example. Images are easy but they may be hotlink protected so you might have to go through an API there as well.

When updating a url/html title dynamically, how can I get a facebook like button to register the change? (NOT the href in fb:like)

I have a webapp that changes the url using window.history.pushState() based on the content that is dynamically loaded. I also have a facebook like button on the page that corresponds to the current element/url (also changed dynamically), and I also change the title of the page (document.title).
When I click the button when it's running, the update on facebook says "User likes this link". The link is the correct link going to the right URL, but beneath it is a little message that says
Original Title
Original URL
How can I get the facebook update to instead read:
Updated Title
Updated URL
Best,
Sami
EDIT:
Alternatively, does anybody know how to change the message that the facebook like button posts? If I could create my own message, I could easily fix this.

It looks like this question has been answered before here Update FB:Like URL Dynamically using JavaScript
there are a number of different solutions given
Edit to answer the clarified question:
The problem is recounted here Facebook Share doesn't pick up title / description meta tags that are changed after page load
To summarize: Facebook scrapes and caches your page title and description, the information is not submitted by the client.
One way around this is to have your server parse the hash or query string, as your javascript would, and serve a page with the title you want.

Facebook select friends and post UIDs to custom URL

I'm building a facebook connect application, and here's the specific use case I'm trying to solve (using the Facebook Connect Javascript toolkit - http://github.com/facebook/connect-js)
There is a link on a page that a user clicks to "invite friends".
This click opens up a facebook friend selector widget (something like the multi-friend-selector), and the user selects friends from it.
The selected friends are POST-ed to a custom URL using an Ajax call and the selector widget goes away.
I'm able to do steps 1 and 2 using a fb:request-form and fb:multi-friend-selector. However, by default that posts to facebook and redirects the page. Is there a way to simply retrieve the UIDs of the selected users and then post them to a custom URL instead?

This topic is muddy water right now.
The current way is to implement your custom URL with an fb:req-choice in the content attribute of your fb:request-form as described here.
But as you can clearly see on that page - they are soon deprecating that element and changing how requests/invites work in general. So you can implement it like this for now, but will probably have to change it when they release more details about the new system.