javascript - HTML Page Displays Incorrectly When Loaded by Chrome Extension -
as first time posting, hope provide right details question relatively easy answer.
i building flashcard system google chrome extension. main page contains flashcard system single page loaded extension clicking browser action button (the icon on top right of browser).
my problem, html file loaded extension looks funny. funny in text magically "shrunk." appears css file loading, javascript not. javascript not affect of text, page load javascript well.
i not super familiar building chrome extensions may missing important details.
so if has idea how magical "changing of text" , "javascript not loading" happening, i'd love assistance.
here's got far code goes:
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 paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. paragraph. 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)
$(document).ready(function () { //canvas stuff var canvas = $("#canvas")[0]; var ctx = canvas.getcontext("2d"); var w = $("#canvas").width(); var h = $("#canvas").height(); var canvasposition = $('#canvas').offset(); //declare , assign image objects var pencilimageobj = new image(); pencilimageobj.src = 'pencil.png'; var penciloutlineimageobj = new image(); penciloutlineimageobj.src = 'penciloutline.png'; var speakimageobj = new image(); speakimageobj.src = 'speaker.png'; var speakoutlineimageobj = new image(); speakoutlineimageobj.src = 'speakeroutline.png'; //random variables var testvalue = false; //tests changes in editiconhover variable var englishtext = "english text"; //holds spanish text //trigger variables var editiconhover = false; //is mouse hovering on edit icon? var speakiconhover = false; //is mouse hovering on speaker icon? var triggercardanim = false; //is mouse clicking spanish card function init() { //initiate mouse move listener $('#canvas').mousemove(function (e) { //aquire mouse position var mousex = e.pagex - canvasposition.left; var mousey = e.pagey - canvasposition.top; //set value use test changes testvalue = editiconhover; //check if hovering on edit icon if (mousex >= 648 && mousex <= 680){ if (mousey >= 388 && mousey <= 420) { editiconhover = true; } else { editiconhover = false; } } else { editiconhover = false; } //if there change in whether mouse hovering on icon, repaint if (testvalue != editiconhover) { paint(); } testvalue = speakiconhover; //check if hovering on speaker icon if (mousex >= 388 && mousex <= 420) { if (mousey >= 388 && mousey <= 420) { speakiconhover = true; } else { speakiconhover = false; } } else { speakiconhover = false; } //if there change in whether mouse hovering on icon, repaint if (testvalue != speakiconhover) { paint(); } }); //initiate mouse click listener $('#canvas').click(function (e) { //aquire mouse position var mousex = e.pagex - canvasposition.left; var mousey = e.pagey - canvasposition.top; //detect click on english card if (mousex >= 480 && mousex <= 680) { if (mousey >= 270 && mousey <= 420) { triggercardanim = true; textmanager(); paint(); } } }); } init(); // draw/refresh canvas function paint() { // --draw layout-- //draw background , border ctx.fillstyle = "black"; ctx.fillrect(0, 0, w, h); ctx.strokestyle = "red"; ctx.strokerect(0, 0, w, h); //draw title ctx.fillstyle = "white"; ctx.textalign = "center"; ctx.font = "20px comic sans ms"; ctx.filltext("living waters spanish vocabulary driller", w/2, 40); //draw spanish card ctx.fillstyle = "gray"; ctx.fillrect(220, 270, 200, 150); //draw english card ctx.fillstyle = "gray"; ctx.fillrect(480, 270, 200, 150); // --draw text-- //draw title ctx.fillstyle = "white"; ctx.textalign = "center"; ctx.font = "20px comic sans ms"; ctx.filltext("living waters spanish vocabulary driller", w / 2, 40); //draw spanish word ctx.filltext("spanish word", 320, 345); //draw english word ctx.filltext(englishtext, 580, 345); // --draw images-- //draw edit image if (editiconhover == true) { ctx.drawimage(pencilimageobj, 648, 388, 32, 32); pencilimageobj.onload = function () { ctx.drawimage(pencilimageobj, 648, 388, 32, 32); }; } else { ctx.drawimage(penciloutlineimageobj, 648, 388, 32, 32); penciloutlineimageobj.onload = function () { ctx.drawimage(penciloutlineimageobj, 648, 388, 32, 32); }; } //draw sound clip image if (speakiconhover == true) { ctx.drawimage(speakimageobj, 388, 388, 32, 32) speakimageobj.onload = function () { ctx.drawimage(speakimageobj, 388, 388, 32, 32) } } else { ctx.drawimage(speakoutlineimageobj, 388, 388, 32, 32) speakoutlineimageobj.onload = function () { ctx.drawimage(speakoutlineimageobj, 388, 388, 32, 32) } } } paint(); //manage text on canvas function textmanager() { var testtext = "you clicked me"; if (triggercardanim == true) { englishtext = testtext; triggercardanim = false; } } }) google chrome extension manifest file (manifest.json)
{ "manifest_version": 2, "name": "my test plugin", "description": "experimental plugin build roy", "version": "1.0", "background": { "scripts": ["eventpage.js"], "persistent": false }, "browser_action": { "default_icon": "icon.png" }, "permissions": [ "activetab" ] } extension javascript file (eventpage.js)
chrome.browseraction.onclicked.addlistener(function (activetab) { var newurl = "popup.html"; chrome.tabs.create({ url: newurl }); }); here couple images explain i'm talking about:
but...
thanks, roy
you cannot load external scripts unless allowed in extension manifest because of content security policy.
a style injected on extension pages adds rule:
body { font-family: 'droid sans', arial, sans-serif; font-size: 75%; } edit: can solve adding style negates rule this:
body { font-family: initial; font-size: initial; } to make jquery load you'll have whitelist google cdn. cannot whitelist http urls you'll have switch https version. add manifest.json:
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
Comments
Post a Comment