StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>My Demo extension is as follows</p> <p><strong>Files & Roles</strong></p> <p>a) <em>manifest.json</em> <a href="https://developer.chrome.com/extensions/manifest.html" rel="nofollow noreferrer">(Documentation)</a> </p> <p>b) <em>myscript.js</em> (Content Script See <a href="https://developer.chrome.com/extensions/content_scripts.html" rel="nofollow noreferrer">Documentation</a>)</p> <p>c) <em>background.js</em> (Background HTML File See <a href="https://developer.chrome.com/extensions/background_pages.html" rel="nofollow noreferrer">Documentation</a>)</p> <p>d) <em>popup.html</em> (Browser Action Popup See <a href="https://developer.chrome.com/extensions/browserAction.html#popups" rel="nofollow noreferrer">Documentation</a>)</p> <p>e) <em>popup.js</em> (Receptor of Modified value from Background Page)</p> <p><strong><em>manifest.json</em></strong></p> <p>Registered all files to manifest(Viz background,popup,content scripts) with permissions</p> <pre><code>{ "name":"Communication Demo", "description":"This demonstrates modes of communication", "manifest_version":2, "version":"1", "permissions":["<all_urls>"], "background":{ "scripts":["background.js"] }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["myscript.js"] } ], "browser_action":{ "default_icon":"screen.png", "default_popup":"popup.html" } } </code></pre> <p><strong><em>myscript.js</em></strong> </p> <p>Used <a href="https://developer.chrome.com/extensions/runtime#method-sendMessage" rel="nofollow noreferrer">sendMessage() API</a> for communicating with background page</p> <pre><code>var d = document.domain; chrome.extension.sendMessage({ dom: d }); </code></pre> <p><strong><em>background.js</em></strong></p> <p>Added Event Listeners for Content and popup.js using <a href="https://developer.chrome.com/extensions/extension.html#type-Port" rel="nofollow noreferrer">onMessage()</a> and <a href="https://developer.chrome.com/extensions/extension.html#type-Port" rel="nofollow noreferrer">onConnect()</a> Listeners</p> <pre><code>var modifiedDom; chrome.extension.onMessage.addListener(function (request) { modifiedDom = request.dom + "Trivial Info Appending"; }); chrome.extension.onConnect.addListener(function (port) { port.onMessage.addListener(function (message) { if (message == "Request Modified Value") { port.postMessage(modifiedDom); } }); }); </code></pre> <p><strong><em>popup.html</em></strong></p> <p>Sample browser action HTML Page registering popup.js to avoid <a href="https://developer.chrome.com/extensions/contentSecurityPolicy.html" rel="nofollow noreferrer">Inline Scripting</a></p> <pre><code><!doctype html> <html> <head> <script src="popup.js"></script> </head> <body></body> </html> </code></pre> <p><strong><em>popup.js</em></strong></p> <p>Used <a href="https://developer.chrome.com/extensions/extension.html#type-Port" rel="nofollow noreferrer">Port\Long Lived Connection</a> for communicating with background page for fetching results</p> <pre><code>var port = chrome.extension.connect({ name: "Sample Communication" }); port.postMessage("Request Modified Value"); port.onMessage.addListener(function (msg) { console.log("Modified Value recieved is " + msg); }); </code></pre> <p>Hope this helps, let me know if you need more information</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