Help us understand the problem. What is going on with this article?

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

前回までの記事は下記から確認ください。

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

今回は②で作った内容にオプション機能でSpreadsheet ID,シート名を指定させる機能を追加しています。

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

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

2020-10-06_20h06_34.png

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

2020-10-06_20h10_35.png

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

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とシート名の入力欄を設けています。

2020-10-06_01h20_00.png

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が有効か、
シート名が存在するか、日本語が入っていないかなどのチェック機能を持たせるべきだと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away