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

Question

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

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

背景.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

几个主要问题:

1. 您依赖于页面上具有 ID header 的某些元素。此类 ID 由网站设计者自行决定，因此实际上很少有页面(包括 Google)拥有该 ID。也许可以选择更通用的内容，例如页面标题 (document.title)。
2. “扩展按钮”是什么意思？如果它意味着浏览器操作，那么它就是您的扩展的一部分，因此您想要从后台脚本发送某些内容是正确的。这也是一个更简单的情况，因为很可能(除了上述没有包含 ID header 元素的 Google 页面的问题之外)，您只是没有捕获 browser action click event 。然而，如果它是某个注入(inject)的按钮，那就相反了。

你想要什么(浏览器操作版本)

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({});
  }
});

您可能想要什么(注入(inject)按钮点击版本)

背景.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);
  }
});

下面评论的第二个回复的代码

背景.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});
});