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

  显示原文与译文双语对照的内容
138 2

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

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

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({}); 
});
时间:原作者:0个回答

135 0

几个主要问题:

  • 你依赖于页面上具有 ID header的元素。这样的,处于站点设计器的决定位置,所以几乎没有一些页面可以以使用( 包括谷歌) 。也许去做一些更通用的事情,比如页面( document.title )的标题。
  • "。扩展按钮"意味着什么?如果这意味着浏览器操作,那就是扩展的一部分,因这里你需要在 background 脚本中发送一些东西。这也是一个容易的例子,因为( 除了 above 页面中没有 ID header 元素的页面) 可以能没有捕获浏览器操作单击事件,。但是如果是注入的按钮,它是另一种方式。

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

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

你可能需要( 插入按钮单击版本)

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

为注释 below 提供了代码

非常重要的建议:开发人员的Chrome 参考of可以能是它的中最友好的一个。如果你想知道 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);
 }
});

对注释 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});
});
原作者:
...