I am trying to make a Chrome extension, everything is going well, except that before the content of the popup is filled with javascript(XMLHttpRequest - asynchronous) I see a small blank popup that has not yet been filled.
That is,
Before this loads
I see this
In the code, I am simply using document.getElementById to fill up the HTML. So it looks like
HTML:
<body>
<div id="status"></div>
</body>
JS:
document.getElementById('status').innerHTML = 'content of the request';
I see where this is coming from, since the popup is originally blank it shows that little blank box before javascript(XMLHttpRequest) is done. But How can I make it wait until the request is complete?
You can't manually display the browser/page action popup. This feature will not be implemented : source.
The most simple solution is to add a loading wheel gif to the html of the popup. It will display the popup until the content is changed by your code when the request is complete.
Another solution is to display a popup (not a browser/page action popup) when the user click on the browser/page action. This way you can wait for the request to display your popup.
Related
On my page I want to disaply a Polymer Paper-Dialog so I wrote an own element that looks like this:
<polymer-element name="my-dialog" constructor="MyDialog" extends="paper-dialog" noscript>
<template>
<span>I'm a dialog!</span>
</template>
</polymer-element>
Now I tried to display the dialog with this JS code:
var dialog = new MyDialog();
dialog.toggle();
But the dialog does not show up. Any ideas why?
When you are creating a new Dialog in your javascript function, you aren't adding it to the DOM anywhere. So, when you call toggle on it, it tries to show/hide a dialog that hasn't been added to the page.
If you want this to work, you should be adding the markup for the dialog to your html, getting a reference to that element in javascript, and then calling toggle.
Something else you could consider doing is looking at the Core-Overlay polymer element. It handles a lot of the dialog functions for you, and even allows you to shade everything that isn't in the dialog itself.
I would like to check the html of an element of a
chrome.tabs.executeScript(tab_id,{code: 'sendRequestToBackground(document.getElementById('important_val').innerHTML); '},
function(){
});
I want to be able to get this value from my background script, I saw a lot of examples with chrome.extension.sendRequest and chrome.extension.onRequest.addListener because all the examples is for working from the extension popup.html to background script and vice-versa.
But I open a brand new tab, change the URL, and I want to get a value of a field that (which btw is generated via Javascript) belongs to this random tab.
Is it possible to do that?
Thanks!
If you want to inject your code to a random tab, do this:
Be sure to have permissions to "tabs" and "<all_urls>" in your manifest.json
Get all tabs using chrome.tabs.query
Pick random tab using Math.random()
Inject the code using chrome.tabs.executeScript
In the incjected code call chrome.extension.sendRequest
On the background page receive the message using chrome.extension.onRequest
I have a script in my popup.html:
</body>
<script src="popup.js"></script>
</html>
Through which I am trying to obtain the DOM of a particular tab. More specifically, I am attempting to determine the existence of a particular element on the current page in a specific tab and then use this information within popup.js. How would I go about doing this?
You can't access current page DOM from a popup. You need a content script for that. Start by setting up these three scripts:
popup script
background page script
content script
With these you can send messages between popup script and content script using background script as a proxy. Read about message passing here.
You can simplify the process a bit using executeScript instead a content script. You will still need a communication between popup script and a background page though.
On a webpage (which I cannot change) I have a link like this:
<a class="PSHYPERLINK" href="javascript:submitAction_win0(document.win0,'PRCSDETAIL_BTN$0');" tabindex="94" id="PRCSDETAIL_BTN$0" name="PRCSDETAIL_BTN$0"> Details</a>
In my code, I put this:
browser.frame(:index, "1" ).link( :text => "Details" ).click
What happens is that the link is not clicked, or at least this makes no effect, but I receive no error. The script simply continues. It is interesting that on the same website I am able to click other links, even if they use JavaScript like the one above. Example of link for which FireWatir works:
<a class="PSSRCHRESULTSODDROW" tabindex="32" href="javascript:submitAction_win0(document.win0,'#ICRow2');">TESTQUERY</a>
Maybe you need to fire JavaScript event: How to find out which JavaScript events fired?
Are you sure you are clicking the correct link? Link text is " Details" and you are clicking link with text "Details" (please notice space in front of the first string).
I have a problem with the following HTML:
<a href="javascript:document.formName.submit();" target="iframe">
Where formName is the name of a form inside the iframe. I would like the browser to navigate to the page "javascript:..." in the iframe, so it executes the javascript on the current page in the iframe. My problem is that the browser will attempt to execute the function and use the returned result as the url. Of course there is no form to submit on the current page, so I just get an error.
Cross domain iframes are no fly zones, you won't be able to do anything with or to the DOM inside of a frame on a different domain. Even if the user clicked the submit button inside the frame, your page would not be able to get the new url back out of the frame.
In this case, you can do it by reaching inside the iframe:
<a href="javascript:window.frames[N].contentDocument.FORMNAME.submit()">
(that may not be exactly the right incantation). In general, you should do this with an onclick handler for the hyperlink, that invokes a function defined by the iframe's document.
EDIT: There is NO WAY to make this work cross-domain. It's a violation of the browser's security policies.