StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 :)</p> <hr> <h2>User Story</h2> <p>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.</p> <h2>The Plan</h2> <p>From the above requirements, you will quickly find out that the following is required:</p> <ul> <li><a href="http://code.google.com/chrome/extensions/content_scripts.html">Content Script</a> - Because you would need to communicate to the DOM directly.</li> <li><a href="http://code.google.com/chrome/extensions/background_pages.html">Background Pages</a> - You need a single place to do external XHR requests (to communicate to a remote server).</li> <li><a href="http://code.google.com/chrome/extensions/messaging.html">Message Passing</a> - To communicate between the Content Script and the Background Page.</li> </ul> <p>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.</p> <hr> <h2>Popup</h2> <p>Your popup will just be a normal "div" element that you dynamically create in JavaScript. Something like following:</p> <pre><code>var overlayDOM= document.createElement('div'); ... add your stuff to overlayDOM document.body.appendChild(overlayDOM); </code></pre> <p>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. </p> <h2>Context Menu</h2> <p>Now there are two ways to use content scripts. The questions that you have to ask yourself is the following:</p> <ul> <li>Is a user going to activate that popup from the browser process? For example, is the popup going to show up programmatically from any extension UI (context menus, page actions, browser actions, specific events, etc). </li> </ul> <p>or</p> <ul> <li>The popup will always visible on the DOM, no user intervention is needed to make it visible.</li> </ul> <p>If you choose the former, then you can use the tabs <a href="http://code.google.com/chrome/extensions/tabs.html#method-executeScript">executeScript</a> 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:</p> <pre><code>chrome.tabs.executeScript(tabId, {file: 'popup_overlay.js'}); </code></pre> <p>If you planned to choose the latter (the popup always visible on the page). You can inject that <code>popup_overlay.js</code> in every page by defining it in the <a href="http://code.google.com/chrome/extensions/content_scripts.html#registration">manifest</a>.</p> <pre><code>"content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["popup_overlay.js"] } ], </code></pre> <h2>Background Page</h2> <p>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 <a href="http://code.google.com/chrome/extensions/manifest.html#permissions">manifest</a>. Make sure you look at the <a href="http://code.google.com/chrome/extensions/match_patterns.html">Match Patterns</a> to make sure your permission is as limited as possible.</p> <pre><code>"permissions": [ "tabs", "http://www.mywebsite.com/" ], </code></pre> <p>Once you setup the permissions, you can communicate to the remote service via <a href="https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest">XmlHttpRequests</a> (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.</p> <pre><code>// Lives in the Background Page var service = new RemoteService(); </code></pre> <h2>Message Passing</h2> <p>As explained above, <a href="http://code.google.com/chrome/extensions/messaging.html">Message Passing</a> 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.</p> <p>You first need to setup the background page to receive requests, this is how you setup the request listener:</p> <pre><code>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. }); </code></pre> <p>You can make the above fancier, but for the sake of explaining, I am following the <a href="http://code.google.com/chrome/extensions/messaging.html">Message Passing</a> 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.</p> <p>In your content script you can easily send the request to the background page:</p> <pre><code>// Retrieve the username called mohamedmansour. Continuation from above. chrome.extension.sendRequest({method: 'GetUser', username: 'mohamedmansour'}, function(response) { console.log(response.result); }); </code></pre> <p>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.</p> <p>Once you get your mind around Messaging, you will notice how easy it is for sending JSON messages back and fourth.</p> <p>Hope that helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload