Question

使用javascript开发chrome扩展程序是我的大学项目之一。

我不知道如何使用消息传递在内容脚本和后台页面之间建立通信链接。我在建立连接方面需要一些帮助

background.html

chrome.tabs.getSelected(null, function(tab) { 
    chrome.tabs.sendRequest(tab.id, {method: "getHTML"}, function(response) { 
        console.log(response.data); 
    }); 
});

content_script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if (request.method == "getHTML") 
        sendResponse({data: document.getElementById('header').innerHTML}); 
    else sendResponse({}); 
});

Answer 1

一些主要问题：

您依赖于ID为header的网页上的某些元素。这些ID由网站设计师自行决定，因此实际上很少有网页（包括Google）。也许选择一些更普遍的东西，比如页面标题（document.title）。
“扩展按钮”是什么意思？如果它意味着浏览器操作，这是您的扩展的一部分，那么您想要从后台脚本发送内容是正确的。这也是一个更容易的情况，因为除了以上没有带有ID header元素的Google网页的问题之外，您可能只是没有捕获browser action click event。但是，如果它是一些注入按钮，那就相反了。

您想要什么（浏览器操作版本）

background.html（内联）：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, { method: "getHTML"}, function(response) {
      console.log(response.data);
    });
  });
});

content_script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    sendResponse({data: document.title});
  } else {
    sendResponse({});
  }
});

您可能需要的内容（注入按钮点击版本）

background.html：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    console.log(request.data);
  }
});

content_script.js：

function buttonClick() {
  chrome.extension.sendRequest({method: "getHTML", data: document.title});
}

以下评论回复代码

非常重要的建议：Chrome's developer reference可能是最友好的人之一。如果您想知道chrome.* API的哪些部分可用，请从那里开始。

function getHtml(tabId) {
  chrome.tabs.sendRequest(tabId, { method: "getHTML"}, function(response) {
    console.log(response.data);
  });
}

// Note that this will only work once a tab has loaded
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
  getHtml(tabId);
});

// This fires the first time a page is loaded
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
  if (changeInfo.status === "complete") {
    getHtml(tabId);
  }
});

以下评论的第二回复代码

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    console.log(request.data);
  }
});

content_script.js

document.addEventListener("keypress", function(e) {
  chrome.extension.sendRequest({method: "getHTML", data: e.which});
});

Answer 2

Google是您的朋友：http://code.google.com/chrome/extensions/messaging.html

在内容脚本和后台页面之间建立通信链接

2 个答案: