It's my first time posting here, so I hope I've provided enough details for an easy resolution to my question.
I'm in the process of developing a flashcard system as a Google Chrome extension. The main page of the system is a single page that loads when the Browser Action button (located at the top right of the browser) is clicked.
The issue I'm facing is related to the appearance of the HTML file loaded by the extension. The text seems to have mysteriously "shrunk," indicating that while the CSS file is loading properly, the Javascript file is not being loaded. Although the Javascript doesn't directly impact the text appearance, I would like it to also load correctly for additional functionality.
Since Chrome extensions are new territory for me, I might be overlooking some crucial aspects in my setup.
If anyone can shed some light on why this "text shrinking" and "Javascript not loading" anomaly is occurring, I'd greatly appreciate your assistance.
Below is the code snippet I've been working with:
HTML (popup.html)
<!DOCTYPE html>
<html>
<head>
<title>Drill</title>
<link rel="stylesheet" type="text/css" href="drillstyle.css">
</head>
<body>
<!-- Main Canvas -->
<div id="canvasdiv">
<canvas id="canvas" width="900" height="600"></canvas>
<div id="canvascontextpara">
<h3>This is a paragraph. This is a paragraph...</h3>
</div>
</div>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Main JS-->
<script src="drill.js"></script>
</body>
</html>
CSS (drillstyle.css)
#canvasdiv {
width: 900px;
height: 600px;
border: 1px solid black;
position: relative;
margin: 0 auto; }
#canvascontextpara {
position: absolute;
top: 60px;
left: 100px;
width: 700px;
height: 150px;
text-align: center;
font-family: 'Comic Sans MS';
color: white;
margin: 0 auto;
z-index: 2;
background: gray; }
canvas{ position: absolute; z-index: 1 }
body{ background-color: black;}
Main JavaScript (drill.js)
// JavaScript code here...
Google Chrome Extension Manifest File (manifest.json)
{
// Manifest content here...
}
Extension JavaScript File (eventPage.js)
// Extension JavaScript code here...
Refer to the following images for a visual representation:
However...
Thank you, Roy