【Chrome拡張】別タグ開いてLocalStorageの値を取得してみました #JavaScript

タイトルのことを業務で頼まれたので、作ってみました（無駄にVue.jsを使っています）。
指定されたURLを裏で開きまして、ローカルストレージの値を取得しに行きます。

↓ファイル構成はこんな感じです。

├─LocalStorageGet
│  background.js
│  manifest.json
│  popup.css
│  popup.html
│  popup.js
│  vue.min.js

manifest.json

{
  "name": "LocalStorage Access Sample",
  "description": "LocalStorage Access Sample",
  "version": "0.0.1",
  "manifest_version": 2,
  "permissions": [
    "tabs"
  ],
  "content_scripts": [{
    "matches": ["https://*/*", "http://*/*"],
    "js": ["background.js"]
  }],
  "browser_action": {
    "default_title": "LocalStorage Access Sample",
    "default_popup": "popup.html"
  }
}

表示部分です。
vue.min.jsと独自に作ったpopup.jsを読み込んで、viewという変数を表示させています。

popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>LocalStorage Access Sample</title>
        <link rel="stylesheet" href="popup.css">
    </head>
    <body>
        <div id="app">
            <p>LocalStrage is: {{ view }}</p>
        </div>
        <script src="vue.min.js"></script>
        <script src="popup.js"></script>
    </body>
</html>

popup.jsの中で、https://test.comに非選択状態でアクセスして、タブの表示の完了（chrome.tabs.onUpdated）を待って、対象のページに仕込んだbackground.js（後述）にメッセージを送っています。
その結果をviewに設定しています。
そしてそのあとに閉じます（chrome.tabs.remove）。

popup.js

window.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: '#app',
        data: {
            view: '',
        },
        created: function() {
            chrome.tabs.create({url: 'https://test.com', selected: false }, (tab) => {
                chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
                    if(tabId === tab.id && changeInfo.status === 'complete'){
                        chrome.tabs.sendMessage(tab.id, { method: 'getItem', key: 'sampleId', }, (response) => {
                            this.localStrageValue = response && response.data;
                            chrome.tabs.remove(tab.id);
                        });
                    }
                });
            });
        }
    });
});

対象ページに仕込むコードはこちら。

background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if(request.method === 'getItem'){
        sendResponse({data: localStorage.getItem(request.key)});
    }
});

作った拡張をChromeに読み込ませて、アイコンをクリックすれば、

こんな感じで表示されるはずです（上記画像は適当にランダムな値を設定しております）。