Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Your Goal</h1> <ul> <li>Click extension button</li> <li>Extension popup window opens with controls</li> <li>Execute script on current tab based on controls in extension popup</li> </ul> <h1>Tips</h1> <ul> <li>Think of the background page as the control hub. It takes incoming requests from various scripts in your Chrome extension, has elevated permissions to do things like cross-domain requests (if defined in the manifest), and more.</li> <li>You should use the <a href="http://developer.chrome.com/extensions/manifest.html#manifest_version" rel="noreferrer">manifest version 2</a> since version 1 is deprecated.</li> <li>Manifest version 2 doesn't allow inline scripts so all scripts will need to be loaded as their own file.</li> </ul> <hr> <h1>Example</h1> <h2>manifest.json</h2> <pre class="lang-js prettyprint-override"><code>{ "name": "Stackoverflow Popup Example", "manifest_version": 2, "version": "0.1", "description": "Run process on page activated by click in extension popup", "browser_action": { "default_popup": "popup.html" }, "background": { "scripts": ["background.js"] }, "permissions": [ "tabs", "http://*/*", "https://*/*" ] } </code></pre> <h2>background.js</h2> <pre class="lang-js prettyprint-override"><code>chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { switch (request.directive) { case "popup-click": // execute the content script chrome.tabs.executeScript(null, { // defaults to the current tab file: "contentscript.js", // script to inject into page and run in sandbox allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0. }); sendResponse({}); // sending back empty response to sender break; default: // helps debug when request directive doesn't match alert("Unmatched request of '" + request + "' from script to background.js from " + sender); } } ); </code></pre> <h2>popup.html</h2> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;script src="popup.js"&gt;&lt;/script&gt; &lt;style type="text/css" media="screen"&gt; body { min-width:250px; text-align: center; } #click-me { font-size: 20px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;button id='click-me'&gt;Click Me!&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <h2>popup.js</h2> <pre class="lang-js prettyprint-override"><code>function clickHandler(e) { chrome.runtime.sendMessage({directive: "popup-click"}, function(response) { this.close(); // close the popup when the background finishes processing request }); } document.addEventListener('DOMContentLoaded', function () { document.getElementById('click-me').addEventListener('click', clickHandler); }) </code></pre> <h2>contentscript.js</h2> <pre class="lang-js prettyprint-override"><code>console.log("chrome extension party!"); </code></pre> <hr> <h1>Running Example Screenshots</h1> <p>Clicking extension button with browser window opened to exampley.com</p> <p><img src="https://i.stack.imgur.com/DLOej.png" alt="Clicking extension button with browser window opened to exampley.com"></p> <p>After clicking 'Click Me!' button in extension popup</p> <p><img src="https://i.stack.imgur.com/wOlDm.png" alt="After clicking &#39;Click Me!&#39; button in extension popup"></p> <hr> <h1>Example files in zip</h1> <p><a href="http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip" rel="noreferrer">http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip</a></p>
    singulars
    1. This table or related slice is empty.
    1. PODetect a button click in the browser_action form of a Google Chrome Extension
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRyan Wu
    1. USMike Grace
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODetect a button click in the browser_action form of a Google Chrome Extension
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks very much, Mike! Is there a difference between the source in your post and the contents of the .zip file? The reason I ask is because the .zip file seems to be corrupt or invalid.
      singulars
      1. PO
      1. USLee Grey
    2. COThere is no difference. Try again, it should work now. Also, don't forget to up vote and accept if it helped or solved your issue.
      singulars
      1. PO
      1. USMike Grace
    3. COThanks, Mike, this was VERY helpful! I accepted the answer. Unfortunately, my reputation is two shy of being able to vote up an answer. I'll come back and do it when I'm less of a nobody. :-)
      singulars
      1. PO
      1. USLee Grey
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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