WebExtension: collect infos on all iframes of current page - javascript

I’m writing a WebExtension that identify fields using a given criterion in a web page.
The content script which is loaded with every page and iframe does its job well identifying and highlighting those fields.
Now I want to count the total number of said fields in a page as the user sees it, that is, including its iframes, and display this number over the browserAction icon (as adblock displays a count over its action icon).
My plan was to use setBadgeText in the action script to clear the current counter, then issue a tabs.sendMessage({req:"countFields"}), and then let every content script respond to that message by getting the current value of the badgeText and increase it with the number of fields it found on its part of the page.
Well, that does not work well. I’m getting erratic values when a page contains iFrames. I guess this is a synchronization problem, when content scripts from different parts of the page try to get the badge value and update it.
I’ve also tried navigating through window.frames from a top level content script ("all_frames":false), but that won’t work either, since cross script errors can prevent me from descending all iFrames (using the online version of tinyMce for example)
Well, at this point, I’m asking for help and advice on how to solve my problem.
Any clue or pointer would be very much welcome !

I found the answer to that problem !
Since I believe knowing where to find for answers to a specific kind of problems (here, WebExtension development) is part of the answer, I give the link to that answer on the right place instead of just repeating here what was given me there.
https://discourse.mozilla.org/t/collect-infos-on-all-iframes-of-current-page-solved/30453

Related

Interacting with elements within nested iFrames, Existing on page but returning null

I am programming a script that will download a report for me. One of my steps involves checking a table for the correct date of the report I want to pull. The website im working on is old, and they are set up using multiple iFrames (they are of the same domain).
From my research, ive come up with this line to return the innerText of a certain row in a table
document.getElementById('iframe1').contentWindow.document.getElementById('iframe2').contentWindow.document.getElementsByClassName('status_table')[5].innerText
iFrame2 contains the table with all the info I want to access. This line works, but only sometimes. When I refresh the page, wait 10 seconds, and run the command, it returns null. It seems after I expand all the elements in google chrome, or mess around with the page a bit it starts working and returning the correct information.
Im not sure what is going on here, am I accessing the elements wrong? Why does it start working after I click things on the page or after I expand the elements in the dev console? Any Help would be appreciated!
For some reason, When I use getElementsByTagName instead of getElementByID It works all the time!
document.getElementsByTagName('iframe')[2].contentWindow.document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('status_table')[5].innerText.toString();

Get Value of a textbox which is not in current document using Javascript

I've list of slides, and in one of the slide, I have a text box with name attribute as "deals". In the next page I have a button. On clicking of that button, I want to capture the deals which were placed in the previous html. How can I capture it?
Using
document.getElementsByName("deals")[0].value
will not work, because we dont have a tag with the above name. How can I fetch it?
Any ideas would be greatly appreciated.
P.S : I don't have access to other JS of the project.
Though I may not have understood the question correctly (for example, I don't know how much JavaScript you may change), here are some thoughts:
Solve the problem of "don't have a tag with that name": If the slides are on the same page, then instead of removing a DOM element,
a hide() may be useful (as an implementation of changing slides).
The slides are on different page of the same window: Try utilising Cookie or LocalStorage, if you can't change the way how the slides work.
Bad Hack but should work: Setting window.name. This special "variable" will persist as long as you are in the same window (even after page changes, as long as the page doesn't re-write it). This is some kind of a hacky way to get values across different domains (avoiding Cross Site issues...). This should help if your slides are being imported into some other presentation sites with an <iframe>.
Hope the above helps!

Reload same page several times in Blogger/Blogspot will reduce bounce rate?

I'm trying to make a simple pagination in Blogger with Javascript. The idea is hiding the second paragraph, and show it when we click a button (and hide the first paragraph when we do so). The page will also be reloaded everytime the button clicked.
So, if my visitor reload the same page for several times, will it improve the bounce rate? Since it's the same URL.
It's a bit different with other self-hosted blog because they have different URL for each page. Something like:
domain.com/the-title?page=2 domain.com/the-title?page=3
domain.com/the-title?page=4
...etc
Also, will it affect the SEO? Is everything I hid in second paragraph will be invisible in Google search result?
The answer is NO. Let me explain the reasons why:
1.The bounce rate is increased when a user visits your page and leaves without interacting with your site / visiting another page.
2.Refreshing the page does not start a new session/pageview. No matter how many times they visit your site they will re-open the exact same session for 30mins.
3.Javascript refresh or meta refresh does not count as user interaction. You may also want to read more about Google and Javascripts. Google can read your content even if you use javascript or refresh for Dynamic content.
(http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157)
4.Hiding any texts from the user is never a good idea. You may apply it in times that you need specific KPIs for clicks of buttons or cases like that but... can't you just use heatmaps or even better seperate content? Anyway, if you use it on a high percent of your content you might have Cloaking problems.(https://support.google.com/webmasters/answer/66355)
So it will not affect your bounce rate. You might get cloaking warning if you apply this on the majority of your website. It might also be considered a problematic user experience and lower your techincal seo scores (page load times etc.). As you can see you might only get problems by using such methods. I would suggest you to not proceed with the idea.

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

Use jQuery to append star to menu item if the linked page's content has changed since last visit

I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.

Categories

Resources