What's wrong with this Chrome extension? [closed]

0

I made a small extension in Chrome, and it is not working properly. My extension simply randomizes a word between one of those randomVals and displays. I would like you to help me know what is wrong with it. Here is the code:

Manifest

{
  "name": "RandomHype",
  "version": "1.0",
  "manifest_version": 2,
  "description": "RandomHype official Extensions.",
  "browser_action": {
     "popup": "rh.html"
  }
}

rh.html

<html>
  <head>
    <link rel="stylesheet" href="typeget.css">
    <script>
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var randomVals = ['Play BTD5',
        'Code',
        'Watch a video',
        'Play Chess',
        'Study',
        'Chat (Skype)',
        'Check Twitter',
        'Check the news on Tecmundo',
        'Talk about SW'
    ];
    var r_i = getRandomInt(0, randomVals.length - 1);
    document.getElementById('doThing').innerHTML = randomVals[r_i];
</script>
  </head>
<body>
<center>
  <h3>I should</h3><br><h1><p id="doThing">Code</p>
</center>
</body>
</html>
    
asked by anonymous 10.10.2015 / 21:37

1 answer

3

First, there is a h1 tag not closed.

Another problem is that your manifest is incorrect. Instead of popup , use default_popup :

{
  "name": "RandomHype",
  "version": "1.0",
  "manifest_version": 2,
  "description": "RandomHype official Extensions.",
  "browser_action": {
        "default_popup": "rh.html"
    }
}

Continuing, if you intend to change the content of <p id="doThing">...</p> to a predefined value every time script is run, you need to put this script after the element.

Opening the console, you will see the following error:

  

TypeError: document.getElementById (...) is null

This is because within <head> , specifically in this line document.getElementById('doThing') you try to get an element that has not yet existed been loaded.

You can ...

Place this script at the end of the document, before closing the <body tag:

<html>

<head>
  <link rel="stylesheet" href="typeget.css">
</head>

<body>
  <center>
    <h3>I should</h3>
    <br>
    <h1><p id="doThing">Code</p></h1>
  </center>
  <script>
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var randomVals = ['Play BTD5',
      'Code',
      'Watch a video',
      'Play Chess',
      'Study',
      'Chat (Skype)',
      'Check Twitter',
      'Check the news on Tecmundo',
      'Talk about SW'
    ];

    var r_i = getRandomInt(0, randomVals.length - 1);
    document.getElementById('doThing').innerHTML = randomVals[r_i];
  </script>
</body>

</html>

Run the script when the DOM is ready:

<html>

<head>
  <link rel="stylesheet" href="typeget.css">

  <script>
    document.addEventListener('DOMContentLoaded', function() {

      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      var randomVals = ['Play BTD5',
        'Code',
        'Watch a video',
        'Play Chess',
        'Study',
        'Chat (Skype)',
        'Check Twitter',
        'Check the news on Tecmundo',
        'Talk about SW'
      ];


      var r_i = getRandomInt(0, randomVals.length - 1);
      document.getElementById('doThing').innerHTML = randomVals[r_i];

    }, false);
  </script>

</head>

<body>
  <center>
    <h3>I should</h3>
    <br>
    <h1><p id="doThing">Code</p></h1>
  </center>
</body>

</html>

More information about DOMContentLoaded on this link .

These examples were to run the snippet , in Google Chrome extensions the Javascript file should be created in part and not inline in the HTML document. Create a popup.js file (for example), put your Javascript code in it and just refer to HTML:

<script src='popup.js'></script>
    
10.10.2015 / 23:12