I have a simple HTML website with some JS in it that displays a working magic 8 ball. However, when I put the same code into the code for a chrome extension, It just displays a blank square. Can someone please help me with this? My code is displayed below.
manifest.json
{
"manifest_version": 2,
"name": "Popup Game",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_icon": "ct.png",
"default_popup": "popup.html",
"default_title": "Game"
}
}
content.js
console.log('Chrome extension go?');
tabs.sendMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse) {
console.log(message.txt);
if (message.txt === 'hello') {
let paragraphs = document.getElementsByTagName('p');
for (elt of paragraphs) {
elt.style['background-color'] = '#FF00FF';
}
}
}
popup.html
<!DOCTYPE html>
<html>
<body>
<script>
fill(0, 0, 0);
ellipse(200, 200, 375, 375);
fill(60, 0, 255);
triangle(200, 104, 280, 280, 120, 280);
fill(255, 255, 255);
var answer = floor(random(1, 20));
if (answer === 1) {
text("As I see it,", 171, 200);
text("yes", 189, 229);
}
else if (answer === 2) {
text("Ask again", 171, 200);
text("later", 189, 229);
}
else if (answer === 3) {
text("Better not ", 171, 200);
text("tell you now", 169, 229);
}
else if (answer === 4) {
text("Cannot", 180, 200);
text("predict now", 172, 229);
}
else if (answer === 5) {
text("Concentrate", 169, 200);
text("and ask again", 165, 229);
}
else if (answer === 6) {
text("Don't count", 171, 200);
text("on it", 189, 229);
}
else if (answer === 7) {
text("It is", 191, 200);
text("certain", 183, 229);
}
else if (answer === 8) {
text("It is", 193, 200);
text("decidedly so", 169, 229);
}
else if (answer === 9) {
text("Most", 187, 200);
text("likely", 186, 229);
}
else if (answer === 10) {
text("My reply is", 171, 200);
text("no", 193, 229);
}
else if (answer === 11) {
text("My sources", 171, 200);
text("say no", 184, 229);
}
else if (answer === 12) {
text("Outlook", 178, 200);
text("not so good", 171, 229);
}
else if (answer === 13) {
text("Outlook", 180, 200);
text("good", 185, 229);
}
else if (answer === 14) {
text("Reply hazy,", 170, 200);
text("try again", 178, 229);
}
else if (answer === 15) {
text("Signs point", 170, 200);
text("to yes", 184, 229);
}
else if (answer === 16) {
text("Very", 187, 200);
text("doubtful", 180, 229);
}
else if (answer === 17) {
text("Without", 180, 200);
text("a doubt", 181, 229);
}
else if (answer === 18) {
text("Yes", 189, 229);
}
else if (answer === 19) {
text("Yes - definitely", 164, 229);
}
else {
text("You may", 175, 200);
text("rely on it", 177, 229);
}
</script>
</body>
</html>
I have been trying to solve this problem for a long time, but nothing seems to be working.
