谷歌Chrome扩展 - 建筑问题 [英] Google Chrome Extension - Architecture Question

问题描述

我在圈子里已经持续（可能是因为我有些新）通信是如何发生在Chrome浏览器扩展。

I have been going in circles (probably because I am somewhat new) to how communication takes place in Chrome Extensions.

我试图建立一个扩展的：

I am trying to build an extension that:

1）具有与用户交互的弹出
2）基于什么用户在弹出的选择，当前选项卡的DOM被修改
3）弹出也需要能够发送和接收来自远程数据库服务器接收的信息（即一个外部网站重量/数据库）

1) has a popup that interacts with the user 2) based on what the user chooses in the popup, the DOM of the current tab is modified 3) the popup also needs to be able to send and receive information from a remote database server (i.e. an external website w/ database)

对于我来说，这是非常不清楚如何建筑师所有的作品之间的沟通：我的数据库，弹出，background.html，内容脚本，网页....

For me, it is very unclear as to how to architect the communication between all the pieces: my db, popup, background.html, content scripts, webpage....

有什么想法？
安东尼

any thoughts? Anthony

推荐答案

我会尝试的步骤是什么，我认为这样做的很好的方式来解释。这并不意味着它是最好的方法，它只是一个推荐的方式：）

I will try to explain in steps what I think the nice way of doing this. It doesn't mean it is the best way, it just a recommended way :)

如果我理解正确的问题，你想显示在网站上弹出。基于什么用户在弹出选择，该网站的DOM将被修改。还有，你想弹出接收远程数据。

If I understand the question correctly, you would like to show a popup on the website. Based on what the user chooses in the popup, the websites DOM will be modified. As well, you would like the popup to receive remote data.

从上面的要求，你很快就会发现，要求如下：

From the above requirements, you will quickly find out that the following is required:

• 内容脚本 - 因为你需要传达给直接在DOM


• 背景页面 - 你需要一个地方做外部XHR请求（通信到远程服务器）。


• 消息传递 - 为内容脚本和背景页之间进行通信

• Content Script - Because you would need to communicate to the DOM directly.
• Background Pages - You need a single place to do external XHR requests (to communicate to a remote server).
• Message Passing - To communicate between the Content Script and the Background Page.

利用消息传递机制，你将能够在两个不同的世界（上下文菜单和背景页）之间传递数据。每当你想调用一个远程服务，你会要求通过消息。下面，我将讲解沿途的每一个步骤。

By using Message Passing mechanisms, you will be able to pass data between two different worlds (Context Menus, and Background Page). Whenever you want to call a remote service, you will request that through Messaging. Below, I will explain each step along the way.

您弹出只会是你动态地在JavaScript中创建一个普通的分区元素。类似以下内容：

Your popup will just be a normal "div" element that you dynamically create in JavaScript. Something like following:

var overlayDOM= document.createElement('div');
... add your stuff to overlayDOM
document.body.appendChild(overlayDOM);

或者你也可以使用iframe，以preserve风格。使用CSS技术，可以适当样式它看起来像一个弹出窗口。您可以通过使用绝对定位或任何东西沿着这些线路看中这一点。

Or you can use an iframe, to preserve the style. Using CSS techniques, you can style it appropriately to look like a popup. You can do this by using absolute positioning or anything fancy along those lines.

现在有使用内容脚本两种方式。你要问自己的问题是：

Now there are two ways to use content scripts. The questions that you have to ask yourself is the following:

• 是用户要激活从浏览器进程弹出？例如，从任何分机的用户界面将显示编程（上下文菜单，页面动作，浏览器的行动，具体的事件，等等）弹出。

或

• 弹出总是在DOM可见，无需用户干预，以使其可见。

如果你选择前者，那么你可以使用标签 executeScript 功能。这是pretty直线前进，所有你需要做的是提供您要注入到DOM（网站）在code或JavaScript文件。例如：

If you choose the former, then you can use the tabs executeScript functionality. It is pretty straight forward, all you need to do is supply the code or the JavaScript file that you want to inject to the DOM (Website). For example:

