Chrome拡張機能を作っているのですが，HTML要素を取得して，chrome.storageへ保存したいと考えています．

h1タグのみのページに対して，以下のJavaScriptを実行すると

```

    > Value is set to <h1>Hello, world</h1>
    > Value currently {key: [[Prototype]]: Object}
    
```

といった出力になり，反映されていません．

どなたかご教示を宜しくお願い致します．

```

    const h1 = document.querySelector('h1')
    
    chrome.storage.local.set({
      "key": h1,
    }, function () {
      console.log('Value is set to ', h1)
    })
    
    chrome.storage.local.get(['key'], function (result) {
      console.log('Value currently is ', result)
    })
```

```

    <body>
      <h1>Hello, world</h1>
    </body>
```

manifest.json

```

    {
      "manifest_version": 3,
      "name": "要素の取得",
      "description": "要素を取得してストレージへ保存",
      "version": "1.0",
      "action": {
        "default_popup": "popup.html"
      },
        "content_scripts": [
            {
            "matches": ["<all_urls>"],
            "js": [
                "content-script.js"
            ],
            "run_at": "document_end",
            "all_frames": true
            }
        ],
      "commands": {
        "_execute_action": {
          "suggested_key": {
            "default": "Ctrl+Shift+H",
            "mac": "MacCtrl+Shift+H"
          },
          "description": "Run extension."
        }
      },
      "permissions": [
        "activeTab",
        "contextMenus",
        "clipboardWrite",
        "scripting",
        "tabs",
        "storage"
      ],
      "options_page": "options.html"
    }
    
```
CC BY-SA 4.0
2022-10-03T15:56:55.637
91429
2022-10-03T16:57:21.447
2022-10-03T16:13:26.003
3060
question
javascript google-chrome chrome-extension
Chrome拡張機能にて，取得したHTML要素の値をchrome.storageへセットできない．
storageに保存する際、オブジェクトをそのまま保存することは出来ないのでシリアライズが行われます。（データとしてはバイト列としてしか保持できないので）

[https://developer.chrome.com/docs/extensions/reference/storage/#:~:text=Primitive%20values%20such%20as%20numbers%20will%20serialize%20as%20expected.%20Values%20with%20a%20typeof%20%22object%22%20and%20%22function%22%20will%20typically%20serialize%20to%20%7B%7D%2C%20with%20the%20exception%20of%20Array%20(serializes%20as%20expected)%2C%20Date%2C%20and%20Regex%20(serialize%20using%20their%20String%20representation)](https://developer.chrome.com/docs/extensions/reference/storage/#:%7E:text=Primitive%20values%20such%20as%20numbers%20will%20serialize%20as%20expected.%20Values%20with%20a%20typeof%20%22object%22%20and%20%22function%22%20will%20typically%20serialize%20to%20%7B%7D%2C%20with%20the%20exception%20of%20Array%20\(serializes%20as%20expected\)%2C%20Date%2C%20and%20Regex%20\(serialize%20using%20their%20String%20representation\)).

プリミティブ値のほか配列、`Date`、`Regex`は例外として期待するシリアライズがなされるようですが、DOMを含めその他のオブジェクトは基本的にそのまま保持することはできないと考えてください。

どのような挙動を期待されているのかはわかりませんが、HTMLとして保持したいのであれば[Element.outerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/outerHTML)でHTMLをテキストとして取り出す、などが有効でしょうか。
CC BY-SA 4.0
2022-10-03T16:57:21.447
91431
2022-10-03T16:57:21.447
2376
91429
answer