Chrome extension not responding to javascript

Question

I am building a chrome extension using javascript the tags are working correctly in browser while adding the same html ,javascript code to chrome extension not responding. Json file:

{

"name": "SOB",
"version": "1.0",
"manifest_version":2,
"permissions": ["storage",
                "activeTab" ],
"icons" : {
            "16" : "16.png" ,
            "48" : "48.png"
            },

"browser_action": {
    "default_icon": "Skype Orange.png",
    "default_popup": "popup.html"
},

"background": {
    "scripts": ["background.js"],
    "persistent": true
  }




}

Popup.html:

    <!doctype html>

    <html>
      <head>
        <title>Getting Started Extension's Popup</title>
        <style>
          body {
            font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
            font-size: 100%;
          }

        </style>



        <script src="background" type="text/javascript"></script>
      </head>
      <body>



    <input type="text" name="value"   id="fillIn"  /> 
<input type="submit" value="Submit"  onClick="response()"/>
<p id="answer"></p>

    <input type="text" name="value" id="input"  placeholder="SOB Check" />
    <button id="form"   onClick="demo()"> Submit</button>
    <p id="output"> </p>

    <!----------
        <div id="status"></div>
        <img id="image-result" hidden>
    ------------>
     </body>
    </html>

background.js:

function demo()
{
var arra = [] , i = 1, rem ;

var Input =document.getElementById('input').value;
var x = 1;
while(Input > 0)
{
     rem = Input%2;
    Input = (parseInt(Input/ 2));
    arra[i] = rem ;
    i++;

}

while ( x < 35 )
{
    if(arra[x]  == 1)
    {
        output.innerHTML +=("SOB "+ x +" Found" +"<br />" );
        x = x +1 ;
        }
    else
    {
            x = x +1 ;
            }


}
}
function response() {

var box = document.getElementById("fillIn");

switch (box.value)
{
case '0' : document.getElementById("answer").innerHTML="Successful";
           break ;
case '999' : document.getElementById("answer").innerHTML="Other Error No Retry";
break ;
}
}

right click on ur extension's icon and click on inspect popup, to debug — Lakshay, Nov 14 '16 at 09:38

Lakshay · Accepted Answer · 2016-11-14T09:50:41.910

0

~~You will need to run the code on DOMContentLoaded event~~

document.addEventListener('DOMContentLoaded', function () {
  demo();
});

You have referenced background instead of background.js in your popup html file.

edited Nov 14 '16 at 09:50

answered Nov 14 '16 at 09:40

Lakshay

1,594
2
15
38

Thanks Lakshay but do you mean that I need to add this function in background.js "document.addEventListener('DOMContentLoaded', function () { demo(); });" – Moustafa Nov 14 '16 at 09:44
Yes, if you want to run the code in background.js when the user clicks on the ext's icon to open the popup – Lakshay Nov 14 '16 at 09:45
i would advise you to download relating sample ext from here https://developer.chrome.com/extensions/samples ,and then make changes in it – Lakshay Nov 14 '16 at 09:47
Also I use inspect popup and found this error Failed to load chrome-extension://ppndoejphojcnjfkiflihggfnjbepbeg/background resource: net::ERR_FILE_NOT_FOUND – Moustafa Nov 14 '16 at 09:48
start by reading the official extension arquitecture docs. i doubt you did if you are trying to include background.js from a popup. – Zig Mandel Nov 14 '16 at 19:56

Chrome extension not responding to javascript

1 Answers1