HTML Page Displays Incorrectly When Loaded by Chrome Extension

Question

As this is my first time posting, I hope I provide the right details so my question will be relatively easy to answer.

I am building a flashcard system as a Google Chrome extension. The main page which contains the flashcard system is a single page that is loaded by the extension by clicking the Browser Action button (the icon on the top right of the browser).

My problem, is that the HTML file that is loaded by the extension looks funny. Funny as in the text magically "shrunk." It appears the CSS file is loading, but the Javascript is not. The Javascript does not affect the look of the text, but I would also like the page to load the Javascript as well.

I am not super familiar with building Chrome extensions so I may be missing some important details.

So if anyone has any idea how this magical "changing of the text" and "Javascript not loading" is happening, I'd love to get some assistance.

Here's what I got as far as the code goes:

HTML (popup.html)




    Drill

    



    
    

        

        
            This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

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 and 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 for changes in the editIconHover variable
    var englishText = "English Text"; //Holds the spanish text

    //trigger variables
    var editIconHover = false; //is the mouse hovering over the edit icon?
    var speakIconHover = false; //is the mouse hovering over the speaker icon?
    var triggerCardAnim = false; //is the mouse clicking the 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 to use to test for changes
            testValue = editIconHover;

            //check if hovering over edit icon
            if (mouseX >= 648 && mouseX <= 680){
                if (mouseY >= 388 && mouseY <= 420) {
                    editIconHover = true;
                }
                else {
                    editIconHover = false;
                }
            }
            else {
                editIconHover = false;
            }

            //if there is a change in whether the mouse is hovering over the icon, repaint
            if (testValue != editIconHover) {
                paint();
            }

            testValue = speakIconHover;

            //check if hovering over speaker icon
            if (mouseX >= 388 && mouseX <= 420) {
                if (mouseY >= 388 && mouseY <= 420) {
                    speakIconHover = true;
                }
                else {
                    speakIconHover = false;
                }
            }
            else {
                speakIconHover = false;
            }

            //if there is a change in whether the mouse is hovering over the 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 the canvas
    function paint() {

        // --Draw Layout--

        //Draw background and 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 the 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 for 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 are a couple images that explain what I'm talking about:

How it should look

But...

How extension loads it

Thanks, Roy

metarmask · Accepted Answer

You cannot load external scripts unless allowed in the extension manifest because of the content security policy.

A style is also injected on all extension pages which adds this rule:

body {
    font-family: 'Droid Sans', Arial, sans-serif;
    font-size: 75%;
}

Edit: You can solve this by adding a style which negates the rule like this:

body {
    font-family: initial;
    font-size: initial;
}

To make jQuery load you'll have to whitelist the Google CDN. You cannot whitelist http URLs you'll have to switch to the https version. Add this to your manifest.json:

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"

HTML Page Displays Incorrectly When Loaded by Chrome Extension

Answers (1)

Related Questions