I wrote a user script for the latest Chrome browser. It seems the script can't get the changed content of the page after loaded (for example, after the page loaded, I clicked ¿sth? and an embedded window popped up).
Even if I used window.setTimeout(), I still can't the get updated content in the timer callback through document.getElementById(). I inspected the page and found that the popup element existed in the DOM.
Is this a limitation of user script? Or some other methods could be used to get the update in user script?
Update:
I tried DOMSubtreemodified event as suggested. But the behavior is still strange.
I added only one one line of JavaScript to the userscript for my.safaribooksonline.com,
document.addEventListener("DOMSubtreeModified", function () {
alert(eval('typeof OpenSignInPopup')); });
But the alert box shows "undefined" as the evaluate result of OpenSignInPopup. But I can run the alert statement in the script console in the same page at the same time, and shows the result as "function".
This function was not loaded when the user script is running at first. So how can I use it in the user script?
You need to provide details, like the relevant code snippet(s) and the pages targeted.
In general, you can fire off the DOMSubtreeModified event in chrome. That should get you access to the changed DOM.
Also, are you sure the new content is not in an iframe?
Update for new OP info:
But the alert box shows "undefined" as the evaluate result of OpenSignInPopup.
In Chrome, Greasemonkey code cannot interact with the page's JS functions like that. You'll need to inject your code into the page. See this SO answer for more information.
Related
With this code I want to create an event listener for whenever chrome storage updates.
I want 2 things to happen when the event listener is triggered:
The code will console log the updated values. This part works.
I want the HTML for the extension (the document that opens in the corner when you click the icon) to update and render the data value that is in chrome storage. This is that part I need help with.
chrome.storage.onChanged.addListener(function(changes, namespace) {
//part 1
console.log('New data type is %s. New value is %s',
changes['type'].newValue, changes['data'].newValue)
//part 2
document.getElementById('output').innerHTML =
changes['data'].newValue
});
I realize that calling "document" inside the function doesn't make sense, but I'm unsure how to move forward to get it to render in the extension's HTML.
I tried creating an event listener for when the context menu is accessed (users can update the chrome storage but clicking a button in the context menu) but I couldn't get it to work. Also the event should trigger when chrome storage is updated, not when the context menu is simply accessed.
Right now I get this error:
Error in event handler: TypeError: Cannot set property 'innerHTML' of null
(There is an element with id 'output', so that isn't the problem)
Thanks for your help!
The background script runs in a separate hidden background page. It's not related to the browserAction or pageAction popup page, it doesn't have any of the popup page elements, its DOM is empty except for the auto-generated script tags of the background scripts.
The popup is also a separate page and just like any normal page its environment/DOM exists only when the page is shown. You can't modify it when it's not shown. You can't show it from your code in general case either.
Solution 1
Put that onChanged listener in popup.js script that's loaded in your popup.html (declared as "browser_action": {"default_popup":"popup.html"} in your manifest.json) using the standard <script src="popup.js"></script> tag. It will update the popup page if it's shown, and to display the current values when the popup opens read them with chrome.storage.local.get or chrome.storage.sync.get depending on which storage you're using in your extension.
Solution 2
Use chrome.notifications API to show a small notification at the bottom of the screen, see also the official demo extensions.
Solution 3
Use chrome.browserAction.setBadgeText to display short text like a temperature right under the extension icon. Don't forget to declare at least "browser_action": {} in your manifest.json.
I'm working on an extension that's supposed to use the content of the page to determine whether to show an interface to the user.
The ways to show an interface, if I'm correct, are using a browser action or a page action.
And neither can be triggered programmatically. But content scripts could be written to inject an equivalent GUI into the webpage.
So, does it make sense to modify the DOM using content-scripts to display an interface as a substitute for page action? It seems like an obvious work around to me, and I'm sure there are good reasons to not let page actions be triggered programmatically.
Well, modifying DOM must be done by only Content Scripts, as that is the reason they exist.
Want to fetch any data from current page, alter anything in the page, add new UI in the page - whatever, content script will help you do that.
It has nothing to do with Page script Or Browser Script.
YES, you can not programatically trigger page/browser action. It has to be done by explicit clicking.
But if you want to open a UI by clicking a chrome extension, then there is a popup js for that.
I'm building a Chrome Extension that has a popup.html with a search form. Like Travelocity or Kayak, the form includes checkboxes so the user can select which sites they want to query.
On submit, popup.js launches multiple new tabs based on the selected checkboxes. In the tabs.create() callback for each new tab I use executeScript to:
- (A) inject the user's query into the search form on each of the new pages, and
- (B) submit the search form on those pages.
My code is working when one checkbox is selected (i.e. new tab is launched), but when multiple new tabs are created simultaneously it appears that the executeScript isn't running consistently. Sometimes it works, and sometimes it doesn't.
This leads me to believe that there's some sort of issue with the timing of the script execution, but I'm not sure.
If you have any idea what's going on I'd love to hear your advice.
Also, I'd appreciate any resources on how to debug this sort of issue in the future.
Here's my code on github...
whole repo: https://github.com/rossmorey/SongSearch
manifest.json
popup.html
popup.js (most relevant file)
Many thanks!
Seems like when you open multiple tabs - your popup.html loses the focus and closes, so on tabs.create callbacks which injects your code will not be executed.
Try to create tabs with "active:false" option, like this:
chrome.tabs.create({url: stringToObj[org], active:false} ...
I think it would help you.
And also...
It's a bug in your SeSac inject-code: if no search type defined in popup window, block
input[value="undefined"]
will not be found, so "checked" property will be called on "undefined" and this will stop you inject script execution.
I have a requirement where the background.html continous to update every 10 minutes and when I click on the popup it should trigger the background to update immediately and show the result in the popup.
I have the background updating using ajax working and I have the popup trigger the background to make an immediate update using ajax working as well. However, I am stuck on how to display the latest result in the popup...how can I tell when the background ajax call is complete and show the latest result in the popup?
thanks
Well, if you want to listen for changes on the Background Page, you have two ways to do what you want.
In your Popup, you can register chrome.extension.onRequest.addListener in your Popup page, and in your background page you can chrome.extension.sendRequest when you get stuff updated.
You have direct access to the Popup DOM, you can get an instance from chrome.extension.getViews({type:'popup'}), and once you get that, you can just call a method in that DOM. From the popup, you can access the background page easily too with chrome.extension.getBackgroundPage(). For both cases, you get a DOMWindow returned.
I personally would use #2 because you belong in the same extension process, you do not need to communicate to an injected Content Script.
var popups = chrome.extension.getViews({type: "popup"});
if (popups.length != 0) {
var popup = popups[0];
popup.doSomething();
}
Hope this helps.
We have some code where the user clicks a link which launches a pop up window. The code that creates the window then does an HTTP post to the window. Once the post has succeeded, the page is redirected (as a javascript location) to a PDF that was created during the post.
One person is getting an error where the posted data is not getting posted. In fact, the request is coming across as a GET.
Originally I thought this may be some kind of bookmark to the original page issue. But it happens in two different places that use the same concept in a different manner. And, since the post is triggered through JavaScript and the result is immediately relocated it would be no trivial matter to actually get a link to the original page.
So, the question is, are there any "pop-up" blocker like security tools that would allow pop-up's but convert all POSTS on them to GETS?
Example Call:
function LoadPDF(File){
document.forms[0].PDF.value = File;
win = "Window" + Math.round(Math.random()*100000);
open("",win,'toolbar=no');
function SubmitForm(){
document.forms[0].action = 'CreatePDF.cfm';
document.forms[0].target = win;
document.forms[0].submit();
}
//Give window time to open.
setTimeout(SubmitForm,550);
}
The code that creates the window then does an HTTP post to the window.
Popup blockers block popups as they are opening, which is pretty much the point of their existence. It would have to be a pretty lame popup blocker that allowed the popup to open and then translated the POST to a GET. It's possible a GreaseMonkey script or extension could translate it maybe.
Tell the user to disable any plugins/extensions and try again.