如何从后台页面获取数据到谷歌浏览器扩展中的内容脚本 [英] How do I get data from a background page to the content script in google chrome extensions

问题描述

我一直在尝试将数据从后台页面发送到我的 chrome 扩展程序中的内容脚本.我似乎无法让它工作.我在网上看了几篇文章，但不是很清楚，看起来水平很高.我已经设法使用 Chrome 示例上的 Oauth 联系人示例使 oauth 正常工作.身份验证有效，我可以通过打开一个新选项卡获取数据并将其显示在 html 页面中.

I've been trying to send data from my background page to a content script in my chrome extension. i can't seem to get it to work. I've read a few posts online but they're not really clear and seem quite high level. I've got managed to get the oauth working using the Oauth contacts example on the Chrome samples. The authentication works, i can get the data and display it in an html page by opening a new tab.

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

I want to send this data to a content script.

我在这方面遇到了很多麻烦，如果有人能概述将数据从 bg 页面发送到内容脚本甚至更好的代码时需要遵循的明确步骤，我将不胜感激.有接盘侠吗?

i'm having a lot of trouble with this and would really appreciate if someone could outline the explicit steps you need to follow to send data from a bg page to a content script or even better some code. Any takers?

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

the code for my background page is below (i've excluded the oauth paramaeters and other )

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

由于我不太确定如何将数据导入内容脚本，因此我不会费心发布我失败的内容脚本的多个版本.如果我能获得一个关于如何从我的内容脚本请求联系人"数组以及如何从 bg 页面发送数据的示例，那就太好了！

As i'm not quite sure how to get the data into the content script i wont bother posting the multiple versions of my failed content scripts. if I could just get a sample on how to request the "contacts" array from my content script, and how to send the data from the bg page, that would be great!

推荐答案

您有两种选择将数据放入内容脚本:

You have two options getting the data into the content script:

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

使用标签 API

当我的扩展程序只偶尔使用一次时，我通常使用这种方法，例如，将图像设置为我的桌面壁纸.人们不会每秒钟或每分钟都设置墙纸.他们通常每周甚至每天进行一次.所以我只是向那个页面注入了一个内容脚本.这样做很容易，您可以按照文档中的说明通过文件或代码来完成:

Using Tab API

I usually use this approach when my extension will just be used once in a while, for example, setting the image as my desktop wallpaper. People don't set a wallpaper every second, or every minute. They usually do it once a week or even day. So I just inject a content script to that page. It is pretty easy to do so, you can either do it by file or code as explained in the documentation:

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

使用消息传递

如果您经常需要网站上的信息，最好使用消息传递.有两种类型的消息传递，Long-lived 和 Single-requests.您的内容脚本(您在 manifest 中定义)可以监听扩展请求:

Using Messaging

If you are constantly need information from your websites, it would be better to use messaging. There are two types of messaging, Long-lived and Single-requests. Your content script (that you define in the manifest) can listen for extension requests:

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

您的后台页面可以通过消息传递向该内容脚本发送消息.如下所示，它会获取当前选中的标签页并向该页面发送请求.

And your background page could send a message to that content script through messaging. As shown below, it will get the currently selected tab and send a request to that page.

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，因为它只会在您需要时注入内容脚本.

Depends on your extension which method to use. I have used both. For an extension that will be used like every second, every time, I use Messaging (Long-Lived). For an extension that will not be used every time, then you don't need the content script in every single page, you can just use the Tab API executeScript because it will just inject a content script whenever you need to.

希望对您有所帮助！在 Stackoverflow 上搜索一下，内容脚本和背景页面都有很多答案.

Hope that helps! Do a search on Stackoverflow, there are many answers to content scripts and background pages.

这篇关于如何从后台页面获取数据到谷歌浏览器扩展中的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！