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

问题

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)
    };
}

回答1:

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();
});

回答2:

chrome.browserAction.onClicked.addListener(promptBox);

回答3:

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());

来源：https://stackoverflow.com/questions/13193549/run-javascript-with-click-on-popup-html-icon-in-chrome-extension

标签

javascript

google-chrome-extension