Im playing around with making my first chrome extension. Im making a small extension that monitors the webrequests a page makes. This means that im listening to the: chrome.webRequest.onBeforeRequest.addListener event
I am a little confused on how to execute this code on every page i load. It works on any page if i open the extension web page and run the code in this context. However i would like it to run regardless of having the page open. How do i go around doing this?
I looked at content_scripts, but havent figured out if they are the proper path to take - and ven if they are how do i send a message from my content script to my web page notifying it to run the code. As far as i understand this the content script is first run after the page has been loaded and therefore it does not matter if i call my page and add the listeners, because the show is already over - is this correct?
The wa i understand this is that i cannot add listeners in the content script - hence the need to make this messaging thing - is this correct?
Thank you.
You would put the onBeforeRequest listener in a background page, specifically the persistent variant of it. When the event is invoked, whatever you have in the handler will be run.
Related
Context:
I am creating a Chrome extension that hides certain elements of certain sites
In this specific case, I'm trying to hide the main feed of YouTube's home and trending pages
The script has no trouble on all other sites, including Twitter, Facebook etc.
But on YouTube, it's causing the page to crash
Roughly speaking, what the script does is:
Observes any mutation on document (childList: true, subtree: true, characterData: false)
Searches for the existence of certain nodes in the document
Changes some of their styles to hide them (or if already hidden, does nothing)
Adds a small menu into the node with a button to unhide the node
The MutationObserver is never disconnected because it needs to keep watching in the case of single-page apps where the page stays the same but different nodes come and go
So it keeps checking that the hidden nodes are still hidden every time there's any new mutation to the document or its subtree (heavy load on performance, I know - but it works fine on every other site)
YouTube issue:
YouTube always throws up a warning as follows, even when I am not running my script on it (in other words, YouTube's code is already a bit suspect):
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
The specific event is either touchstart or wheel. This error can display in the 100s of times even when I am not running my script.
When I run my script, this error seems to blow up even more, and display more times than usual
Eventually, the entire page crashes or takes far longer to load than it should (but it does sometimes eventually make it all the way, showing that my extension is not completely breaking down)
There's also another warning that tends to show, [Violation] 'readystatechange' handler took <N>ms
This warning shows far fewer times than the other (see screenshot below)
Interestingly, usually loading youtube.com home page when starting off in a new tab is fine, and my extension successfully hides (i.e. changes styles on + injects some extra HTML into) the node it's meant to hide
I then get a crash or extremely slow page load when I try to navigate within YouTube, e.g. specifically going to the Trending page using the left-hand side menu, OR occasionally when I hit refresh on the page
Things I've tried:
Overriding the default addEventListener method on EventTarget.prototype, which I have so far failed to do successfully - not sure I understand how to do this despite trying a few methods from SO
Blocking the script that this error originates from (desktop_polymer_inlined_html_polymer_flags_v2.js) using the Chrome WebRequest API, but that doesn't work because it breaks the whole page
Questions:
Is it likely that this 'non-passive event listener' warning is interplaying with my script to cause the crashing of the page? Or that my script is causing more listeners to be added than the page would usually?
How can I stop this error from happening (e.g. how do I prevent the event listeners from being created by YouTube's JS)?
Does anyone know anything about the way YouTube is built that would make it crash if you try to 1) modify a style on an element directly 2) add another element into a parent element 3) continually check styles on an element? Builtwith.com was not much help.
Is there something else I am missing here? Another way I can change my content script to make it interplay better with YouTube?*
*I know a tempting answer will be 'don't observe the document'/'observe it less' but this is more or less non-negotiable in terms of the way the browser extension needs to work.
Screenshot:
Chrome profiling:
Note: having looked into them individually, none of the functions that are taking up the huge amount of time are part of my extension. So perhaps YouTube is reacting badly to the DOM modifications that my extension performs.
We have a small group of guys who play the game below. We take these games and stream them on Twitch so we can watch them as a group live. We have gotten down the process of automatically opening the URL and streaming the games. However, to get the plays to show there is an OnClick function that we have to manually remote in each time and click. Is there a way we can open this webpage and simulate the click so they are turned on? If you click the link below, you'll see a yellow button called Plays. If you click it you'll see what we want to be able to turn on without manually having to do it.
http://glb2.warriorgeneral.com/game/replay/171542
This depends a lot on how you're automating the page opening.
Normally, you can simply call .click() on an element in JS. But since you want to click something on a page you don't control, it gets complicated.
If you're simply opening a new tab/window via Javascript, you won't be normally able to do this because of cross-domain JS protections. You can disable them which is not recommended--if you go this path, you'll want to load the page in an iframe and execute a callback on it: see this answer. The callback you'll want will look something like:
function(){ window.frames[0].document.getElementById('toggle_plays').click(); }
Knowing how you're doing the automation would help significantly on how to solve the problem within your limits.
I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!
i have the problem that some parts of my windchill app run into infinite loops. the following seems to appear sometimes:
i'm using the wizard and created two steps to add something to a table. the wizard is opened in a popup window and immediately loads the first step.
i already found out that the step defined in the html (div with id "wiz_step_contents") gets loaded into an adjacent tag (div with id "wizard_viewport"). i believe this is caused by extjs.
the first step includes script-tags, so when the step is loaded, some scriptfiles are loaded too.
however, when using fiddler to track the network log, sometimes (and only in IE), those included scriptfiles are loaded infinite times until i close the browser window.
and now to my question: how does windchill load new steps? is there a way a step could be loaded again, say, if some flagvariables aren't set that should be set?
edit: it seems that this is caused by the java fileupload applet... any ideas?
JAT, have you tried disabling the Java file upload applet in favor of the Basic Browser functionality? You can set that as a - personal - Preference. QuickLinks>My Settings>Preferences. You would be looking for "File Upload Mechanism".
I am trying to use a really old page on a website I do not have control over (so I can't edit it's resources).
The problem is that it is redirecting the page via javascript (to a 'we don't support this browser' rubbish), via setting document.location before I can set any breakpoints to then debug/workaround.
Is it possible to break as soon as the DOM loads, preferably in chrome?
Disabling javascript stops the redirect, but chrome does not allow me to view any scripts to then place break points.
FireBug has a "Break On Next" feature. I'm not sure if it will work in your case, but it might be worth giving it a quick try: https://getfirebug.com/doc/breakpoints/demo.html#suspend
It seems like Chrome likes to do something to prevent you from seeing the code when you click the stop button before the page finishes loading. It'll say something like window.script123456738391=1;. That makes it so you can't set a breakpoint at the right spot inside the code, especially if there's a redirect on the page before you get a chance to pause it.
What I found you can do is set a breakpoint on that first line. Next time you load the page it will break on the very first line, regardless of what it is. Then you can see all the code the page would load and set breakpoints wherever you want :)