javascriptの変数の値を変えたい

Question

###前提・実現したいこと
youtubeを新しいウインドウで開くアドオンを作っています。ウインドウサイズを保存してその大きさのウインドウを開きたいんですがうまくできません。ウインドウは開けるんですがwidthとheightの値が変わらないので保存したサイズにならない。gettingWidthの中のwidthの値を変えてもbrowser.windows.createのwidthが変わらないので変えたいです。
###該当のソースコード

function onGot(tabInfo) {
  const tabURL = tabInfo.url;
  const YouTubewatchURL = 'https://www.youtube.com/watch';
  if (tabInfo.url.match(YouTubewatchURL)) {
    browser.windows.onCreated.addListener(() => {
      newWindow(tabURL);
    });
    let width = 800;// 初期値
    let height = 450;// 初期値
    const gettingWidth = browser.storage.local.get('width');
    gettingWidth.then(item => {
      if (item.width) {
        width = item.width;
      }
      return width;
    });
    const gettingHeight = browser.storage.local.get('height');
    gettingHeight.then(item => {
      if (item.height) {
        height = item.height;
      }
      return height;
    });
    const popupURL = browser.extension.getURL('popup/popup.html');
    const creating = browser.windows.create({
      url: popupURL,
      type: 'panel',
      width: width,// ここの数値を変えたい
      height: height,// ここの数値を変えたい
    });
    creating.then();
  }
}

###試したこと
thenやreturnのことを調べたけどさっぱりわからない。

Comments

[toutou]

ウィンドウを開きたいのでしょうか？それともreturnの使い方が知りたいのでしょうか？

[nekojiro]

gettingWidthの中のwidthの値を変えてもbrowser.windows.createのwidthが変わらないので変えたいです。説明が下手でごめんなさい

Answer 1

width = item.width; や height = item.height; で値を入れてると思いますが、 then の中は非同期で実行されているので、

 const creating = browser.windows.create({
      url: popupURL,
      type: 'panel',
      width: width,// ここの数値を変えたい
      height: height,// ここの数値を変えたい
    });

コレが実行されるときにはまだ結果が入っていないのだと思います

試してはいないですがこれでいけないでしょうか？

async function onGot(tabInfo) {
  const tabURL = tabInfo.url;
  const YouTubewatchURL = 'https://www.youtube.com/watch';
  if (tabInfo.url.match(YouTubewatchURL)) {
    browser.windows.onCreated.addListener(() => {
      newWindow(tabURL);
    });
    let width = 800;// 初期値
    let height = 450;// 初期値
    const gettingWidth = await browser.storage.local.get('width');
    if(gettingWidth && gettingWidth.width){
      width = ~~gettingWidth.width
    }
    const gettingHeight = await browser.storage.local.get('height');
    if(gettingHeight && gettingHeight.height){
      height = ~~gettingHeight.height;
    }
    const popupURL = browser.extension.getURL('popup/popup.html');
    const creating = browser.windows.create({
      url: popupURL,
      type: 'panel',
      width: width,// ここの数値を変えたい
      height: height,// ここの数値を変えたい
    });
    creating.then();
  }
}

width/height の取得を await でまつようにしました。

---

Promise 版

function onGot(tabInfo) {
  const tabURL = tabInfo.url;
  const YouTubewatchURL = 'https://www.youtube.com/watch';
  if (tabInfo.url.match(YouTubewatchURL)) {
    browser.windows.onCreated.addListener(() => {
      newWindow(tabURL);
    });
    let width = 800;// 初期値
    let height = 450;// 初期値
    const gettingWidth = browser.storage.local.get('width');
    const gettingHeight = browser.storage.local.get('height');
    const popupURL = browser.extension.getURL('popup/popup.html');
    Promise.all([gettingWidth, gettingHeight]).then(results => {
      if (results[0] && results[0].width) {
        width = ~~results[0].width;
      }
      if (results[1] && results[1].height) {
        height = ~~results[1].height;
      }
      const creating = browser.windows.create({
        url: popupURL,
        type: 'panel',
        width: width,// ここの数値を変えたい
        height: height,// ここの数値を変えたい
      });
    })
  }
}

---

if 文抜けていたのを修正しました

Promise版追加しました

Comments

[nekojiro]

awaitを付けてみたんですが動かなくなりました

[ryls-nmm]

どんなエラーがでていますか？

[ryls-nmm]

if文が抜けていたのを修正しました
データが無い場合にエラーになっていたはずです

[nekojiro]

ESlintがawaitのところがParsing error: The keyword 'await' is reserved (Fatal)というエラーだと言ってます

[ryls-nmm]

新しい機能なのでESlintが未対応か使えるよう設定されていないのではないでしょうか
ESlintでなくブラウザでエラーなく動くかたしかめてください

拡張機能ならIEのような古いブラウザで動かないことを気にする必要はありませんし、タグにあるChromeとFirefoxの最新版ならawaitが使えるはずです

[nekojiro]

一番最初の行に書いてあるasyncって何ですか？

[ryls-nmm]

async関数の中で、awaitが使えるようになります
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

[nekojiro]

SyntaxError: await is only valid in async functionsってエラーが出ました

[ryls-nmm]

async を書いていないということはないですか？
エラーは「async 関数の中でしかawaitが使えません」というものです

[nekojiro]

asyncつけたらエラーがたくさん出ました
18:39:08.460 Warning: attempting to write 4410 bytes to preference extensions.bootstrappedAddons. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
18:39:08.469 Warning: attempting to write 5123 bytes to preference extensions.xpiState. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
18:39:08.581 1489311548581 [e-mail] WARN Please specify whether you want browser_style or not in your browser_action options.
18:39:08.585 Warning: attempting to write 4138 bytes to preference browser.uiCustomization.state. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.

[nekojiro]

新しいウインドウを開こうとするとError: Type error for parameter createData (Error processing width: Expected integer instead of "1280") for windows.create.って言われます

[ryls-nmm]

保存したデータに正しい数値が入っていないのかもしれません
asyncが原因とは思えないので一応Promise版を書いてみました

[ryls-nmm]

こちらでも同じエラーになっていますか？

[ryls-nmm]

browser.windows.create
↑の直前で
console.log(width, height)
をしてNaNや極端に大きな値など入っていないか確認してみてください

[ryls-nmm]

> Expected integer instead of "1280"
数値型じゃなくて文字列型がはいってるのではないですか？
「~~width」などで数値型にキャストすればちゃんと動くかもしれません

[nekojiro]

console.log(width, height)書いてみたんですがさっきと同じようなエラーが出てコンソールは表示されませんでした。保存したあるのはこんなかんじです{"width":"1280","height":"720"}

[ryls-nmm]

やっぱり文字列になっているようです
解答のコード更新してあるのでもう一度ためしてもらえますか？
width と height に代入するところで数値型に変換しています

[nekojiro]

19:05:06.777 Warning: attempting to write 4410 bytes to preference extensions.bootstrappedAddons. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
19:05:06.786 Warning: attempting to write 5123 bytes to preference extensions.xpiState. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
19:05:06.912 1489313106912 [e-mail] WARN Please specify whether you want browser_style or not in your browser_action options.
19:05:06.917 Warning: attempting to write 4138 bytes to preference browser.uiCustomization.state. This is bad for general performance and memory usage. Such an amount of data should rather be written to an external file. This preference will not be sent to any content processes.
またエラーがたくさん出ました

[ryls-nmm]

これらはFirefoxでstorageを使うと出ることのある警告のようです。
manifest や全体のコードがわからないので対処方法はわかりませんが、エラーでなく警告なのでウィンドウを開くことには影響ないかと思います

> Error: Type error for parameter createData (Error processing width: Expected integer instead of "1280") for windows.create.

こっちのエラーはどうなったのでしょうか？

[nekojiro]

動きました保存してある数字を変えたてもしっかり変わりました。エラーが出てるからウインドウは開かないと思ってました。ありがとうございます。

Answer 2

このコードってどこから持ってきたものでしょうか
何かしらの解説がのってると思うのですが

Comments

[nekojiro]

僕が書きました