12

I am making my first chrome extension. My idea is to call Google Sheets API to append a row in a google spreadsheet from my extension. I am referring this link for the same and successfully tried the API to append row in my desired sheet.

Now I am trying to do the same from my chrome extension code files. How do you use the same sample code for your extension as our extension will not allow inline js. Any sample or basic boilerplate would help.

Many thanks in advance.

Shyam Kansagra
  • 892
  • 12
  • 24

3 Answers3

8

You are receiving that error because of the inline JavaScript.
Chrome Extensions do not allow any inline scripting. Read Here.

Inline JavaScript will not be executed
Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers (e.g. ).

So any JavaScript must come from its own .js file.
It is common to use popup.html and all JavaScript for that page in popup.js.
Same goes for options.html and options.js.

Helpful Links:
Chrome Extension and Google Sheets
Tutorial for using OAuth

Jay A. Little
  • 3,239
  • 2
  • 11
  • 32
  • Thank you for your answer. I knew I should write onclick etc in js only...but the thing is, I dont know how to do that 'async' and 'defer' keywords. And how do I use onload for a script src in my js? – Shyam Kansagra Jan 19 '18 at 09:29
  • I am trying to write `` in js so that there wont be any inline js in html file. How do I convert this to js so that I can remove this tag from html. – Shyam Kansagra Jan 19 '18 at 09:42
  • This is just to fix your content security policy error. I'm not sure you actually want to use `https://apis.google.com/js/api.js` like this to access Google Sheets. I'll add some links to my answer to help with your follow-up question. – Jay A. Little Jan 19 '18 at 09:53
  • Hmm, I am not sure whether `https://apis.google.com/js/api.js` is right way or not, but I found that on this [link](https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append) and using the same. – Shyam Kansagra Jan 19 '18 at 09:59
  • I see where you get it from. Sorry I can't be more helpful, I suggest posting a new question, asking specifically for how to use this same method as demonstrated from that site but inside of a Chrome Extension, understanding now that you cannot have inline JS like they show. – Jay A. Little Jan 19 '18 at 10:17
  • Oh okay. I'll post a new question. Meanwhile the links you shared are also helpful. Thank you so much :) – Shyam Kansagra Jan 19 '18 at 10:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163477/discussion-between-shyam-kansagra-and-jay-a-little). – Shyam Kansagra Jan 19 '18 at 10:29
3

https://github.com/malik55khan/speardsheet-reader/

Demo: https://www.loom.com/share/d7d432c513a44b05a615fa0bd170fb23

Create a client-auth key in google console and select chrome extension. after that push the project id and save it. then you will get client_id. Next step create a api key.

add a new project. - select google cloud or Spreadsheet - Enable API.

Hope it will be more helpful.

MALIK KHAN
  • 41
  • 1
  • 1
    This uses eval(), so it isn't compatible with manifest v3. Do you (or anybody else) have a hint on how to do this in manifest v3? – César Rodriguez Aug 24 '22 at 01:49
  • @CésarRodriguez Did you find a way to connect sheets/docs API with chrome extension in manifest v3? – Parth Kapadia Nov 08 '22 at 06:02
  • 1
    I connected my chrome extension (manifest v3) with google docs - Check this https://stackoverflow.com/a/74358255/10217754 – Parth Kapadia Nov 08 '22 at 09:23
  • Yep. Google implemented a Identity API (https://developer.chrome.com/docs/extensions/reference/identity/), which lets you handle authenticatoin from the user logged in the browser. – César Rodriguez Nov 08 '22 at 18:15
0

I'm assuming your problem is to fetch a valid API key (because it was the tricky part for me). If you have other problem, just comment below and I'll give a more detailed example.

I managed to do it using the Identity API, documented here. With it, you can get identity data from the user logged in the browser, including a token. All I needed to do was:

//manifest.json
//...
"permissions": [
    "identity",
    //...
],
//...
"key": "__Really_long_gibberish_token_string__",

"oauth2": {
    "client_id": "__some_token_string__.apps.googleusercontent.com",
    "scopes": [ "https://www.googleapis.com/auth/spreadsheets.readonly" ]
}

Everything is linked to a google project, so, details about key and clientId generation can be found here. And created a function to retrieve the token:

// This function is inside a component which ends up bundled in my worker.js; I didn't tried it in content scripts, nor popups.
async function fetchGoogleToken() {
    const tokenObj = await chrome.identity.getAuthToken({interactive: true})
    return tokenObj.token
}

The interactive: true option is wonderful. If the user isn't logged in the browser, it will show a login form and authorization permission confirmation window for you.

This is the token I sent to the API.

César Rodriguez
  • 296
  • 5
  • 16