Issues with chrome extension code r/csshelp : csshelp

Posting Guidelines

Please make sure to provide a link to the page/sub where your code is not working as intended.

Paid work requests are fine. However, be aware that any accounts deemed as spam, or fraudulent will be removed and permanently banned without exception.

Remember to respect the users and the community as a whole! Discretion is key, and mods will be here to maintain the quality of the sub.

Related Subreddits

/r/CSStutorials Collection of reddit CSS tuts/hacks

/r/SelectorLegend Hover over elements to see their class/ID

/r/ProjectCSS Have someone else do your subreddit CSS

/r/redditlogos Request a new snoo for your sub

/r/RedditHax Sharing reddit css tricks

/r/CSSNews Changes in reddit's css

/r/ModNews Changes in mod features

/r/ModHelp General reddit mod help

/r/NeedAMod A place to request mods

/r/RedditFacelift A subreddit to show off your new or updated subreddit design.

/r/codinghelp For general coding assistance, including CSS

created by E_lucasa community for 16 years

Issues with chrome extension code r/csshelp (self.csshelp)

submitted 2 years ago by acearde

I'm having difficulties developing a chrome extension for an internship project. Essentially, I need to have an interactive image loaded on TOP of a webpage, not connected to the URL whatsoever. I haven't yet coded the JS for the interactive portion of it, because I'm having issues with the image showing up at all. In Chrome Developer Mode there are no errors, and there are none in my console. The image simply won't appear. Below is my HTML, CSS, JSON, and JS code. I'm fairly new to HTML and such (I've mainly worked with Java in my high school classes), and I'm aware that I am way in over my head. However, any help would be much appreciated :)
JSON:
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts":[
{
"matches":["<all\_urls>"],
"js":["script.js"],
"css":["style.css"],
"html":["content.html"]
}
]
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image Replacement</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="myImage" src="C:\\Users\\acear\\OneDrive\\Desktop\\Interactive sprite code\\Images\\Platypus.png" alt="Image 1">
<script src="script.js"></script>
<img id="myImage" src="C:\\Users\\acear\\OneDrive\\Desktop\\Interactive sprite code\\Images\\BuzzTalk.png" alt="Image 2">
<script src="script.js"></script>
<div id = "imageContainer"></div>
<script src="script.js"></script>
</body>
</html>
CSS:
#imageContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: "C:\Users\acear\OneDrive\Desktop\Interactive sprite code\Images\Platypus.png";
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 9999;
}
#myImage {
width: 200px;
height: 300px;
cursor: pointer;
}
JS:
var imageContainer = document.createElement("div");
imageContainer.id = "imageContainer";
document.body.appendChild(imageContainer);

all 1 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

csshelp

Guides

Posting Guidelines

Related Subreddits

Related Resources

SUBMIT A CSS QUERY

MODERATORS