@k5time (k5 time)posted at 2023-04-02

chrome上で選択したテキストをgoogleTasksの指定したリストに登録するchrome拡張機能を作りたい

Q&A

JavaScript Chrome chrome-extension Chrome拡張 GoogleCloud

解決したいこと

chrome上で選択したテキストを自分のgoogleTasksの指定したリストに登録するchrome拡張機能を作りたいと
考えていますが難航しています。解決方法を教えて下さい。

発生している問題・エラー

当方はプログラミングは初心者で独学です。
qiita等を見ながら、自力でできたのは下記の点までです。

（1）コンテキストメニュー→ chrome上で選択したテキストをconsole.logで出力
参考：https://youtu.be/dQ3eQjlpL2E

（2）OAuth 2.0で認証 → chrome拡張機能上で自分のgmailアドレスを取得
参考：https://youtu.be/OmTR8ZiPayc

ここから前進するために下記の問題に対処する必要があると考えています。
（1-1）console.log をどうにかして tasksAPI に送る

そのために、OAuth 2.0関連の理解を深め下記の問題に対処する必要があると考えいています。
（2-1）gmailアドレスの取得にとどまっている認証部分を googleTasks にも及んでいるかを確認する
（2-2）chrome拡張機能上で取得したテキストを tasksAPI のメソッドで googleTasksに登録するコードを作成する

該当するソースコード

manifest.json

{
  "name": "chrome_to_gtd",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is Chapter chrome_to_gtd",
  "permissions": [
    "identity",
    "contextMenus"
  ],
  "background": {
    "service_worker": "background.js"
   },
  "action": {
    "default_title": "I am chrome_to_gtd",
    "default_popup": "popup.html",
    "default_icon": {
      "32": "chrme_to_gtd.png"
    }
  },
  "oauth2": {
    "client_id": "●●●●●●●●",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email"  //← googleTasksのURLがある？わかりませんでした
    ]
  },
  "key" : "●●●●●●●●"
}

background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "chrome_to_gdt",
    title: "chrome_to_gtd \"%s\"",
    type: "normal",
    contexts: ["selection"]   
  }); 
}); 
  
chrome.contextMenus.onClicked.addListener((info) => {
  console.log(info.selectionText);
  chrome.tabs.create({
    url: "http://twitter.com/search?q=" + encodeURIComponent(info.selectionText)
  });
});

myscript.js

const elmText = document.getElementById("text");

chrome.identity.getAuthToken({ interactive: true }, function (token) {
  console.log(token);
  if (token == null) {
    elmText.value = "Login fail.";
    return;
  }

  elmText.value = "Login success.";
  let init = {
    method: 'GET',
    async: true,
    headers: {
      Authorization: 'Bearer ' + token,
      'Content-Type': 'application/json'
    },
    'contentType': 'json'
  };
  fetch(
    'https://www.googleapis.com/oauth2/v1/userinfo?', init)  //← googleTasksのURLがある？わかりませんでした
    .then((response) => response.json())
    .then(function (data) {
      console.log(data)
      elmText.value += "\n\nemail:" + data.email;
    });
});

popup.html

<!DOCTYPE html>
<html>
<style type="text/css">
  * {
    font-size: 150%;
  }
</style>

<body>
  <textarea id="text" cols="32" rows="4"></textarea><br>
  <script src="myscript.js"></script>
</body>

</html>

自分で試したこと

色々調べてはみましたが、よくわかりませんでした
ご指導、よろしくお願いいたします。

Are you sure you want to delete the question?