从弹出窗口打开带有本地index.html的新选项卡,然后向其发送消息

时间:2017-07-13 15:18:06

标签: google-chrome google-chrome-extension

SendMessage在新的Tab控制台上不起作用。

消息未到达刚刚打开的标签页。

控制台上没有显示任何内容。

以下是我正在使用的格式的所有文件

Manisfest.json

QtGui

popup.html

{
   "name": "SYSHP",
   "version": "1.0",
   "description" : "SYSHP",
   "manifest_version": 2,
   "permissions": [ "http://*/", "tabs", "activeTab", "notifications", "background" ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js",
                "lib/jquery.min.js"
            ],
            "run_at": "document_end"
        }
    ],

   "icons": {
    "128": "icon128.png",
    "48": "icon48.png"
    },

   "browser_action": {
       "default_icon": "icon128.png",
       "default_title": "SYSHP",
       "default_popup": "popup.html" 
   }

}

popup.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SYSHP</title>
</head>
<body>

    <button id="preparaLista">Preparar Lista</button>
    <button>Download</button>


</body>

<script src="lib/jquery.min.js"></script>
<script src="popup.js"></script>

</html>

的index.html

var url = ('chrome-extension://' + chrome.i18n.getMessage('@@extension_id') + '/index.html');

 document.getElementById("preparaLista").addEventListener("click",handleClick);

    function handleClick(){
        chrome.tabs.create({ url: url }, function(tab) {
            chrome.tabs.sendMessage(tab.id, {type: "action_example"});
        });
    }

content.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>SYSHP</title>
</head>
<body>




</body>
<script src="lib/jquery.min.js"></script>
<script src="content.js"></script>


</html>

1 个答案:

答案 0 :(得分:0)

popup.js

document.getElementById("preparaLista").addEventListener("click",handleClick);

    function handleClick(){
        chrome.tabs.create({ url: chrome.runtime.getURL("index.html") }, function(tab) {

            var handler = function(tabId, changeInfo) {
                if(tabId === tab.id && changeInfo.status === "complete"){
                chrome.tabs.onUpdated.removeListener(handler);
                chrome.tabs.sendMessage(tabId, {type: 'opa'});
                }
            };

            // in case we're faster than page load (usually):
            chrome.tabs.onUpdated.addListener(handler);
            // just in case we're too late with the listener:
            chrome.tabs.sendMessage(tab.id, {type: "action_example2"});

        });
    }

content.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

    console.log("received message from popup: "+request.type);

});