仕事を辞めたい、怠け者だからな

仕事を辞めたいとグダグダ言いながらも、やめる手順が面倒だということで結局やめない「からな」の面倒嫌いブログです。日々のことなり、色々書いていきます。自由気まま、やりたいことばかりやっちゃう。

仕事を辞めたい、
怠け者だからな

メインブログです。
ぐだぐだしつつも、
やりたいことに全力全身!

  最高の出会いを求めて
自身の最高の出会いまでの道のり、
方法を書いていきます。

  標準体重を目指して
標準体重を目指して奮闘する!
ダイエットグッズ実践含みます。

【Chrome拡張】storageの値受け渡しや、Popup.htmlへのイベントの追加方法

大文字小文字も適当で、まぁこんなんで良いのかって感じですが
良く分からなくなることも多い為、備忘録として。
Popupの値を保持して、Popupのボタンを押した場合には
特定ページを開いて特定IDの部分に自動で書き込みたい
それだけなのに3日以上かかってしまった。

popup.html

<input type="button" value="新しいタブを開く" id="TabOpen">
<textarea id="Naiyou" rows="10" cols="100"></textarea>
<script src="TEST.js"></script>


TEST.js

const TabOpen = document.getElementById("TabOpen");//面倒なので変数割り当て
const NAIYOU = document.getElementById("Naiyou");//面倒なので変数割り当て

var actionA = function() {
	// 処理内容
	updateStorage();//strageアップデート
}

//Storageに保存
function setLocalStorage(obj) {
    return new Promise( (resolve) => {
        chrome.storage.local.set( obj, () => resolve() );
    });
}

//Storageから取得
function getLocalStorage(key = null) {
    return new Promise( (resolve) => {
        chrome.storage.local.get(key, (item) => {
            key ? resolve(item[key]) : resolve(item);
        });
    });
}

// Strageアップデート
async function updateStorage(){
	var promises = [];
	promises[0]=setLocalStorage({my_naiyo:NAIYOU.value});// キー:値
	//本来はここにたくさんpromisesを入れてた
    //まとめて追加するのがなぜか上手くいかなかったため、1つずつ追加していた
    //promises[1]=setLocalStorage({my_aaaa:AAAA.value});のように。
	await Promise.all(promises);//実行完了まで待つ
}

// 以前の内容読み込み
async function getBeforeStorage(){
	let a = await getLocalStorage("my_naiyo");
	NAIYOU.value=a;
}

var tabView = function() {
	updateStorage();//strageアップデート
	chrome.tabs.create({url:"https://www.google.com/"});
}

TabOpen.addEventListener("click", tabView );//イベント設定
Naiyou.addEventListener("change", actionA );//イベント設定

getBeforeStorage();//以前の値を取得

contentscriptは「var undefined;」と比較して
undefinedになっているかどうかチェックした(上手く行ってるかは不明)

IDでvalueを参照・設定する場合

HTML

<select id="TestA">
<option value="">-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="4">C</option>
<option value="3">D</option>
</select>

JSファイル

const TestA = document.getElementById("TestA");
TestA.options["1"].selected=true; //valueでselectできる
TestA.dispatchEvent(new Event("change"));

Nameでvalueを参照・設定する場合

HTML

<select name="TestB">
<option value="">-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="4">C</option>
<option value="3">D</option>
</select>

JSファイル

const TestB = document.getElementById("TestB");
TestB [0].value="2"; //value2でselectできる?

あってるのはか不明です…。
間違っていても責任は取れません。すみません。
必要な事だけ調べていったつぎはぎコードで作りました。
プログラミングをもっと勉強すべきですね。ハイ。


参考
qiita.com
teratail.com
teratail.com

Promiseについてはどこのサイトだったか全然思い出せない。

PCMAX ハッピーメールバナー