This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.
Related
So, I've got a situation where I want a background and content script to be run everytime the browser extension icon is clicked. The ideal behaviour is that extension icon is clicked, the script runs, and the popup will open, displaying the data that was grabbed by the script (but this should happen quickly, the script runs and gets the data very fast). Since chrome.pageAction.onClicked will not work if there is a default_popup defined in manifest.json, I think this leaves me with two options:
Use default_popup and figure out that the extension icon has been clicked some other way. I found this solution in another stack overflow post, but the workaround is to use default_popup: "popup.html", and then the popup.js that is defined in popup.html will send a message saying that the icon has been clicked, then when background.js receives this message, it executes the script. I implemented this idea and it worked... kinda. The trouble is, the popup will always come up before the script is fully executed, so you can't actually display the data grabbed by the script in the popup until the next click. I'm not sure there's any way to get the behaviour I desire using this method, so on to the next:
The other solution I can possible think of is to use onClicked, and then make the popup come up some other way, besides using default_popup in manifest.json. I'm also not sure if this is possible, I have looked on stackoverflow and haven't found anything similar.
Is the second method possible? Can the first method work somehow?
Your option #1 is correct, I think all that is needed is a loading screen when the user first sees the popup, and add some code that updates the popup as soon as it hears from the backend. Might need to see some code to better help there.
Option #2 will not really work, unless you opened the popup in a new tab (or just made it a whole new HTML page). I say this because there is a note here from the Chrome Dev team they will not support opening a popup unless it is from a user gesture -- https://stackoverflow.com/a/10484764/4875295.
If you wanted to go that route it would probably look something like:
Delete from your manifest.json browser_action.default_popup
In your background script add something like:
chrome.browserAction.onClicked.addListener(() => {
const data = dataMaker();
chrome.tabs.create({
url: `${chrome.runtime.getURL("app.html")}?data=${data}`
});
});
Then in your html file have some JS that reads the query string and updates the page accordingly.
Though, that's a different approach than you asked for and I think your original route may still be the best bet (with some added JS around loading).
Posting without a target so that a web page reloads seems useful behaviour for some things - such as writing a login page. I have implemented a calendar in PHP which takes advantage of this. It reloads an object from the session (or creates a new one if not present), applying any changes that result from the post then saves the object back to the session. The problem is this. If I hit the back button I don't want to go back through every click of the calendar button but would rather jump back to the page before arriving at the calendar page. Not only that, if I do go back one calendar page after another I get an annoying "confirm form resubmission". I have implemented an incrementing value after the # for each post so that I might be able to use window.onhashchange. The problem is that window.onhashchange never fires so I am unable to intercept the back button and pop the history stack. Any ideas? Am I better off coding on the server side with javascript?
Well I solved one problem. My form subclass in PHP defaults to using POST as I understand this is more secure. This causes the annoying resubmission problem when using the back button. I now use GET in my calendar page which solves this issue. I am still bemused by JS debugging in Netbeans. I have never got script to stop on a breakpoint within a single document. I have previously had it working with an external javascript source but this no longer works. If I can output to console but there is no window in which to see the output. I am told window.alert no longer works for some events in Chrome. I am completely blind! To add to the irritation, it took me a while to realize was that the javascript file was cached and changes would not be reflected in behaviour. I have put a random number into the script tag which fixes this issue. As I am debugging using netbeans connector in Chrome I have no idea why this does not force the js file to refresh. All in all, this appears to be a pretty shambolic toolchain.
So, I'm having a problem with MDL's javascript breaking my Twitter widget for showing tweets on the sidebar.
When I remove the javascript, it works perfectly fine. I tried changing the position of the script, but nothing resolves the issue, whenever the MDL's javascript finishes loading, the widget is instantly gone.
If you take a look with "inspect element" you can see the widget's iframe is still there below the facebook widget, but its body is empty.
You can take a look at the issues right here. Please don't mind the messy code, I will still make a lot of changes and optimizations.
I think my issue is simple but I can't seem to figure out what I've done to screw things up but...
I can't do simple page postbacks without the page fully reloading for some unknown reason on my website..
EXAMPLE: I have an ANCHOR created called
<a id="multi" href="#"></a>
I can't call this link from within the page without it completely reloading the page. This is causing other serious issues such as me pulling up my website on my Android phone.. the Menu itself compresses completely fine, but when you click on the menu it actually forces the page to reload like its doing a postback or something when its not suppose to.
Same thing with my Chat Widget i have on my website on the bottom right corner... it uses javascript and has it pointed to "http://www.website.com/#" so that nothing is suppose to happen so it can load the window after its received a click, but something is causing my site to actually do a post and its trying to access that as an actual website.
Anyone have any idea what could be causing this? I've tried even completely deleting and removing all my javascript and CSS references and everything what am i missing?
The # should only be making the page jump up. However, there'll be instances where:
Check if # is still on that link
There are times where some script removes the # and make that link point somewhere else. If you're on Chrome, you can inspect the link by right-clicking on it and inspecting it (other browsers should also have this too). Check if # is still the href.
Check for click handlers
There are also times when a handler is attached to links (I have a co-developer that did this once) and introduced too much magic to the page. Inspect the element and on the Elements tab of the inspector, there should be a tab called Event Listeners. Check for click handlers and inspect that. The harder thing to catch are delegated event handlers, so check for the ancestors as well.
Overlooking the obvious
You might have missed the #
You might be editing old code
You might be editing another file (always happens)
Clean the cache or debug in incognito or another browser profile which you can openly clear the cache.
So I've been pondering this for some time and trying out various strategies. Basically I'm trying to create a bookmarklet that, when clicked, pops up a header on whatever page you happen to be on. In this header, there is a small form, the contents of which are submitted to a server. Once this is submitted, the header should disappear. In all cases, I've loaded my JS with a simple loader bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/script.js';})();
The problem is tricker than it sounds - every idea i've come up with fails in some instance - and for now lets forget about IE compatibility, I'll deal with that later.
Idea 1 was to redirect the browser to a page on my server with the form at the top and the original page inside an iframe underneath. This works fairly well, but is very slow: 3 page loads to see the form and the original page, followed by another pageload once the form is submitted to return you to the original page. Furthermore, it breaks on sites that framebust.
Idea 2 was to insert an iframe at the top of the original page, the iframe src'ing the form document on my server. This works wonderfully and only requires 1 pageload (the iframe contents). However, absolutely placed elements on the original page remain in their absolute locations, overlaying my header, while everything else is shifted down. Furthermore, I find it is impossible to get rid of this header after the form is submitted short of also creating a link underneath the iframe which would hide the iframe and itself, which one would click after submitting the form. Long story short, not really production quality.
Idea 3 was not to use frames at all. Insert a div at the top of the page with my form on it, and this form would be submitted to my server. The problem with this of course is that the original page's stylesheets will affect my new div, and I can't for the life of me figure out how to tell the page not to style the header-div (or to style it only with my rules). I'm told this is trivial in jQuery, and while I've started learning/using it, I have not found a way to do this. Also there's also the position:absolute problem as described in idea 2, but I figure that's minor.
Am I being stupid in the way i'm going about this? Should I abandon all hope for making a header and just pop up a new window? I'd really like it to be a header, but a window will suffice if a header is impossible (this is 2009 - pretty much nothing is impossible online these days...)
Anyway, any help fixing the above ideas or a completely new idea is very very welcome.
Thanks a lot for your time,
Mala
How about inserting an <iframe> into the page?
That should be simple and won't inherit the original page's CSS.
You can pass in anything you need for the iframe in the querystring.
I suppose making it self-destruct could be tricky... maybe you could redirect it to a page on the original domain, and poll for that.