Trouble creating chrome extension

Question

I have successfully created an chrome extension which simply when pressed says hello word. Now when i tried to demonstrate a simple button when pressed alert comes out, doesn't work. I am thinking if it is perhaps because i use javascript inside and it has html extension.

In my folder which gets loaded in chrome has inside a)manifest.json b)lab.html c)an icon

lab.html

<textarea id="s" rows="2" cols="4" name="p"></textarea></br>

<button onclick="button()">Submit</button>

<script>
function button()

{
   alert("alert");
}
</script>

manifest

{
    "name": "Your Extension Name",
    "description": "Your Extension Description", 
    "browser_action": {
        "default_icon": {
            "38": "icon.png"
            }, 
        "default_title": "Your Extension Popup Title", 
        "default_popup": "lab.html"
    }, 
    "manifest_version": 2,
    "update_url": "http://clients2.google.com/service/update2/crx",
    "content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",
    "version": "0.1"
}

I need to see your manifest.json as well. Is your extension a content script, a browser action, or a page action? — frosty, Mar 07 '14 at 20:02
So, when you click the icon and the lab.html appears.... you click the button and nothing happens? Or does the lab.html not even appear? — frosty, Mar 07 '14 at 20:07

abraham · Answer 1 · 2014-03-07T23:16:01.500

2

You can't execute inline JavaScript because of the Content Security Policy. The Chrome dev docs have additional details.

You basically have to pull the JavaScript into a different file.

// script.js

function button()
{
   alert("alert");
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('button').addEventListener('click', button);
});

edited Mar 07 '14 at 23:16

answered Mar 07 '14 at 22:52

abraham

46,583
10
100
152

score 1 · Answer 2 · answered Mar 07 '14 at 20:11

1

Try reformatting your javascript:

function button(){
    alert('alert');
}

And then let's call your function as soon as the page loads, just to make sure that it is working.

So do this:

function button(){
    alert('alert'); 
}
button(); //call it immediately

Let me know how it goes.

answered Mar 07 '14 at 20:11

frosty

21,036
7
52
74

still no luck, i was thinking.. is it perhaps i have my file in html extension instead of somehow create a file with a js extension because inside contains javascript not html – We're All Mad Here Mar 07 '14 at 20:14
actually i did after seeing this post but thanks anyway [HERE](http://stackoverflow.com/questions/14801349/ultra-simple-chrome-extension-doesnt-addeventlistener-to-button-onclick-event) – We're All Mad Here Mar 07 '14 at 20:20

Trouble creating chrome extension

2 Answers2