オプション機能ってなに？

アイコンで右クリックを押すとオプションを追加できます。

今回はオプションをクリックすると、スプレッドシートIDとシート名を記載でき、
記入した内容をstrageへ保管をさせる機能を追加しました。

manifest.jsonの追加

manifest.jsonにはoption_uiの設定追加と
permissionsにstorageを追加。

manifest.json

{
  "name": "スプレッドシートからの情報取得",
  "version": "1.0",
  "manifest_version": 2,
  "description": "スプレッドシートからの情報取得ための拡張機能",
  "key": "{Developer Dashboardに登録ときに作成されるPUBLIC KEY}",
  "content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'",

  "browser_action":{
    "default_icon": "picture.png",
    "defalt_title": "title",
    "default_popup": "popup.html"
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "oauth2": {
    "client_id": "{GCPでOAuthを作成したときに発行されるID}",
    "scopes":[
      "https://www.googleapis.com/auth/spreadsheets"
    ]
  },
  "permissions": [
    "identity",
    "storage"
  ]
}

追加するファイルは2つです。

option.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>My Extantion</title>
</head>
<body>
  <div>▼スプレッドシートID</div>
  <input type="text" id="spreadsheetId" size="50"><br><br>
  <div>▼シート名(英語のみ)</div>
  <input type="text" id="sheetName"><br><br>

  <button id="save">Save</button>
  <script src="js/options.js"></script>

</body>
</html>

下記のようなhtmlでシンプルにスプレッドシートIDとシート名の入力欄を設けています。

option.js

option.htmlから呼び出すJavaScriptを記載したものです。

option.js

// storageからspreadsheetIdとsheetNameを取得して、テキストに入力する
document.addEventListener('DOMContentLoaded', function() {
  chrome.storage.sync.get(function(item) {
      document.getElementById('spreadsheetId').value = item.spreadsheetId;
      document.getElementById('sheetName').value = item.sheetName;
  });
});

// saveをクリックしたときにテキストに入っている情報をstorageへ保存
document.getElementById('save').addEventListener('click', function() {
  const spreadsheetId = document.getElementById('spreadsheetId').value;
  const sheetName = document.getElementById('sheetName').value;
  chrome.storage.sync.set({
    spreadsheetId: spreadsheetId,
    sheetName: sheetName
  }, function() {
    console.log('spreadsheetId:' + spreadsheetId);
    console.log('sheetName:' + sheetName);
    let div = document.createElement('div');
    div = document.querySelector('body').appendChild(div)
    div.textContent = 'saved';
  });
});

オプション設定自体を出すのはアイコンを右クリック ⇒ オプションから設定が可能です。
この設定により、ID、シートを直接していする必要がなくなったので、popup.jsも変更します。

popup.js


const API_KEY = '{GCPで作成したAPI KEY}';
const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
// 下記2行が必要なくなった
// const SPREADSHEET_ID = '{スプレッドシートのID}';
// const SPREADSHEET_TAB_NAME = '{シート名 or レンジ}';

// 変わりに下記を追加
chrome.storage.sync.get(function(item) {
  SPREADSHEET_ID = item.spreadsheetId;
  SPREADSHEET_TAB_NAME = item.sheetName;
});

以上で、スプレッドシートID,シート名をオプションから設定できる機能追加が完了です。

補足

不特定多数の人に使ってもらうためにはオプション設定で
入力したスプレッドシートIDが有効か、
シート名が存在するか、日本語が入っていないかなどのチェック機能を持たせるべきだと思います。

Chrome拡張機能でオートコンプリート付き検索でスプレッドシートから情報を引っ張る方法③

オプション機能ってなに？

manifest.jsonの追加

option.html

option.js

補足