Javascript Chrome扩展：通过按钮将消息从popup.html传递到事件页面_Javascript_Html_Google Chrome_Popup_Message Passing

Javascript Chrome扩展：通过按钮将消息从popup.html传递到事件页面

javascript html google-chrome

Javascript Chrome扩展：通过按钮将消息从popup.html传递到事件页面,javascript,html,google-chrome,popup,message-passing,Javascript,Html,Google Chrome,Popup,Message Passing,我想通过单击popup.html中包含的按钮从我的popup.html中打开一个新选项卡我的方法是将一条消息从popup.html发送到eventPage.js，当收到消息时，eventPage.js将打开新选项卡然而，这是行不通的。请参阅下面的代码： popup.html <!DOCTYPE html> <html style=''> <head> <script src="popup.js"></script&

我想通过单击popup.html中包含的按钮从我的popup.html中打开一个新选项卡

我的方法是将一条消息从popup.html发送到eventPage.js，当收到消息时，eventPage.js将打开新选项卡

然而，这是行不通的。请参阅下面的代码：

popup.html

<!DOCTYPE html>
<html style=''>
    <head>
        <script src="popup.js"></script>
    </head>

    <body style="width:400px;">
        <div id="content">
            <div id="openTab"><button type="button" id="btnOpenTab" name="btnOpenTab" onclick="sendMessage()">Open New Tab</button></div>
        </div>
    </body>
</html>

popup.js

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse)
    { 
        if (request.action == "openNewTab")
            chrome.tabs.create({ url: request.url });
    }
);

function sendMessage()
                {
                    chrome.extension.sendMessage({
                        action: "openNewTab",
                        url: "www.google.com"
                    });
                }

function sendMessage(){
        chrome.extension.sendMessage({
        action: "openNewTab",
        url: "http://stackoverflow.com/questions/25609195/send-data-from-background-js-to-popup-html"
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('btnOpenTab');
    // onClick's logic below:
    link.addEventListener('click', function() {
        sendMessage();
    });
});

manifest.json

{
  "name": "Open new tab",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Opens new tab",

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

{
“名称”：“打开新选项卡”，
“版本”：“1.0”，
“清单版本”：2，
“说明”：“打开新选项卡”，
“背景”：{
“脚本”：[“eventPage.js”]，
“持续”：假
},
“浏览器操作”：{
“默认图标”：“icon.png”，
“默认弹出窗口”：“popup.html”
},
“权限”：[“选项卡”，“”]
}

编辑：在控制台中发现包含以下消息的错误消息：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script src'self'chrome extension resource:”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-…'）或nonce（'nonce-…'）。

问题在于不能在chrome扩展中使用“onclick”或内联javascript。必须在标题中使用链接的js文件，并使用事件侦听器来处理单击事件。

内容安全策略禁止您在HTML中使用JavaScript（在这种情况下，由于

popup.HTML

文件中的

onclick=“sendMessage（）”

，您会收到一个错误

通过从按钮中删除

onclick

属性，而是在

popup.js

文件中添加事件侦听器，可以获得所需的结果：

document.getElementById('btnOpenTab').onclick = sendMessage;

删除

onclick=“sendMessage（）”

并将其写入popup.js

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse)
    { 
        if (request.action == "openNewTab")
            chrome.tabs.create({ url: request.url });
    }
);

function sendMessage()
                {
                    chrome.extension.sendMessage({
                        action: "openNewTab",
                        url: "www.google.com"
                    });
                }

function sendMessage(){
        chrome.extension.sendMessage({
        action: "openNewTab",
        url: "http://stackoverflow.com/questions/25609195/send-data-from-background-js-to-popup-html"
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('btnOpenTab');
    // onClick's logic below:
    link.addEventListener('click', function() {
        sendMessage();
    });
});