communication between background and popup

3,158 views
Skip to first unread message

Amine Tbaik

unread,
Mar 16, 2014, 1:05:22 PM3/16/14
to chromium-...@chromium.org
am just sooooo so soooo new on this chrome extension developing, but i know pretty much about HTML Javascript Jquery CSS Ajax PHP .. i did a lot of work with those ..
any way .. making tests and i want to know what is wrong with my code so far 
i created a simple : popup.html popup.js popup.css background.html background.js
my background.js has this :

document.addEventListener('DOMContentLoaded', function () { // according to chrome CSP this schould be done ! i don't know why but .. well .. i heard it's  a security matter lol, what the hell ..
chrome.browserAction.getPopup(function (){ // this is to get the popup.html and write inside of it "test"
document.getElementByI('me').innerHTML='test';
})
});

as for my popup.html .. it's a normale one lol :

<html>
<head>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<div id='me'></div>
<body>
</body>
</html>

anything wrong here ? please help lol

PhistucK

unread,
Mar 16, 2014, 3:20:41 PM3/16/14
to Amine Tbaik, Chromium-extensions
First, please, add <!DOCTYPE html> to the beginning (before <html>) of any (full) HTML file you are creating. By not declaring a document type, you make the browser load the page in compatibility or quirks mode, which does many non standard and unexpected stuff that would not always work (mainly about the width and height of elements, but also other stuff). This mode was created for all of the legacy content of the web (old pages that relied on the buggy behavior of the first versions of the browsers).

Second, you cannot access the popup of the browser action if it is not opened (meaning, if the user has not clicked on it).
You have a few choices here.
1. In a background or event page (or wherever), save whatever data you want to later fetch using the chrome.storage API and in the popup page, use the chrome.storage API to fetch the data.
2. Use an event page (a non persistent background page), access it using the asynchronous chrome.runtime.getBackgroundPage(function (windowOfTheBackgroundPage) { document.querySelector("#me").innerHTML = windowOfTheBackgroundPage.getSomethingFromTheBackgroundPage(); });
3. Use a persistent background page and in the popup page, access it using chrome.extension.getBackgroundPage() (which returns the window object of the background page) and take any data you want from it.

Third, I am not sure the DOMContentLoaded has anything to do with Content Security Policy. The point of Content Security Policy is to not let the page run unsafe scripts, like new Function("..."), setTimeout("..."), eval("..."), inline scripts, inline event handlers and maybe a few more, because the user can inject stuff to the page using these and that could become a security or privacy issue, so you must extract all of your scripts to an external JavaScript file (or files) and reference it using <script src="some-path-to-javascript.js"></script>.
Regardless, the DOMContentLoaded event listener could be needed, if you reference the script (which means the browser executes the script) before the content on which your script depends loads (for example, you have a page with the following snippet - <script src="bla.js"></script><div id="me"></div> - and bla.js tries manipulates <div id="me">, but it is executing before that element is parsed, because the script element was located above or before that element, so the script throws an exception due to a null reference error, since no such element exists at the time).
The quick solution to that is to simply locate the script element at the end of the <body> (for example) and you can avoid the event listener altogether (unless you depend on other behaviors that only occur when the browser declared that the content was parsed).


PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/05430fa8-a856-44c9-b32c-660d99ff0401%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

Reply all
Reply to author
Forward
0 new messages