[Chome Extension]Webページ連動タイマーの実装

5489 ワード
豆2粒 frontend 開発ログ テキストリンク

[ローカルストレージからデータを取得]


必要なデータはWebページからlocalStorageに保存されています.
→localStorageコンテンツの取得

1.データをインポートするTabのIDを取得する

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)=>{
	if(changeInfo.status === 'complete'){
			if(tab.url.includes("URL주소"){ globalTabId = tabId; }
	}		
});
  • ユーザが定義済みURLに接続している場合は、そのタブのIDを保存する
  • この項目はラベルページの状態を保つ必要があるため、グローバル変数として記憶して使用する

    • 2.localStorageをインポートするスクリプトを注入

    chrome.scripting.executeScript({
    target: {tabId: globalTabId },
    func: ()=>{return localStorage["key"];}
}, (result)=>{
    console.log(result);
});
  • 該当するタブにスクリプトを注入してローカルストレージ["key"]値を返す

    • [タイマー実装]

    setInterval(()=>{ 
    if(globalTabId!=""){
        chrome.scripting.executeScript({
            /* ... */
        });
    }
}, 1000);
  • setInterval():関数を一定時間毎に実行
  • globalTabId注入からlocalStorageから取得した関数を繰り返し実行
  • 取得した値の状態がプレイであればタイマが動作しているため、拡張でデータを表示できる

    • [ Problem ]


    Webページ通信

  • 状況:「send data to web page」を検索したときに現れるsendMessage
  • レッスン

  • chrome.runtime.sendMessage & chrome.runtime.onMessage()
    :chrome extensionに関連するnpmがインストールされていますが、chrome.ランタイムを認識できません
    →社内JSのコミュニケーションの仕方を判断する

  • document.dispatchEvent & document.addEventListner
    :同じDOMを共有しないため使用できません
  • 解決
  • tabidは、必要なデータがlocalStorageに格納されていることがわかるので、tabidからscriptにアクセスしてデータを注入する方式を選択

    • [結果]


    Flutterテスト
    [BOJ]13549号:鬼ごっこ3