Question

Technologies:

javascript

html

css

Tolerim

7 hours ago

I have a manifest.json, main.css and index.html in my Chrome extension, but it does not have any functionality.

I have developed a Chrome extension for the first time, and I have successfully loaded it onto Chrome extensions with no errors. However, although I have done everything that I could, the code I have written doesn't seem to work. My attempts to solve the issue by editing the code and looking for errors have been fruitless, and all that is displayed is a small white square. The purpose of this extension is to display an adorable kitten image as the background for the current page, and I have included a snippet of code from the manifest.json file. I also have an index.html and main.css file. Here is a sample of the main.css file:

body#gsr.hp.vasq {
  background-image: url(“https://en.bcdn.biz/Images/2018/6/12/27565ee3-ffc0-4a4d-af63-ce8731b65f26.jpg");
}
div.gbxe.gbR.gbMe.gbEe {
  font-weight: bold;
  font-size: 15px;
}

Answers(1)

Accepted Answer

It looks like the issue may be with the syntax you used in your main.css file when specifying the background-image URL. Instead of using regular double quotes ("), you have used curly quotes (“ ”). Try replacing the curly quotes with straight quotes and see if that resolves the issue. Here is the corrected main.css file:

body#gsr.hp.vasq {
  background-image: url("https://en.bcdn.biz/Images/2018/6/12/27565ee3-ffc0-4a4d-af63-ce8731b65f26.jpg");
}
div.gb_xe.gb_R.gb_Me.gb_Ee {
  font-weight: bold;
  font-size: 15px;
}

If that doesn't work, make sure that your index.html file is referencing the correct CSS file and that the file names match exactly. You can also try opening the extension in Developer Mode and checking the console for any errors that may be preventing the code from running.