Functions aren't working in Chrome Extension

Question

So I made a little html file the other day and it's just a page that has a clock, gif background, and a search bar that searches Google.

I had it all working as an html file earlier but then I wanted to make it into a chrome extension. I had to make a manifest.js file and put the scripts in a separate file too and then the search wasn't working anymore.

I really have no clue what I did wrong.

Here's my manifest file:

{
  "name": "THE GOODEST",
  "description": "Overrides the new tab page",
  "version": "0.1",
  "icons": {"48": "icon.png"},
  "incognito": "split",
  "chrome_url_overrides": {
    "newtab": "newTab.html"
  },
  "manifest_version": 2
}

Here's my html file:

<!DOCTYPE html>

<html>

<title>New Tab</title>

<body onload = "resizeWindow()">
  
<iframe src="http://free.timeanddate.com/clock/i63s4yyj/n224/ahl/avb/pa10/tt0/tw1/tm1/ts1" frameborder=0 width="195" height="37" style="position:fixed; bottom: 10px"></iframe>

<input id="searchBar">

<button onclick="search()">Search</button>

<script type = "text/javascript" src = "scripts.js"></script>

</body>

</html>

And here's my script:

function search() {
  
    var text = document.getElementById("searchBar").value;

    window.open("https://www.google.com/search?q=" + text)

}

Inline JS doesn't work in Chrome Extensions. Use external JS file. — Deliaz, Feb 10 '18 at 07:12

score 0 · Accepted Answer · answered Feb 10 '18 at 16:03

As stated by @Deliaz in the comments, inline javascript isn't allowed in chrome extension because of strict environment isolation.

Change this: <button onclick="search()">Search</button> to: <button id='searchButton'>Search</button>

and place some code in your separate script.js file that attaches an eventlistener to your search button on the click action.

// Triggers when all DOM elements are loaded
document.addEventListener('DOMContentLoaded', function(event) {
  // Attaches listener for click event on search button
  document.querySelector('#searchButton').addEventListener('click', function(e) {
    return search();
  });
});

function search() {
    var text = document.getElementById("searchBar").value;
    window.open("https://www.google.com/search?q=" + text)
}

Alternatively you could also use the search event on the input field: https://developer.mozilla.org/en-US/docs/Web/Events/search

Thank you so much! I have been trying to figure this out forever and now it works! — cervidae, Feb 11 '18 at 01:56

Functions aren't working in Chrome Extension

1 Answers1