在内容脚本和背景页面之间建立通信链接 [英] Establish a communication link between content script and background page

问题描述

使用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（{}）; 
}）; 
  

解决方案

几个主要问题：

1. 您取决于ID 标题页面上的某个元素。这些ID由网站设计人员自行决定，因此只有极少数网页实际上具有该网页（包括Google）。可能会寻求一些更普遍的东西，比如页面的标题（ document.title ）。


2. 什么是扩展名按钮的意思？如果它意味着一个浏览器动作，那么这是你的扩展的一部分，所以你想从后台脚本发送一些东西是正确的。这也是一个更简单的情况，因为很可能（除了上面没有Google页面的元素ID 头）的问题，您只是没有捕获< href =http://code.google.com/chrome/extensions/browserAction.html#event-onClicked =noreferrer>浏览器操作点击事件。然而，如果它是一些注入按钮，则是相反的。

您需要什么（浏览器操作版本） strong>

background.html（内嵌）：

  chrome。 browserAction.onClicked.addListener（function（tab）{
 chrome.tabs.getSelected（null，function（tab）{
 chrome.tabs.sendRequest（tab.id，{method：getHTML}，函数（响应）{
 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 ，send，sendResponse）{
 if（request.method ===getHTML）{
 console.log（request.data）; 
} 
}）; 
  

content_script.js：

  function buttonClick（）{
 chrome.extension.sendRequest（{method：getHTML，data：document.title}）; 
 
  

以下评论回应代码

非常重要的建议： Chrome的开发人员参考可能是其中最友好的之一。如果您想知道 chrome。* API的哪些部分可用，请从这里开始。

  function getHtml（tabId）{
 chrome.tabs.sendRequest（tabId，{method：getHTML}，function（response）{
 console.log（response.data）; 
}）; 
} 
 
 //请注意，只有在制表符已经加载
 chrome.tabs.onSelectionChanged.addListener（function（tabId）{
 getHtml（tabId） ）; 
}）; 
 
 //这会在第一次加载页面时激发
 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

 （$方法：getHTML，data：e.which}）; 
}） ; 
  

Developing a chrome extension using javascript is one of my university projects.

I don't know how to establish a communication link between content script and background page using messaging. I need some help in this establishing the connection

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

解决方案

A few major issues:

1. You're depending on some element on the page having the ID header. Such IDs are at the discretion of the site designer, so very few pages actually do have that (including Google). Maybe go for something a little more universal, like the title of the page (document.title).
2. What does "the extension button" mean? If it means a browser action, that's a part of your extension, so you're correct in wanted to send something from the background script. This is also an easier case, as it's probable that (aside from the issue above of no Google pages having an element of ID header), you're just not capturing the browser action click event. If it's some injected button, however, it's the other way around.

What you want (browser action version)

background.html (inline):

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

What you might want (injected button click version)

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

Code for response to comment below

Very important recommendation: Chrome's developer reference is probably one of the friendliest out there. If you want to know what parts of the chrome.* API are available, start there.

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

Code for second response to comment below

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

这篇关于在内容脚本和背景页面之间建立通信链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！