So I’m writing a bookmarlet that will scrape information from my Citation Helper and return an html sentence that has nice links in an English sentence. That works no problem.
But I am trying to add in a fetch to the SC API. I can do that just fine when I am using the bookmarklet when on an actual suttacentral.net web page. However, when I put that fetch into the bookmarlet I’m using on the Citation Helper page, I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://suttacentral.net/api/suttaplex/mn16?language=en. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘*, *’).
CORS errors seem like a vast swamp to me, so I was wondering if someone familiar with the SC API could tell me what I’m doing wrong.
Here is the bookmarklet that works getting all the links that the Citation helper provides:
javascript: (() => {
const currentCitations = document.getElementsByClassName("url-button-link");
let output = `<p>Or read a different translation on `;
for (let i = 0; i < currentCitations.length; i++) {
let prettySiteUrl = "";
let endJoiner = "";
switch (currentCitations[i].attributes.site.value) {
case "SC":
prettySiteUrl = "SuttaCentral.net";
break;
case "SF":
prettySiteUrl = "SuttaFriends.org";
break;
case "DT":
prettySiteUrl = "DhammaTalks.org";
break;
case "ABT":
prettySiteUrl = "Ancient-Buddhist-Texts.net";
break;
default:
prettySiteUrl = "Website";
}
if (i === currentCitations.length - 1) {
endJoiner = ".";
} else if (i === currentCitations.length - 2) {
endJoiner = ", or ";
} else {
endJoiner = ", ";
}
output += `<a href="${currentCitations[i].href}" rel="noreferrer" target="_blank">${prettySiteUrl}</a>${endJoiner}`;
}
output += `</p>`;
navigator.clipboard.writeText(output);
})();
Here is the fetch that works when sitting on a suttacentral.net sutta web page:
javascript: (() => {
let path = "";
let citation = "";
let translations = "";
let sentence = "on SuttaCentral by";
path = window.location.pathname;
citation = path.split("/")[1];
fetch(`https://suttacentral.net/api/suttaplex/${citation}?language=en`)
.then(response => response.json())
.then(data => {
translations = data[0].translations;
for (let i = 0; i < translations.length; i++) {
if (translations[i].lang === "en") {
sentence += `<a href="https://suttacentral.net/${citation}/en/${translations[i].author_uid}">${translations[i].author}</a>, `;
}
}
console.log(sentence);
navigator.clipboard.writeText(sentence);
});
})();
And here is the initial attempt of a combined bookmarlet that doesn’t work. I’m using this while viewing the Citation Helper. (It’s not fully merged yet)
javascript: (() => {
let path = "";
let citation = "";
let translations = "";
const currentCitations = document.getElementsByClassName("url-button-link");
path = currentCitations[0].href;
let sentence = "Or read Or read a different translation on SuttaCentral.net by";
citation = path.split("/")[3];
fetch(`https://suttacentral.net/api/suttaplex/${citation}?language=en`)
.then(response => response.json())
.then(data => {
translations = data[0].translations;
for (let i = 0; i < translations.length; i++) {
if (translations[i].lang === "en") {
sentence += `<a href="https://suttacentral.net/${citation}/en/${translations[i].author_uid}">${translations[i].author}</a>`;
if (i === currentCitations.length - 1) {
sentence += ".";
} else if (i === currentCitations.length - 2) {
sentence += ", or ";
} else {
sentence += ", ";
}
}
}
console.log(sentence);
navigator.clipboard.writeText(sentence);
});
})();
Again, the error I’m getting is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://suttacentral.net/api/suttaplex/mn16?language=en. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘*, *’).
I’m guessing I need to add something to the header I send to the API?
