Menu
I retrieved the token successfully. Here are the steps that I tried using OAuth.
Create your manifest.json
{
"name": "Sample Extension",
"version": "1.0",
"description": "Hello World",
"permissions": ["identity", "https://docs.google.com/spreadsheets/"],
"author": "Jess",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["file:///*"],
"js" : ["popup.js"]
}],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "images/get_started16.png",
"default_title": "This is a sample extension"
},
"oauth2": {
"client_id": "client_ID",
"scopes": [
"https://www.googleapis.com/auth/spreadsheets"
]},
"content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com/; object-src 'self'",
"manifest_version": 2
}
The Client_ID is available in https://console.developers.google.com.
clientID. I have enabled the Sheets API from the console.
Generated clientID.
Here's the background.js:
chrome.identity.getAuthToken({ 'interactive': true }, getToken);
function getToken(token) {
console.log('this is the token: ', token);
}
I will add the other files here:
pop.js
function popup(e) {
var henlo = "I\'m here for you :)";
alert("Him : " +henlo );
}
var plusBtn = document.querySelector('#clickMe');
plusBtn.addEventListener('click', popup);
pop.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100px;
height: 100px
}
button {
background-color:#577FC6;
color: #ffffff;
margin:0 auto;
border: 1px solid #000000;
display:block;
width:80px;
}
</style>
</head>
<body>
<span>Try and click the button for surprise :) </span>
<button id="clickMe">Click Me!</button>
<script src="popup.js"></script>
</body>
</html>
This is the log for the token, it is successfully retrieved.
My issue, for now, is how to use the GAPI client to access the spreadsheets. I have also tried the approach from this github post and eventually I encountered this error:
Access to XMLHttpRequest at 'https://apis.google.com/js/client.js' from origin 'chrome-extension://fajgeimckmkdokmdbpkglamjpfcekcpp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Could anyone have a workaround for this?
973
I solved my problem!!!
I overlooked this part of the documentation OAuth2: Authenticate Users with Google. I'm so stupid hahaha!
Alright, this is how I integrate Google Sheets to my Extension. I used this method for initial:
GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}
This is my updated manifest.json:
{
"name": "Sample Extension",
"version": "1.0",
"description": "Hello World",
"permissions": ["identity", "https://docs.google.com/spreadsheets/"],
"author": "Jess",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["file:///*"],
"js" : ["popup.js"]
}],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "images/get_started16.png",
"default_title": "This is a sample extension"
},
"oauth2": {
"client_id": "client_ID",
"scopes": [
"https://www.googleapis.com/auth/spreadsheets",
"https://www.googleapis.com/auth/drive",
"https://www.googleapis.com/auth/drive.readonly",
"https://www.googleapis.com/auth/drive.file",
"https://www.googleapis.com/auth/spreadsheets.readonly"
]},
"content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com/; object-src 'self'",
"manifest_version": 2
}
This is my updated background.js:
chrome.identity.getAuthToken({ 'interactive': true }, getToken);
function getToken(token) {
console.log('this is the token: ', token);
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range},
init)
.then((response) => response.json())
.then(function(data) {
console.log(data)
});
}
I have successfully logged the data from my request.
Done!
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With