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"
}