I am building a chrome extension.
I cannot access the shopify api through either basic auth, or using the ‘X-Shopify-Access-Token’ header.
Here is my code:
this is in background.js:
<code>chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.contentScriptQuery == "query") {
var url = "https://<store>.myshopify.com/admin/api/2024-07/graphql.json";
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': 'value'
},
body: JSON.stringify(`{
shop {
name
}
}`)
})
.then(response => response.json())
.then(r => {
sendResponse(r);
}).catch(error => sendResponse(error));
return true;
});
</code>
<code>chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.contentScriptQuery == "query") {
var url = "https://<store>.myshopify.com/admin/api/2024-07/graphql.json";
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': 'value'
},
body: JSON.stringify(`{
shop {
name
}
}`)
})
.then(response => response.json())
.then(r => {
sendResponse(r);
}).catch(error => sendResponse(error));
return true;
});
</code>
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.contentScriptQuery == "query") {
var url = "https://<store>.myshopify.com/admin/api/2024-07/graphql.json";
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': 'value'
},
body: JSON.stringify(`{
shop {
name
}
}`)
})
.then(response => response.json())
.then(r => {
sendResponse(r);
}).catch(error => sendResponse(error));
return true;
});
This is being passed to the content.js file:
<code>function testFetch() {
chrome.runtime.sendMessage({
contentScriptQuery: "query",
},
response => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log('response: ', response);
}
});
}
</code>
<code>function testFetch() {
chrome.runtime.sendMessage({
contentScriptQuery: "query",
},
response => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log('response: ', response);
}
});
}
</code>
function testFetch() {
chrome.runtime.sendMessage({
contentScriptQuery: "query",
},
response => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log('response: ', response);
}
});
}
Unfortunately, the response I receive is:
<code>response: errors
{query: 'Required parameter missing or invalid'}
[[Prototype]]
Object
</code>
<code>response: errors
{query: 'Required parameter missing or invalid'}
[[Prototype]]
Object
</code>
response: errors
{query: 'Required parameter missing or invalid'}
[[Prototype]]
Object
And I cannot determine what I’m doing wrong.
I’ve verified access scopes, I’ve verified the X-Shopify-Access-Token value.
Any help would be really appreciated!
Here are examples of what I’ve looked into:
- How to make a cross-origin request in a content script (currently blocked by CORB despite the correct CORS headers)?
- https://www.chromium.org/Home/chromium-security/extension-content-script-fetches/
- https://developer.chrome.com/docs/extensions/reference/manifest/web-accessible-resources
- https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts
- https://developer.chrome.com/docs/extensions/samples
- https://developer.chrome.com/docs/extensions/develop/concepts/network-requests