如何将 Google Sheet 集成到 Chrome 扩展
jes*_*ess 4 google-chrome google-sheets google-chrome-extension
我成功检索到令牌。以下是我尝试使用 OAuth 的步骤。
创建您的 manifest.json
Run Code Online (Sandbox Code Playgroud){ "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 }该
Client_ID是可用的https://console.developers.google.com。
- 您需要创建 OAuth 客户端 ID 凭据并选择 Chrome 应用程序作为应用程序类型。确保应用程序 ID 与扩展程序的 ID 相似。然后复制生成的
clientID. 我已经从控制台启用了 Sheets API。
生成clientID.
这是
background.js：
Run Code Online (Sandbox Code Playgroud)chrome.identity.getAuthToken({ 'interactive': true }, getToken); function getToken(token) { console.log('this is the token: ', token); }
我将在这里添加其他文件：
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>
这是令牌的日志，已成功检索。
目前，我的问题是如何使用 GAPI 客户端访问电子表格。我也尝试过这个github post 中的方法，最终我遇到了这个错误：
CORS 政策已阻止在“ https://apis.google.com/js/client.js ”处访问来自“chrome-extension://fajgeimckmkdokmdbpkglamjpfcekcpp”的XMLHttpRequest ：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。
任何人都可以解决这个问题吗？
我解决了我的问题！！！
我忽略了文档OAuth2: Authenticate Users with Google 的这一部分。我好傻哈哈哈！
好的，这就是我将 Google Sheets 集成到我的扩展程序的方式。我用这个方法初始：
GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}
这是我的更新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
}
这是我的更新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)
});
}
我已成功记录了我的请求中的数据。
完毕！
| 归档时间： |
|
| 查看次数： |
1102 次 |
| 最近记录： |