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

Question

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

我的方法是从 popup.html 向 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>

eventPage.js

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

popup.js

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

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>"]
}

编辑：在控制台中发现一条错误消息：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令："script-src 'self' chrome-extension-resource:"。启用内联执行需要 'unsafe-inline' 关键字、散列 ('sha256-...') 或随机数 ('nonce-...')。

Answer 1

问题是您不能在 chrome 扩展中使用 "onclick" 或内联 javascript。必须在header中使用链接的js文件，并使用事件侦听器来处理点击事件。

Answer 2

内容安全策略阻止您在 HTML 中使用 JavaScript（在这种情况下，由于 popup.html 文件中的 onclick="sendMessage()"，您收到错误消息.

您可以通过从按钮中删除 onclick 属性并在 popup.js 文件中添加事件侦听器来获得所需的结果：

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

Answer 3

删除onclick="sendMessage()"并将其写入popup.js

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

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

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

Chrome Extensions: Passing message by button from popup.html to event page

html

javascript

google-chrome

message-passing

popup