Javascript 从Chrome分机接收消息'；在按钮'；s点击事件_Javascript_Jquery_Google Chrome Extension

Javascript 从Chrome分机接收消息'；在按钮'；s点击事件

javascript jquery google-chrome-extension

Javascript 从Chrome分机接收消息'；在按钮'；s点击事件,javascript,jquery,google-chrome-extension,Javascript,Jquery,Google Chrome Extension,我的扩展打开一个html页面（dashboard.html），其中包含一个按钮。单击“偶数”按钮，我希望接收由内容脚本发送的消息。不知何故，我不能做到这一点。代码如下所示 manifest.json { "manifest_version": 2, "name" : "My Ext", "description" : "XXX", "version" : "1.0", "permissions": [ "tabs" ], "co

我的扩展打开一个html页面（dashboard.html），其中包含一个按钮。单击“偶数”按钮，我希望接收由内容脚本发送的消息。不知何故，我不能做到这一点。代码如下所示

manifest.json

{
    "manifest_version": 2,
    "name" : "My Ext",
    "description" : "XXX",
    "version" : "1.0",
    "permissions": [
        "tabs"
  ],
    "content_scripts" : [{
        "matches" : ["http://example.com/"],
        "js" : ["jquery.js","script.js"]
    }],
"background":{
  "scripts": ["jquery.js","background.js"]
},
    "browser_action": {
        "default_title": "XX"
      }
}

dashboard.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery.js"></script>
    <script src="background.js"></script>
  </head>
  <body>
      <form>
      <textarea id="search"></textarea>
      <input id="button" type="button" value="Search" />
      </form>
  </body>
</html>

background.js

    chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  alert(response.farewell);
});

    var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('dashboard.html') + queryStr;
$(document).ready(function ()
{
    chrome.browserAction.onClicked.addListener(function (tab) {
        chrome.tabs.create({ url: loaderURL + tab.id });
    });
    if (location.search && (location.search.indexOf(queryStr) === 0))
    {
        var tabID = parseInt(location.search.substring(queryStr.length));
        alert(tabID);
        $('#button').click(function ()
        {
          /********following COde is not producing any result **/
            chrome.runtime.onMessage.addListener(
              function(request, sender, sendResponse) {
                alert(sender.tab ?
                            "from a content script:" + sender.tab.url :
                            "from the extension");
                alert(request.greeting);
                if (request.greeting == "hello")
                  sendResponse({farewell: "goodbye"});
              });


        });

    }
});

我不明白为什么您需要从内容脚本发送消息，因为您可以使用

sendResponse

传回任何必要的数据，但是

在manifest.json中：

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

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

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["jquery.min.js", "content.js"],
    }],

    "browser_action": {
        "default_title": "Test Extension"
//        "default_icon": {
//            "19": "img/icon19.png",
//            "38": "img/icon38.png"
//        },
    },

}

var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('dashboard.html') + queryStr;
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: loaderURL + tab.id });
});

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    alert('Message from a view:\n'
          + JSON.stringify(msg));

    if (msg.method === 'getHTML') {
        sendResponse({ data: 'Welcome from Content Script' });
        chrome.runtime.sendMessage({
            body: 'Here I am, sending you another message !'
        });
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <script src="jquery.min.js"></script>
        <script src="dashboard.js"></script>
    </head>
    <body>
        <form>
            <textarea id="search"></textarea><br />
            <input type="button" id="button" value="Search" />
        </form>
    </body>
</html>

var queryStr = '?tabId=';

chrome.runtime.onMessage.addListener(function(msg, sender) {
    alert('Message from: Tab ' + sender.tab.id + ' (using `sendMessage`)\n'
          + JSON.stringify(msg));
});

$(document).ready(function () {
    if (location.search && (location.search.indexOf(queryStr) === 0)) {
        var tabID = parseInt(location.search.substring(queryStr.length));
        $('#button').click(function () {
            chrome.tabs.sendMessage(tabID, {
                method: 'getHTML',
                param:  'myParam'
            }, function (response) {
                if (chrome.runtime.lastError) {
                    alert('ERROR: ' + chrome.runtime.lastError.message);
                } else {
                    alert('Message from: Tab ' + tabID
                          + ' (using `sendResponse`)\n'
                          + response.data);
                }
            });
        });
    }
});

在background.js中：

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

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

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["jquery.min.js", "content.js"],
    }],

    "browser_action": {
        "default_title": "Test Extension"
//        "default_icon": {
//            "19": "img/icon19.png",
//            "38": "img/icon38.png"
//        },
    },

}

var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('dashboard.html') + queryStr;
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: loaderURL + tab.id });
});

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    alert('Message from a view:\n'
          + JSON.stringify(msg));

    if (msg.method === 'getHTML') {
        sendResponse({ data: 'Welcome from Content Script' });
        chrome.runtime.sendMessage({
            body: 'Here I am, sending you another message !'
        });
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <script src="jquery.min.js"></script>
        <script src="dashboard.js"></script>
    </head>
    <body>
        <form>
            <textarea id="search"></textarea><br />
            <input type="button" id="button" value="Search" />
        </form>
    </body>
</html>

var queryStr = '?tabId=';

chrome.runtime.onMessage.addListener(function(msg, sender) {
    alert('Message from: Tab ' + sender.tab.id + ' (using `sendMessage`)\n'
          + JSON.stringify(msg));
});

$(document).ready(function () {
    if (location.search && (location.search.indexOf(queryStr) === 0)) {
        var tabID = parseInt(location.search.substring(queryStr.length));
        $('#button').click(function () {
            chrome.tabs.sendMessage(tabID, {
                method: 'getHTML',
                param:  'myParam'
            }, function (response) {
                if (chrome.runtime.lastError) {
                    alert('ERROR: ' + chrome.runtime.lastError.message);
                } else {
                    alert('Message from: Tab ' + tabID
                          + ' (using `sendResponse`)\n'
                          + response.data);
                }
            });
        });
    }
});

在content.js中：

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

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

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["jquery.min.js", "content.js"],
    }],

    "browser_action": {
        "default_title": "Test Extension"
//        "default_icon": {
//            "19": "img/icon19.png",
//            "38": "img/icon38.png"
//        },
    },

}

