Estou tentando escrever uma extensão do Chrome para pegar alguns dados armazenados e POSTÁ-los em uma tabela de banco de dados remota. Estou tentando testar a funcionalidade de postagem usando https://www.postb.in/ . Estou usando um painel devtools que adicionei. Percorri o código e parece estar funcionando até a linha 37 em background.js. O que estou fazendo errado?
Panel.js contém:
const toDbBtn = document.getElementById("toDbBtn");
toDbBtn.addEventListener("click", async () => {
const dbName = document.getElementById("textBox").value;
try {
const result = await chrome.storage.local.get(["yourKey"]);
if (result.yourKey) {
const savedArray = JSON.parse(result.yourKey);
console.log(result.yourKey);
console.log("Saved Array:", savedArray);
console.log("DB Name:", dbName);
console.log("Type of result.yourKey:", typeof result.yourKey);
console.log("Type of savedArray:", typeof savedArray);
console.log("Is savedArray an array?", Array.isArray(savedArray));
// Send message to background script
const response = await chrome.runtime.sendMessage({
action: "sendToDB",
data: { dbName: dbName, savedArray: result.yourKey },
});
if (response.error) {
console.error("Error:", response.error);
} else {
console.log("Success:", response.result);
}
} else {
console.log("No data found in storage to send.");
}
} catch (error) {
console.error("Error during storage or message sending:", error);
}
});
fundo.js:
chrome.runtime.onConnect.addListener(port => {});
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
if (request.action === "sendToDB") {
const { dbName, savedArray } = request.data;
if (typeof dbName !== 'string' || typeof savedArray !== 'string') {
sendResponse({ error: 'Invalid data types' });
return false;
}
let parsedArray;
try {
parsedArray = JSON.parse(savedArray);
} catch (e) {
sendResponse({ error: 'Invalid JSON string for savedArray' });
return false;
}
const data = {
dbName: dbName,
savedArray: parsedArray,
};
const postable = JSON.stringify(data);
console.log("postable", postable);
try {
const response = await fetch("https://www.postb.in/1743970496740-3388752799946", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: postable,
});
const result = await response.json();
console.log("Response from server:", result);
sendResponse({ result: result });
} catch (error) {
sendResponse({ error: error.message });
}
return true; // Required for asynchronous response
}
return false; // Required if the message is not for this listener
});
manifesto.json:
{
"manifest_version": 3,
"name": "myDevTools",
"version": "1.0",
"description": "Description of your extension",
"devtools_page": "devtools.html",
"host_permissions": [
"*://*.cnn.com/",
"https://www.postb.in/*"
],
"permissions": [
"storage",
"activeTab",
"scripting",
"webNavigation",
"tabs",
"unlimitedStorage",
"cookies",
"alarms",
"notifications",
"contextMenus",
"offscreen",
"identity",
"identity.email",
"nativeMessaging",
"browsingData"
],
"background": {
"service_worker": "background.js"
}
}
EDIT: Alterei a solicitação POST para:
const response = await fetch("https://www.postb.in/1743979363812-2128863274119", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST",
"Access-Control-Allow-Headers": "Content-Type"
},
body: postable,
});
