在Chrome扩展中单击popup.html图标运行javascript_Javascript_Google Chrome Extension

在Chrome扩展中单击popup.html图标运行javascript

javascript google-chrome-extension

在Chrome扩展中单击popup.html图标运行javascript,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我想要的很简单。用户单击扩展的图标，执行一个JS代码，显示一个提示框，询问两个值。但是我不知道如何将JS与popup.html正确链接。到目前为止，点击图标只会打开弹出窗口，而不会运行JS代码 popup.html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="prompt.js"></script> </head

我想要的很简单。用户单击扩展的图标，执行一个JS代码，显示一个提示框，询问两个值。但是我不知道如何将JS与popup.html正确链接。到目前为止，点击图标只会打开弹出窗口，而不会运行JS代码

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

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

函数提示框（）{
提示（“选择文件1”，A14nH）；
R1Gh7=提示（'选择文件2'，L3f7）；
如果（L3f7和R1Gh7）{
Fr4Q='\n'；
Fr4Q+='\n'；
Fr4Q+=''；
附（文件）{
写入（Fr4Q）；
void（close（））
}
}
否则{
无效（空）
};
}

不能在chrome扩展中运行内联处理程序。
右键单击扩展图标，然后单击“检查弹出窗口”。您将看到以下内容：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script src'self'chrome extension resource:”

您需要从身体中删除

onload=“promptBox（）”

，并将侦听器添加到您的

prompt.js

：

function promptBox() {
  // ...
}

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

对于我想做的事情（通过插入框架来操纵当前页面），结果是contentscript是关键字

后台脚本侦听扩展图标上的onclick操作，并触发调用promptBox函数的内容脚本

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

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

函数提示框（）{
windowLeft=prompt（'请选择左侧窗口：'，document.URL）；
windowRight=prompt（'请选择您的右窗口：'，document.URL）；
如果（窗口左和窗口右）{
结果='\n'；
结果+='\n'；
结果+=''；
附（文件）{
写入（结果）；
void（close（））
}
}
否则{
无效（空）
};
};
chrome.extension.onClicked.addListener（promptBox（））；

最好提到jQuery在popup.html中没有那么好地工作，例如：

这个

在jQuery事件处理程序中是

窗口

。因此，调用

$（this.remove（）

将不起作用，但普通JS可以

document.getElementById（“btnX”）.remove（）