Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Thanks Rob W for pointing me in the direction of HTML5 messaging. For the benefit of other chrome extension developers, I'm writing about the general problem I was trying to solve and the solution that worked in the end.</p> <p>I am making a chrome extension that can control music playback on a tab via a popup player. When a user clicks on play/pause/etc on the popup player, the extension should be able to convey that message to the webpage and get back a response stating whether the action was accomplished.</p> <p>My first approach was to inject a content script into the music player page. The problem is, though, that content scripts operate in a "sandbox" and cannot access native javascript on the page. Therefore, the content script was pretty useless (on its own), because while it could receive commands from the extension, it could not effect any change on the webpage itself.</p> <p>One thing that worked in my favor was that the website where the music was playing belongs to me, so I could put whatever javascript I wanted there and have it be served from the server. That's exactly what I used to my advantage: I created another javascript file that would reside on the website and communicate with the content script mentioned above, via the window object of the page (i.e. <strong>HTML5 messaging</strong>). This only works because the content script and the javascript file both exist in the same webpage and can share the window object of the page. Thanks Rob W for pointing me to this capability. Here is an example of how the javascript file on the page can initiate a connection with the content script via the window object:</p> <p>content_script.js (injected by extension into xyz.com):</p> <pre><code>window.addEventListener("message", function(event) { if(event.data.secret_key &amp;&amp; (event.data.secret_key === "my_secret_key") &amp;&amp; event.data.source === "page"){ if(event.data.type){ switch(event.data.type) { case 'init': console.log("received connection request from page"); window.postMessage({source: "content_script", type: 'init', secret_key: "my_secret_key"}, "*"); break; } } } }, false); </code></pre> <p>onpage.js (resides on server and served along with xyz.com):</p> <pre><code>window.postMessage({source: "page", type: 'init', secret_key: "my_secret_key"}, "*"); window.addEventListener("message", function(event) { if(event.data.secret_key &amp;&amp; (event.data.secret_key === "my_secret_key") &amp;&amp; event.data.source === "content_script"){ if(event.data.type){ switch(event.data.type) { case 'init': console.log("connection established"); break; } } } }, false); </code></pre> <p>I check the secret key just to make sure that the message originates from where I expect it to.</p> <p>That's it! If anything is unclear, or if you have any questions, feel free to follow up!</p>
    singulars
    1. This table or related slice is empty.
    1. POchrome extension - alternative to externally_connectable?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USsabreshack
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POchrome extension - alternative to externally_connectable?
      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
    1. This table or related slice is empty.
 

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