Run javascript with click on popup.html icon in Chrome extension

Question

What I want is simple. The user clicks on the icon of the extension and a JS code is executed showing a prompt box asking for two values. But I cannot figure out how to link the JS with the popup.html correctly. So far with the click on the icon only the popup opens without running the JS code.

popup.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="prompt.js"></script>
    </head>
    <body onload="promptBox()">
    </body>
</html>

prompt.js

function promptBox() {
    prompt('Choose File 1',A14nH);
    R1Gh7=prompt('Choose File 2',L3f7);
    if(L3f7&&R1Gh7) {
        Fr4Q='<frameset cols=\'*,*\'>\n<frame src=\''+L3f7+'\'/>';
        Fr4Q+='<frame src=\''+R1Gh7+'\'/>\n';
        Fr4Q+='</frameset>';
        with(document) {
            write(Fr4Q);
            void(close())
        }
    }
    else{
       void(null)
    };
}

dan-lee · Accepted Answer · 2012-11-02 11:05:13Z

7

You cannot run inline handlers within chrome extensions.
Do a right click on your extensions icon and click "Inspect Popup". You'll see the following:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

You need to remove onload="promptBox()" from your body and add an listener to your prompt.js instead:

function promptBox() {
  // ...
}

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

answered Nov 2, 2012 at 11:05

dan-lee

14.5k6 gold badges55 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Legends Over a year ago

It would be good to mention that jQuery doesn't work that well inside of popup.html, for example: this in an jQuery eventhandler is window. So, calling $(this).remove() will not work, but plain JS works document.getElementById("btnX").remove();

Florian Margaine · Accepted Answer · 2012-11-02 10:56:00Z

4

chrome.browserAction.onClicked.addListener(promptBox);

answered Nov 2, 2012 at 10:56

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

Comments

orschiro · Accepted Answer · 2012-11-02 17:46:38Z

For what I wanted to do (manipulating current page by inserting frames) it turned out that content script was the keyword.

The background script listens for the onclick action on the extension icon and triggers the content script which calls the promptBox function.

manifest.json

{
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "browser_action": {
        "default_title": "Dual View Split Screen", 
        "default_icon": "icon48x48.png"
    }   
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file: "prompt.js"});
});

prompt.js

function promptBox() {
    windowLeft = prompt('Please choose your left window:', document.URL);
    windowRight = prompt('Please choose your right window:', document.URL);
    if(windowLeft && windowRight) {
        result='<frameset cols=\'*,*\'>\n<frame src=\''+windowLeft+'\'/>';
        result+='<frame src=\''+windowRight+'\'/>\n';
        result+='</frameset>';
        with(document) {
            write(result);
            void(close())
        }
    }
    else{
       void(null)
    };
};

chrome.extension.onClicked.addListener(promptBox());

Collectives™ on Stack Overflow

Run javascript with click on popup.html icon in Chrome extension

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related