Chrome extension that I'm developing requires users to authenticate with Gmail account.
However, if a user doesn't want to authorize, I've stopped the authorization window from appearing. However, some background scripts seem to be running. How do I make sure that the extension stops functioning completely?
You must initiate your extension in a callback called when the user is authenticated. For example, using oAuth2:
function onAuthorized() {
var url = 'https://www.googleapis.com/oauth2/v1/userinfo';
var request = {
'method': 'GET',
'parameters': {
'alt': 'json'
}
};
// Declare the callback
oauth.sendSignedRequest(url, callback, request);
};
and the callback:
function callback(resp, xhr) {
// ... Process text response ...
}).done(function (data) {
// Your used is authenticated...
// ==>Init your extension HERE
});
}
A background page with "persistent": false will be unloaded after a few seconds of inactivity. Stop doing work and the right thing will happen.
Related
I'm building a WebApp that creates a Google Document from a template and contains some user supplied data as well as data fetched from a 3rd party service. Since all of the Class (DriveApp, DocumentApp, etc) methods make a request to the Google server, a server glitch could cause a simple statement like var doc = DocumentApp.openById(DOC_ID); to fail, throw an error and stop the entire process dead in its tracks... without the user having any idea why everything appears to be "frozen" (unless he is savvy enough to check the console).
For that reason, would it be appropriate to wrap any/all functions using those methods in a try/catch? Something like:
function createDoc(DOC_ID) {
try {
var doc = DocumentApp.openById(DOC_ID);
DriveApp.someMethod(...);
doc.someOtherDocumentMethod();
...
} catch(e) {
handleServerError(e);
return false;
}
return doc;
}
or is there a better way to handle any errors that may be out of the developer's control?
EDIT
Here's the request I send from my HTML page...
$('form').submit(function(e) {
e.preventDefault();
var obj = $('form').serializeObject();
var gurl = 'https://script.google.com/macros/s/AKfycbzmhaub3ojPARA-B-Y2uVC2BJZPaRvbgMwMTH9pd7R9aHuAD5M/exec';
$.ajax({
url: gurl,
type : "GET",
data: obj,
dataType: 'jsonp',
success : function (data, status, xhr) {
console.log("success");
console.log(data);
},
complete : function (xhr, status) {
console.log("complete");
}
});
});
I'm currently unsuccessfully trying to make my PWA installable. I have registered a SertviceWorker and linked a manifest as well as I am listening on the beforeInstallPromt event.
My ServiceWorker is listening to any fetch event.
My problem is, that the created beforeInstall banner is just being shown on Chrome desktop but on mobile I get a warning in Chrome inspection tab "Application" in the "Manifest" section:
Installability
Service worker does not have the 'fetch' handler
You can check the message on https://dev.testapp.ga/
window.addEventListener('beforeinstallprompt', (e) => {
// Stash the event so it can be triggered later.
deferredPrompt = e;
mtShowInstallButton();
});
manifest.json
{"name":"TestApp","short_name":"TestApp","start_url":"https://testapp.ga/loginCheck","icons":[{"src":"https://testapp.ga/assets/icons/launcher-ldpi.png","sizes":"36x36","density":0.75},{"src":"https://testapp.ga/assets/icons/launcher-mdpi.png","sizes":"48x48","density":1},{"src":"https://testapp.ga/assets/icons/launcher-hdpi.png","sizes":"72x72","density":1.5},{"src":"https://testapp.ga/assets/icons/launcher-xhdpi.png","sizes":"96x96","density":2},{"src":"https://testapp.ga/assets/icons/launcher-xxhdpi.png","sizes":"144x144","density":3},{"src":"https://testapp.ga/assets/icons/launcher-xxxhdpi.png","sizes":"192x192","density":4},{"src":"https://testapp.ga/assets/icons/launcher-web.png","sizes":"512x512","density":10}],"display":"standalone","background_color":"#ffffff","theme_color":"#0288d1","orientation":"any"}
ServiceWorker:
//This array should NEVER contain any file which doesn't exist. Otherwise no single file can be cached.
var preCache=[
'/favicon.png',
'/favicon.ico',
'/assets/Bears/bear-standard.png',
'/assets/jsInclude/mathjax.js',
'/material.js',
'/main.js',
'functions.js',
'/material.css',
'/materialcolors.css',
'/user.css',
'/translations.json',
'/roboto.css',
'/sw.js',
'/'
];
//Please specify the version off your App. For every new version, any files are being refreched.
var appVersion="v0.2.1";
//Please specify all files which sould never be cached
var noCache=[
'/api/'
];
//On installation of app, all files from preCache are being stored automatically.
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(appVersion+'-offline').then(function(cache) {
return cache.addAll(preCache).then(function(){
console.log('mtSW: Given files were successfully pre-cached')
});
})
);
});
function shouldCache(url) {
//Checking if url is market as noCache
var isNoCache=noCache.includes(url.substr(8).substr(url.substr(8).indexOf("/")))||noCache.includes((url.substr(8).substr(url.substr(8).indexOf("/"))).substr(0,(url.substr(8).substr(url.substr(8).indexOf("/"))).indexOf("?")));
//Checking of hostname of request != current hostname
var isOtherHost=url.substr(8).substr(0,url.substr(8).indexOf("/"))!=location.hostname&&url.substr(7).substr(0,url.substr(7).indexOf("/"))!=location.hostname;
return((url.substr(0,4)=="http"||url.substr(0,3)=="ftp") && isNoCache==false && isOtherHost==false);
}
//If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener('fetch', function(event) {
//Trying to answer with "online" version if fails, using cache.
event.respondWith(
fetch(event.request).then(function (response) {
if(shouldCache(response.url)) {
console.log('mtSW: Adding file to cache: '+response.url);
caches.open(appVersion+'-offline').then(function(cache) {
cache.add(new Request(response.url));
});
}
return(response);
}).catch(function(error) {
console.log( 'mtSW: Error fetching. Serving content from cache: ' + error );
//Check to see if you have it in the cache
//Return response
//If not in the cache, then return error page
return caches.open(appVersion+'-offline').then(function (cache) {
return cache.match(event.request).then(function (matching) {
var report = !matching || matching.status == 404?Promise.reject('no-match'): matching;
return report
});
});
})
);
})
I checked the mtShowInstallButton function. It's fully working on desktop.
What does this mean? On the Desktop, I never got this warning, just when using a handheld device/emulator.
Fetch function is used to fetch JSon manifest file. Try reading google docs again.
For adding PWA in Mobile you need manifest file to be fetched which is fetched using service-worker using fetch function.
Here is the code :
fetch('examples/example.json')
.then(function(response) {
// Do stuff with the response
})
.catch(function(error) {
console.log('Looks like there was a problem: \n', error);
});
for more about fetch and manifest try this.
I'm building a Chrome extension that retrieves data from a user's Google Drive and inserts it into an arbitrary page. I've gotten the OAuth to work, but I can't seem to get access to the token (which I can see is set via chrome://identity-internals).
The issue here is that when the Chrome extension nav bar button is clicked, I fire a request to execute test.js. test.js apparently has no concept of chrome.identity, but it needs that information to make an XHR request. I've tried
Storing the auth token in localStorage so that test.js can retrieve it (no luck)
Nesting the test.js inside the AuthToken request (not sure how to actually pass the variable into the file and retrieve it).
Are there any ideas?
Thank you in advance!
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// This works
alert(token);
// This doesn't work
localStorage.setItem("authtoken", token);
});
chrome.tabs.executeScript(tab.id, {
// This file needs access to the authtoken
// but within test.js, chrome.identity is undefined.
"file": "test.js"
}, function () {
});
});
localStorage (effectively it's window.localStorage) is stored per origin (scheme + hostname + port number), and extensions have their own one in privileged components that can access restricted chrome.* API (some are listed as exceptions in content scripts docs), namely popup and background/event page, options, and other pages with a URL like chrome-extension://abc..... (abc... is an extension ID).
localStorage of a web page belongs to its own origin such as https://www.google.com.
Content scripts run in the context of web page, so they can't access extension's localStorage directly. They see localStorage of their web page's origin only.
Solution 1: use another executeScript to set a variable that will be used by the content script injected from a file:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.identity.getAuthToken({interactive: true}, function(token) {
chrome.tabs.executeScript(tab.id, {
code: 'var token=' + JSON.stringify(token) + ';'
}, function() {
chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
});
});
});
});
JSON-serialization is used in order not to bother escaping special characters and be able to pass objects.
Solution 2: use messaging API to pass data once the content script is injected:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.identity.getAuthToken({interactive: true}, function(token) {
chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
chrome.tabs.sendMessage(tab.id, {token: token});
});
});
});
content script:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.token) {
document.getElementById('token').textContent = msg.token;
//nowYouCanProcessToken(msg.token);
}
});
Solution 3: use chrome.storage API accessible both from a content script and the abovementioned privileged parts of an extension.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.identity.getAuthToken({interactive: true}, function(token) {
chrome.storage.local.set({token: token}, function() {
chrome.tabs.executeScript(tab.id, {file: "test.js"}, function() {
});
});
});
});
content script:
chrome.storage.local.get('token', function(data) {
if (data.token) {
document.getElementById('token').textContent = data.token;
//nowYouCanProcessToken(data.token);
}
});
I'm building an app using Microsoft's new HTMl5 framework for Metro apps. I've created a form that I use to submit GET data. The problem is, clicking the "Run Query" (Submit) button on the app opens a browser window. What are some ways that I can submit the data in the GET method without opening a browser window.
I've tried using jQuery to do so but with little yield. It throws the message "jQuery" is not defined.
Is there any HTML I can use, or, better yet, something I can add into default.js?
As requested, jQuery I'm using:
jQuery(document).ready(function () {
jQuery('.ajaxform').submit(function () {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
for (var id in data) {
jQuery('#' + id).html(data[id]);
}
}
});
return false;
});
});
Get the values from your form, save it in an object, encode it using javascript function and use xhr,
Get form values using js, say
var b=document.getElementById(textboxname).value;
var params={
parameter:b,
}
In order to encode your parameters you can use the following javascript function,
function formatParams(y) {
var queryStr = "";
for (var propertyName in y) {
var val = y[propertyName];
queryStr += propertyName + "=" + encodeURI(val) + "&";
}
return queryStr.slice(0, -1);
}
Call your web service using WinJS.xhr
WinJS.xhr({
type: "get/post",
url: "your URL",
data: formatParams(params),
headers: { "Content-type": "application/x-www-form-urlencoded" }
}).done(function (response) {
var json = JSON.parse(response.responseText);
//process accordingly
}
Im assuming you are getting JSON response from your web service.
I'm guessing here you are referring to an external script for jQuery.
Since winjs is running under different security restrictions than a typical web app in a browser your scripts must be local.
Since you are already using jquery - assuming version 2.0 or greater which is Win8/winjs compatible - make sure you have included a reference to jquery LOCALLY in your project and NOT from an external website, you can just use $(document) instead of jQuery(document).
ie:
<script src="/scripts/jquery-2.0.0.js" /> (or whatever your version is)
and make sure you have the files locally. You can just go in Visual Studio to Tools->Library Package Manager->Package Manager Console and type in
install-package jquery
I have a problem when developing a single page web app.
When jQuery send json to HTTPPOST action:
$('#user_dialog .create').click(function () {
var user = getInfoUser();
$.ajax({
url: '#Url.Action("Create", "User")',
async: false,
type: 'POST',
data: JSON.stringify(user),
datatype: 'json',
contentType: 'application/json;charset=utf-8',
success: function (data) {
$('#user_dialog').dialog("close");
}
});
});
My HTTPPOST action in controller will handle the request
[HttpPost]
public String Create(UserAddViewModel model)
{
try
{
// TODO: Add insert logic here
return JsonConvert.SerializeObject(true);
}
catch
{
return JsonConvert.SerializeObject(false);
}
}
And my jQuery success callback function will be fired and data 'true' will be received.
But the problem now is after this, the page will be redirect to /User/Create view page
I don't want it redirect to the page, i just want to handle the UI by my jQuery code.
Is that because it is HTTPPOST action?
What is the actual reason and how to fix it?
Presumably, the thing you're clicking is a URL. You're not preventing the default event (loading the url) from occuring in your click event
$('#user_dialog .create').click(function (event) {
event.preventDefault();
//rest of function
Whenever a click event finishes, the default event (loading a URL if it's a link, submitting a form if it's a submit button, toggling a checkbox, etc.) will occur next. In order to prevent this you must do it explicitly either using preventDefault() or by returning false. See http://api.jquery.com/event.preventDefault/ for the documentation.