chrome.tabs.executeScript(tabId, {file: 'popup_overlay.js'});

如果你打算选择后者（在页面上弹出总是可见）。 //$c$c.google.com/chrome/extensions/：您可以通过的 popup_overlay.js 在每一页content_scripts.html＃登记>清单。

If you planned to choose the latter (the popup always visible on the page). You can inject that popup_overlay.js in every page by defining it in the manifest.

"content_scripts": [
   {
     "matches": ["http://www.google.com/*"],
     "css": ["mystyles.css"],
     "js": ["popup_overlay.js"]
   }
],

背景页

背景页面将具有权限，以便它可以与远程数据库进行通信。你需要做的第一件事是通过提供清单正确的权限。请确保你看看比赛规律，以确保您的权限是尽可能限制。

Background Page

The background page will have permission so that it can communicate to the remote database. The first thing you need to do is supply the correct permissions via manifest. Make sure you look at the Match Patterns to make sure your permission is as limited as possible.

"permissions": [
  "tabs",
  "http://www.mywebsite.com/"
],

一旦你设置的权限，可以对远程服务通过 XmlHtt $ P沟通$ pquests （XHR）。创建使用XHR你的JavaScript服务API，随意使用任何设计请你。我个人喜欢用JavaScript对象来组织我的code。你的背景页将有机会获得您所创建的实例化服务API，并可以在整个扩展的终身使用。

Once you setup the permissions, you can communicate to the remote service via XmlHttpRequests (XHR). Create your JavaScript service API that uses XHR, feel free to use any design you please. I personally like to use JavaScript objects to organize my code. Your background page will have access to those instantiated service API that you create and that you can use throughout the lifetime of your extension.

// Lives in the Background Page
var service = new RemoteService();

消息传递

如上所述，消息传递的用于允许内容脚本之间的通信和背景信息页面。在你的情况，你要弹出抢从后台页面的一些数据（因为这是你的JS对象的居住地），并把结果返回回来。当你得到这些结果，并因为在页面上显示它们的已经在同一个世界的DOM。

Message Passing

As explained above, Message Passing is used to allow communication between the Content Script and the Background page. In your case, you want the popup to grab some data from the background page (since that is where your JS object lives) and return the results back. When you get those results and display them on the page since your already in the same world as the DOM.

您首先需要设置背景页接收请求，你这是怎么设置的要求监听器：

You first need to setup the background page to receive requests, this is how you setup the request listener:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'GetUserList')
    sendResponse({result: db.getGetUserList()});
  else if (request.method == 'GetUser')
    sendResponse({result: db.getGetUser(request.username)});
  else
    sendResponse({}); // snub them.
});

您可以让上面的发烧友，但对于解释的缘故，我跟随消息传递文件，这也解释了它完美。正如你看到的上面，我们正在创造的延期请求的监听器。您处理侦听器内的要求。当你注意到了，你可以发送回一个响应了。在上述情况下，我们会发回我们所请求的方法相应的结果。

You can make the above fancier, but for the sake of explaining, I am following the Message Passing document, which explains it perfectly. As you see above, we are creating a listener for extension requests. You handle the request within the listener. As you noticed, you can send back a response too. In the above case we are sending back the appropriate result for the method we are requesting.

在您的内容脚本，你可以很容易地将请求发送到后台页面：

In your content script you can easily send the request to the background page:

// Retrieve the username called mohamedmansour. Continuation from above.
chrome.extension.sendRequest({method: 'GetUser', username: 'mohamedmansour'}, function(response) {
  console.log(response.result);
});

在上面的code片段中，我们正在发送一个请求，从内容脚本扩展，以获取用户数据mohamedmansour。然后将结果打印在控制台中。

In the code snippet above, we are sending a request back to the extension from the Content Script to get the user data for "mohamedmansour". Then the result is printed in the console.

一旦你得到你的头脑周围消息，你会发现它是发送JSON消息背部和第四多么容易。

Once you get your mind around Messaging, you will notice how easy it is for sending JSON messages back and fourth.

希望帮助！

这篇关于谷歌Chrome扩展 - 建筑问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！