后台脚本和popup.js之间的消息传递

时间:2014-11-07 05:58:20

标签: google-chrome google-chrome-extension messaging

我知道这是一个非常常见的问题,而且我已经阅读过很多文档和类似情况的答案,但我仍然无法让它发挥作用。所以我很抱歉,但我的问题是如何让内容脚本从popupjs获取消息。

工作流程是:当用户点击扩展图标时,它应显示带有一些选项的弹出窗口。用户点击选项,扩展程序根据点击的选项制作一些内容。

我试过以下:

manifest.js

{
 "name": "MyName",
 "version": "1",
 "description": "My chrome extension",
 "browser_action": {
    "default_popup": "popup.html"
 },
 "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": [
        "style.css"
    ],
    "js": [
        "bower_components/jquery/dist/jquery.js",
        "bower_components/bootstrap/dist/js/bootstrap.js",
        "content.js"
    ]
 }],
 "permissions": [
    "activeTab",
    "http://127.0.0.1:8000/"
 ],
 "manifest_version": 2

}

popup.html

<!doctype html>
<html>
<head>
 <title>My Extension</title>
 <script src="popup.js"></script>
</head>
<body>
 <ul>
    <li id="push" class="option">Push</li>
    <li>Actions
        <ul>
            <li id="dashboard" class="option">Dashboard</li>
            <li id="list" class="option">Your Lists</li>
            <li id="settings" class="option">Settings</li>
        </ul>
    </li>
 </ul>
</body>
</html>

popup.js

function click(e) {
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    console.log('message sent');
    chrome.tabs.sendMessage(tabs[0].id, {text:"getStuff", action: e.target.id});
 });
 window.close();
}

document.addEventListener('DOMContentLoaded', function () {
 var options = document.querySelectorAll('.option');
 for (var i = 0; i < options.length; i++) {
    options[i].addEventListener('click', click);
 }
});

content.js

chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
    if (request.text == "getStuff") {
        console.log('test sent');
    }
});

所以我看不到任何控制台日志(它应该显示在页面的常用控制台中吗?),我放在chrome.runtime.onMessage.addListener中的任何代码都不起作用。< / p>

我不太明白为什么它不起作用。我还尝试使用后台脚本来监听来自popup.js的消息,然后将消息从后台脚本传递给content.js,它也不起作用

0 个答案:

没有答案