I'm new to google chrome extension development. i want to register my extension javascript to listen for the browser resize event. How can i do this ?
Currently
window.addEventListener("load",myfunction,false);
in the extension javascript was able to execute myfunction when i launch the browser
but
window.addEventListener("resize",customfunction,false);
doesnt execute customfunction on browser window resize..
How can we fix this problem ?
One thing you can try is using the following in a content script:
window.onresize = function(event) {
console.log("Resized");
};
This will log "Resized" to your console every time you resize the window. With that in mind, you can look into Message Passing, which you could use to send a message to your popup.js (or other background script) anytime the window has been resized, and then you can handle it accordingly. Also, apparently adding this functionality by way of chrome.windows.onResize is still an in-progress bug.
Related
I am trying to migrate my extension which records screen/tab/window according to the chosen option from manifest V2 to V3. In manifest V2 I was able to use background script as persistent and reach html page objects such as mediaRecorder, navigator. However in manifest V3 background script works as a service worker. So, I have to start the screen record in content-scripts to be able to reach the html objects. When I start chrome.desktopCapture API from the background script, I have to start the screenRecord in one of the tabs (should give a tabid to chrome.desktopCapture.chooseDesktopMedia API call). I cannot start it on the background page and when the page was refreshed or changed to a new URL screen record stops. Is there any workaround for this?
I believe the best way to handle updates such as a URL change on a tab is to attach the onUpdated listener to the chrome tabs in the background script.
chrome.tabs.onUpdated.addListener(function(tabId, changes, tab) {
//Detect Type of Change and Handle Accordingly
});
There are quite a few other events that may be of use that are listed in the chrome documentation Chrome Tabs Events. It's also possible to inject inline JavaScript from the content script so you can access the pages window object directly and attach event listeners there to handle reloads or URL changes. Check this stack overflow post for more information Modify Window Object in Chrome Extension
I am working on a Firefox Extension, using the SDK. The addon will be changing the CSS on specific websites (by attaching a stylesheets in the head). They obviously need to be attached before the main content of the page loads.
I need to be able to listen for the URL of a tab changing, and attach a script, before the tab content has loaded. The script will wait until the <head> has loaded before attaching the stylesheets.
I tried using tabs.on('ready', function(tab) { tab.attach(...) } ), but this does not work, because it listens for the tab to be fully loaded, and then runs the code inside the function()
I also tried pageMod, but this does the same as the above. It attaches to the pages I need it to, but only after they are fully loaded.
Does anyone know how to detect for a tab URL change, before the page is ready?
Note: Please do not answer with a setInterval() method, I cannot state this enough!
I worked out how to do it, I had not read the pageMod documentation well enough.
You can specify when the script is attached, using contentScriptWhen: "when", where when can be start, ready or end (obviously I used start)
I'm currently writing a chrome extension that has it's own panel in the Devtools. Although I'm facing an issue. I'm trying to trigger some action in the background page when the Devtools panel of a specific tab is closed.
I tried adding this to devtools.js :
window.onbeforeunload = function(event) {
port.postMessage({action: 'disableTab', tabId: tabID});
return "Are you sure you want to navigate away?";
};
Although the confirmation is never displayed and the message is never posted.
I think that it's because my devtools.html / devtools.js file isn't the one that is handling the main Devtools panel. it' only appended to it, something like that.
I'm still searching for an answer, anyone knows how I could achieve that ?
Edit:
I just noticed that this app is doing exactly what I want! https://developers.google.com/speed/pagespeed/insights_extensions
Run an analysis, then try closing the devtools, you'll be prompted.
I have a website which is only rendered in Webkit enabled browser (Google Chrome, Safari). I am using Google Chrome since I am on Windows 7.
I am using Watir-WebDriver to automate the same.
Issue: When I click on a button on the browser window, is launches another window and post click content is rendered in the new browser window. I need a way to be able to Identify this new browser window, in-order to be able to proceed with my testing. I have been reading on various forums, but not getting any certain answer/solution.
Q: Is there an alternative to watir::ie.attach for watir-webdriver since attach is not supported on Watir-Webdriver
Sample code:
require "rubygems"
require "watir-webdriver"
require "selenium-webdriver"
b = Watir::Browser.new(:chrome)
website = "http://xyz.com"
#a new browser is launched and the website is opened
b.goto(website)
#this opens a new browser window
b.link(:xpath,"/html/body/div/ul/li/a").click
#there is a button called "MAP" on the new browser window
b.link(:id,"btn_MAP")
#this gives an error, unknown link
"window" method is the alternative for ie.attach. Webdriver can handle the window opened by itself with window method.
b.link(:href,/server\/getPage/).click
b.window(:url,/server\/getPage/i).use do
b.link(:id,"btn_MAP").click
end
you can handle popped up windows in the window method block. If you want to keep handling popped up window, use it without block, like window(:url,/foobar/).use
see also:
http://groups.google.com/group/watir-general/browse_thread/thread/232df221602d4cfb
#Yutaka: Thanks a lot for all your help it lead me to use something like the following and it worked!
b.link(:xpath,"/html/body/div/ul/li/a").click
c = b.window(:url,"http:\/\/server\/getPage\/67\/1354")
c.use
b.link(:id,"btn_MAP").click
have you tried making the website the default homepage for the browser?
that might prevent you from having to do an attach.
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.