大文字小文字も適当で、まぁこんなんで良いのかって感じですが
良く分からなくなることも多い為、備忘録として。
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についてはどこのサイトだったか全然思い出せない。
