如何将数据从后台页面获取到Google Chrome扩展程序中的内容脚本

Question

我一直在尝试将数据从我的后台页面发送到我的Chrome扩展程序中的内容脚本.我似乎无法让它工作.我在线阅读了一些帖子,但它们并不是很清晰,而且看起来很高.我已经设法使用Chrome样本上的Oauth联系人示例来运行oauth.身份验证工作,我可以通过打开一个新选项卡获取数据并在html页面中显示它.

我想将此数据发送到内容脚本.

我在这方面遇到了很多麻烦,如果有人可以概述你需要遵循从bg页面发送数据到内容脚本甚至更好的代码的明确步骤,我将非常感激.任何接受者？

我的背景页面的代码如下(我已经排除了oauth paramaeters和其他)

` function onContacts(text, xhr) {
    contacts = [];
    var data = JSON.parse(text);
    var realdata = data.contacts;
    for (var i = 0, person; person = realdata.person[i]; i++) {
      var contact = {
        'name' : person['name'],
        'emails' : person['email']
      };


      contacts.push(contact); //this array "contacts" is read by the 
 contacts.html page when opened in a new tab

    }

    chrome.tabs.create({ 'url' : 'contacts.html'}); sending data to new tab
    //chrome.tabs.executeScript(null,{file: "contentscript.js"});
    may be this may work?

  };

  function getContacts() {
    oauth.authorize(function() {
      console.log("on authorize");
      setIcon();
      var url = "http://mydataurl/";
      oauth.sendSignedRequest(url, onContacts);

    });
  };

  chrome.browserAction.onClicked.addListener(getContacts);`

由于我不太确定如何将数据导入内容脚本,因此我不会发布我的失败内容脚本的多个版本.如果我能得到一个关于如何从我的内容脚本请求"contacts"数组的示例,以及如何从bg页面发送数据,这将是很棒的!

Answer 1

您有两种方法可以将数据导入内容脚本:

1. 使用标签API:http: //code.google.com/chrome/extensions/tabs.html#method-executeScript
2. 使用消息传递:http: //code.google.com/chrome/extensions/messaging.html

使用Tab API

当我的扩展程序偶尔使用一次时,我通常会使用这种方法,例如,将图像设置为我的桌面墙纸.人们不会每隔一秒或每分钟设置一次壁纸.他们通常每周或每天做一次.所以我只是向该页面注入一个内容脚本.这样做非常简单,您可以按照文档中的说明通过文件或代码执行此操作:

chrome.tabs.executeScript(tab.id, {file: 'inject_this.js'}, function() {
  console.log('Successfully injected script into the page');
});

使用消息

如果您经常需要来自您网站的信息,最好使用消息传递.有两种类型的消息传递:长期和单次请求.您的内容脚本(您在清单中定义)可以侦听扩展请求:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'ping')
    sendResponse({ data: 'pong' });
  else 
    sendResponse({});
});

您的后台页面可以通过消息传递向该内容脚本发送消息.如下所示,它将获取当前选定的选项卡并向该页面发送请求.

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

取决于您的扩展使用哪种方法.我用过这两个.对于每秒钟都会使用的扩展,我每次使用Messaging(Long-Lived).对于每次都不会使用的扩展,那么您不需要每个页面中的内容脚本,您只需使用Tab API executeScript,因为它只会在您需要时注入内容脚本.

希望有所帮助!在Stackoverflow上搜索,内容脚本和背景页面有很多答案.