chromeの拡張機能のstorageで保存した内容を取り出せない

前提・実現したいこと

googlechromeの拡張機能でstorageを利用しています。
簡単に説明すると、

拡張機能のオプションで値（数列）を取得
値をストレージに保存
値をストレージから取り出して、グローバルのスコープにある配列に保存
変数に入った値をほかの関数で利用

このような流れのプログラムを実装したいと思っています。

発生している問題・エラーメッセージ

storage.syncのapiを使うと、値の保存はできるのですが、
それを取り出して、からの配列に保存することができません。

該当のソースコード

javascript
1// options.js
2$(function(){
3  $("#clickSubmit").on("click", function(){
4    // options.htmlのid="valueBox"となっているinputから入力値を取得します。
5    let pattern = $("#valueBox").val();
6    chrome.storage.sync.set({pattern}, function(){
7            $("#output").html("パターンを選択しました。");
8    });
9  });
10});
11
12// content.js(content_scripts)
13// オプション画面で03-1234-5678と入力した場合（主に電話番号を取りたい）。
14var patterns = []; // 取り出した要素を配列に入れていく。
15chrome.storage.sync.get(null, function(value){
16  console.log(value); // => {pattern: "03-1234-5678"}
17  patterns.push(value.pattern);
18});
19console.log(patterns); // コンソール上では [] が表示され、中に、0: "03-1234-5678"を確認できるが、以下のようになってしまう。
20console.log(patterns[0]); // => undefined

試したこと

トップレベルに定義したからの配列pattarnsをオブジェクト{}にして、pattarns["foo"]で呼び出してみたりしましたがよくわかりません。。。

思うに、chrome.storage.sync.get(......の中で、functionに渡した引数valueはしっかり返ってきているので、そのfunctionのスコープからvalueの中身を取り出せていないのが問題だと思っています。
しかし、トップレベルで配列patternsを定義しているのにもかかわらず、function内で配列に格納してから、外で呼び出せないのはなぜなのでしょうか。

javascript初心者です。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

chrome.storage.sync.get がコールバックを引数に取ることから分かる通り、非同期処理されているからでしょう。

追記

どうしてもコールバック処理したくないのであれば chorme.storage.sync.get をPromiseでラップした独自関数を作るのが良いと思います。
非同期処理に関しては JS の肝になるので一度しっかりと学習して理解を深めたほうが良いと思います。

js
1// Promise でラップ
2const getSyncStorage = (key = null) => new Promise(resolve => {
3  chrome.storage.sync.get(key, resolve);
4});
5
6getSyncStorage()
7.then(({ pattern }) => {
8  console.log(pattern); // > "03-1234-5678"
9});
10
11// おまけ： async/await パターン
12(async () => {
13  const { pattern } = await getSyncStorage();
14  console.log(pattern); // > "03-1234-5678"
15})();