I need minor tweaks to my background.js, content.js, and popup.js files in order to accomplish the final step for a test autofill Google Chrome extension. I have already called JSON data from a server side API successfully in background.js, and that data is successfully displaying on the console. However, when I try to sendResponse back to popup.js, it is not successful. I know this because none of the console.log attempts I make in popup.js display anything in the console. I went through several iterations of runtime errors with the background.js file as well, but the current code base is not resulting in that error.
I want to get the data back to popup.js and content.js from background.js so that an input field in popup.html and on the current webpage is populated with the data I retrieved in background.js.
All files as they currently stand are below. Any ideas on how I might be able to remedy this issue?
Here are all of my code files:
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.field === "getData") {
fetch("*Azure link that successfully returns JSON formatted data*")
.then(response => response.json())
.then(data => {
console.log(data); // this console.log command successfully returns all the JSON data that comes from the Azure link
console.log(data.code.value); // this console.log command successfully returns all the JSON data
sendResponse({ farewell: data });
})
.catch(error => {
console.log('Error fetching data: ', error);
sendResponse({error: error});
});
return true; // keep the channel open
}
}
);
popup.js
document.getElementById("autofill").addEventListener("click", () => {
chrome.runtime.sendMessage({field: "getData"}, function(response) {
if (response) {
console.log(response) // does not print to console
var data = response.farewell;
var Code = data.code.value;
console.log(Code); // does not print to console
document.getElementById("code").value = Code;
}else{
console.log("response is undefined") // also does not print to console
}
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Extension</title>
</head>
<body>
<h1>Extension</h1>
<form>
<label for="code">Code</label>
<input type="text" id="code" placeholder="Code"><br>
<button id="autofill">Autofill</button>
</form>
<script src="popup.js"></script>
</body>
</html>
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.farewell){
var Code = request.farewell.code.value;
var inputField = document.getElementById("code_field_id");
inputField.value = Code;
}
}
);
manifest.json
{
"manifest_version": 3,
"name": "Extension",
"version": "0.0.1",
"description": "Autofill Extension",
"action": {
"default_popup": "popup.html",
"default_title": "Extension"
},
"permissions": [
"*Azure website link*",
"activeTab",
"tabs",
"bookmarks",
"storage"
],
"content_scripts": [
{
"matches": ["https://www.targetwebsite.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"background": {
"service_worker": "background.js"
}
}
JSON Data Returned to program by background.js
{
"code": {
"value": "1ABC5",
"text": "1ABC5",
"hasValue": true
}
}
My question is not answered in the other post that was suggested, at all.
