window.onload = function() {
document.getElementById('item_save').onclick = function() {
var item_name = document.getElementById('item_name').value;
var item_size = document.getElementById('item_size').value;
var item_type = document.getElementById('item_type').value;
chrome.storage.sync.set({'itemName' : item_name}, function() {
alert(itemName)
});
}
}
JavaScript code above refers to content.js
<div class="item_name_hold">
<input type="text" class="item_name" name="item_name" placeholder="Item Name..." id="item_name">
</div>
<div class="item_size_hold">
<input type="text" class="item_size" name="item_size" placeholder="Item Size..." id="item_size">
</div>
<div class="item_type_hold">
<input type="text" class="item_type" name="item_type" placeholder="Item Type..." id="item_type">
</div>
<input type="button" class="item_save" name="submit" value="Save" id="item_save">
The HTML code shown above.
This full functionality is achieved by also adding the content.js file in the manifest.json and a script tag at the top of the popup.html file to include content.js as well.
I have encountered two errors: "Uncaught TypeError: Cannot set property 'onclick' of null" and "Uncaught TypeError: Cannot read property 'sync' of undefined."