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:

how should look

but...

how extension loads it

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

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more