I am developing a web app on App Script (to use Google APIs). I have a chrome extension that works alongside the web app so that I can send information about the browser.
I am using a content script that initializes once the Web App loads. I want to simply send a message from the extension to the web app through the content script. However, DOM doesn't work because App Script uses iFrames. Here is the code from my actual web app:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
</body>
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</html>
I was trying to use DOM to send the pageId to the input element and by having a change in the value, the update function would send the information.
However, this is the structure I receive on my browser:
Chrome Dev Tools
Am I thinking correctly? Or is editing the DOM both dirty and unfeasible? Is there another way?
UPDATE:
I have found the actual document HTML elements by looking deeper down the tree:
New Console
But if the element with id="pageId" is down there, why does it return null when I call it?
UPDATE:
I noticed times when it returns null, and sometimes where the element is detected:
Newest Console
This works for me as a dialog:
Typically I would expect that if this will run as a dialog it will also run as a webapp with the addition of a doget();
gs:
function runmydialog() {
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'test');
}
function update(msg) {
SpreadsheetApp.getUi().alert(msg);
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</body>
</html>
Dialog:
Alert:
I noticed that your script is not inside the body. I don't know if that makes a difference.
Related
I want to have my browser tab title for Gmail show the Subject for the current email because I have software that helps time tracking by capturing tab titles. Unfortunately, it shows Inbox (6) - my.name#mycompany.com all the time.
I see Change Title With Javascript provides javascript to change the tab title to alternative text. How would I get the Subject of the current message in Gmail in a Gmail add-on?
assuming you are retrieving a message of type GmailMessage and that you are running your js client side in an HTML context such as a webapp you could:
create a function in app script that calls the method getSubject()
Serve HTML
call backend function with google.script.run
call a success handler that changes title when async function is completed with success.
in your HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(subject) {
document.title = subject
}
google.script.run.withSuccessHandler(onSuccess)
.getSubject();
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
and in your .gs
getSubject(){
//get your message here
return (message.getSubject());
}
REFERENCES
Serving HTML on web app
google.script.run
My problem is simple. All the possible solutions I searched for online did not address my question.
Google's developer website for Class google.script.run (https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler) showcased the method myFunction(...) (any server-side function).
I have copied their exact code and html code and deduced that the function doSomething() does not execute. Nothing gets logged.
I intend to use this to execute an HTML file so that I could play a sound file. I could do this so far with a sidebar popping up from the side, as discussed in this thread: Google Script: Play Sound when a specific cell change the Value.
However, this code provided by Google does not work. Why?
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function doSomething() {
Logger.log('I was called!');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
</script>
</head>
<body>
</body>
</html>
By using google.script.run you are calling a server-side Apps Script function.
https://developers.google.com/apps-script/guides/html/reference/run
Please double-check that you follow the following steps to do it correctly:
Please make sure that you put the html part of the code in a separate HTML file (which you create through File->New->HTML file) with the name corresponding to the one you are calling in HtmlService.createHtmlOutputFromFile() - in your case Index.html
Select “doGet” as the function to be run.
Deploy the script as a web app - this is the requirement for using Apps Script HTML service. Please find the instructions here: https://developers.google.com/apps-script/guides/web
Make sure that every time after you implement changes in your code, you deploy the script as a NEW project version. This is necessary to update the changes.
Open the current web app URL you obtain after updating your version, to open your html output.
In your case only an empty HTML file will be opened, to test functionality - insert some text in your HTML body, to test the correct functionality. The latter can be confirmed by viewing the Logs after running the code.
I am having an issue where I created a custom dialog that displays some very basic HTML output using the HTML Service. This works well in Google Sheets, but when I embed the editable google sheet into another website, the content will not load.
Using the inspector/console, I have learned that the issue may be related to "Refused to display {link} in a frame because it set 'X-Frame-Options' to 'sameorigin'." I have referenced https://developers.google.com/apps-script/guides/html/restrictions and believe I have followed all relevant instructions, but I have been unable to resolve this issue for a few weeks now
I am not a developer, just dabbling, so even just resources to learn more about how to approach this issue would be very welcome.
Below is my code. Thank you for your time!
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
</body>
</html>
GS:
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('showDialogPage')
.setWidth(400)
.setHeight(300)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
I'm just learning google script and want to start by making a simple hello world. I have done google's tutorial and when I click "test this code" on the publish web app popup, the code runs and I get my basic hello world result. Great. But When I paste the provided URL into the browser or embed that same URL into google sites, I just get a blank page.
How do I run an web app? Am I missing something?
code.gs:
function doGet() {
var html= HtmlService
.createTemplateFromFile('Index');
html.name = 'David';
return html.evaluate();
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?=name?>!</b>
</body>
</html>
Coming from a basic PHP background, I'm used to just going to the URL of the .php file and bang, away it goes... I'm so confused.
https://stackoverflow.com/a/40843413/6288442
Google had just recently enabled this feature. It has been under a
'feature request' status for quite a long time. Link here
You can now explicitly define X-Frame-Options.
To allow embedding under another domain, the option should be
HtmlService.XFrameOptionsMode.ALLOWALL
Google documentation on the subject:
https://developers.google.com/apps-script/reference/html/html-output#setXFrameOptionsMode(XFrameOptionsMode)
Example:
function doGet() {
return HtmlService.createTemplateFromFile('form.html')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); }
Hope this helps!
I think this should work
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?!=name?></b>
</body>
</html>
https://developers.google.com/apps-script/guides/html/templates#force-printing_scriptlets
Name of file should also be exactly same
I think Index and index won't work
A short time, looking at the issue of Chrome Extension Development.
I use jQuery and plugins. But not selecting DOM elements with jQuery.
example code here; (background.html)
<html>
<head>
<script>
function alertValue() {
var a = $("#divName").val();
alert(a);
}
chrome.browserAction.onClicked.addListener(alertValue);
</script>
</head>
</html>
As a result, returns undefined.
If I understood correctly you want to read a value of some element on a current page when a user clicks a browser action icon.
To do this you need to use a content script to actualy read the value on a page, and message passing to communicate between a background page and a content script.