Chrome扩展程序,如何从面板向内容脚本发送消息

时间:2016-04-24 03:26:30

标签: javascript google-chrome google-chrome-extension content-script

我的contentScript向backgroundScript发送一条消息,打开一个弹出/面板/窗口。此面板加载外部网页。 我在面板中注入了一些javascript来与它进行交互。

我现在尝试实现的是将数据从面板发送到主页面' (contentScript)。 我已成功设法将面板中的消息发送到backgroundScript。

我不了解/知道如何将数据从backgoundScript传递到contentScript。

更新了来自@Haibara Ai的评论

的脚本

manifest.js

folder

contentscript.js

{
"name": "My extension",
"version": "0.1",
"manifest_version": 2,
"description": "description",
"permissions": ["activeTab", "tabs","http://*/*","https://*/*"],
"content_scripts": [
    {
        // Change 'matches' attribute to load content
        // script only in pages you want to.
        "matches": ["SomeUrl"],
        "js": ["jquery.min.js", "contentscript.js", "notifier.js"]
    }
],
"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}
}

eventPage.js

$(document).ready(function() {
    var link = document.getElementById('inputLink');

    // onClick's logic below:
    link.addEventListener('click', function() {
        chrome.runtime.sendMessage({
            action: 'createWindow',
            url: $('input[name=link]').val()
          }, function(message) {
            console.log(message);
            })
    });
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) { 
    alert('a');
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
});

htmlselection.js (在弹出式/面板/窗口中注入)

chrome.runtime.onMessage.addListener(function(request) {
    if (request && request.action === 'createWindow' && request.url) {
        chrome.windows.create(
            {
                url: request.url,
                focused: true,
                incognito: true,
                type: "panel"
            }, function (newWindow) {
                chrome.tabs.executeScript(newWindow.tabs[0].id, {
                    file: "jquery.min.js"
                }, function() {
                    chrome.tabs.executeScript(newWindow.tabs[0].id, {
                        file: "htmlselection.js"
                    });
                });
                chrome.tabs.insertCSS(newWindow.tabs[0].id, {file: "htmlselection.css"});
        });
    } else {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
            console.log(chrome.tabs);
            chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});  
        });
    }
});

感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

更新

如果您想在chrome.runtime.onMessage内发送消息,只需使用回调sendResponse或使用sender.tab.id作为tabId发回消息。

您的代码还有其他问题:

  1. 由于您使用Programming injection来注入脚本,因此您应该在"web_accessible_resources"中的manifest.json中声明它们

    "web_accessible_resources": [
        "htmlselection.js",
        "jquery.min.js",
        "htmlselection.css"
    ]
    
  2. 在您的contentscript.js中,只需删除邮件部分,因为您在此脚本中未收到任何内容。

  3. 对于eventpage.js,请使用sendResponse代替tab.query

    else {
        console.log("2");
        sendResponse({ action: "SendIt" });
    }
    
  4. 看看Message Passing,您可以使用以下代码段从后台页面发送消息:

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
        console.log(response.farewell);
      });
    });
    

答案 1 :(得分:-1)

代码段的修正版:

chrome.tabs.query({active: true, currentWindow: false}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

设置currentWindow:false并且它有效。