2021年5月2日星期日

How can I turn my HTML code with JS in it into a chrome extension? [duplicate]

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.

https://stackoverflow.com/questions/67362817/how-can-i-turn-my-html-code-with-js-in-it-into-a-chrome-extension May 03, 2021 at 10:25AM

没有评论:

发表评论