var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('dashboard.html') + queryStr;
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: loaderURL + tab.id });
});

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    alert('Message from a view:\n'
          + JSON.stringify(msg));

    if (msg.method === 'getHTML') {
        sendResponse({ data: 'Welcome from Content Script' });
        chrome.runtime.sendMessage({
            body: 'Here I am, sending you another message !'
        });
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <script src="jquery.min.js"></script>
        <script src="dashboard.js"></script>
    </head>
    <body>
        <form>
            <textarea id="search"></textarea><br />
            <input type="button" id="button" value="Search" />
        </form>
    </body>
</html>

var queryStr = '?tabId=';

chrome.runtime.onMessage.addListener(function(msg, sender) {
    alert('Message from: Tab ' + sender.tab.id + ' (using `sendMessage`)\n'
          + JSON.stringify(msg));
});

$(document).ready(function () {
    if (location.search && (location.search.indexOf(queryStr) === 0)) {
        var tabID = parseInt(location.search.substring(queryStr.length));
        $('#button').click(function () {
            chrome.tabs.sendMessage(tabID, {
                method: 'getHTML',
                param:  'myParam'
            }, function (response) {
                if (chrome.runtime.lastError) {
                    alert('ERROR: ' + chrome.runtime.lastError.message);
                } else {
                    alert('Message from: Tab ' + tabID
                          + ' (using `sendResponse`)\n'
                          + response.data);
                }
            });
        });
    }
});

在dashboard.html中：

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

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

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["jquery.min.js", "content.js"],
    }],

    "browser_action": {
        "default_title": "Test Extension"
//        "default_icon": {
//            "19": "img/icon19.png",
//            "38": "img/icon38.png"
//        },
    },

}

var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('dashboard.html') + queryStr;
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: loaderURL + tab.id });
});

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    alert('Message from a view:\n'
          + JSON.stringify(msg));

    if (msg.method === 'getHTML') {
        sendResponse({ data: 'Welcome from Content Script' });
        chrome.runtime.sendMessage({
            body: 'Here I am, sending you another message !'
        });
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <script src="jquery.min.js"></script>
        <script src="dashboard.js"></script>
    </head>
    <body>
        <form>
            <textarea id="search"></textarea><br />
            <input type="button" id="button" value="Search" />
        </form>
    </body>
</html>

var queryStr = '?tabId=';

chrome.runtime.onMessage.addListener(function(msg, sender) {
    alert('Message from: Tab ' + sender.tab.id + ' (using `sendMessage`)\n'
          + JSON.stringify(msg));
});

$(document).ready(function () {
    if (location.search && (location.search.indexOf(queryStr) === 0)) {
        var tabID = parseInt(location.search.substring(queryStr.length));
        $('#button').click(function () {
            chrome.tabs.sendMessage(tabID, {
                method: 'getHTML',
                param:  'myParam'
            }, function (response) {
                if (chrome.runtime.lastError) {
                    alert('ERROR: ' + chrome.runtime.lastError.message);
                } else {
                    alert('Message from: Tab ' + tabID
                          + ' (using `sendResponse`)\n'
                          + response.data);
                }
            });
        });
    }
});

还有一件事：

您不需要
```
选项卡
```
权限（至少对于当前显示的功能）。这是一个强大的权限，所以不要轻率地使用（出于安全原因和不吓唬用户）

我相信你在把事情混为一谈。正如在对上一个问题的评论中所述，使用脚本（此处为

background.js

）作为背景页面和视图中的js脚本（

dashboard.html

）并不是一个好的做法。在

background.js

中，您正在按钮的

onclick

回调中注册

onMessage

事件的侦听器。这没有什么意义（考虑到您的实际背景页面中没有按钮，就更没有意义了）。按照您的方式，每次单击按钮时，

onMessage

事件的侦听器将仅在

dashboard.html

中注册。因此，您建议我为此添加一个单独的background.html页面，并在其中调用script tag？我建议：1。添加一个不同的JS文件（比如

dashboard.JS

），并在

dashboard.html

中用它替换

background.JS

。2.从

background.js

中删除任何不相关的代码（即

位置搜索

下面的所有内容）。3.将

onMessage

侦听器移到按钮回调之外（将其作为脚本中的顶级语句）。好吧，但是background.js中接收到的消息将如何在dashboard.js和html文件中使用呢？如何通过那里？见下面我的答案！（基本上，消息是直接从

dashboard.js

接收的-不需要

background.js

参与其中。）简直太棒了。我犯了我一直在犯的错误。谢谢你的耐心和帮助！！对我来说绝对是很棒的学习。