I`m a JavaScript/programming newbie trying to figure out the new bookmarklet that's been released to help overcome the new NY Times paywall, available at this blog http://euri.ca/2011/03/21/get-around-new-york-times-20-article-limit/
It`s only the following 3 lines of JavaScript....
//Prototype is already installed on NYTimes pages, so I'll use that:
$('overlay').hide();
$('gatewayCreative').hide();
$(document.body).setStyle( { overflow:'scroll' } );
so I thought it would be a not overly complex way to learn about practical uses of JavaScript
When I click on the source code for the actual bookmarklet, it revealed this
NYTClean
The three lines of JavaScript above are located at 'http://toys.euri.ca/nyt.js'
My questions are
a) when he says that Prototype is already installed on NYTimes page, is he referring to the Prototype library, so his code is just altering what they did with the library?
b) in the source code for the bookmarklet, where he does document.getElementsByTagName('head')[0].appendChild(s);})();" does the document refer to the NY Times page that the reader will be on? and 'head' refer to an Element in the NYTimes home page, to which he is appending the child s?
c) is the source code for the bookmarklet wrapped in the link so that appendChild(s) only happens when you click on the link/bookmarklet. Is a bookmark essentially a link which runs code?
d) do you know of a resource that explains how to make the actual bookmarklet which can be dragged from a webpage to the bookmark bar? That drag-to-the-bookmark bar feature is obviously separate from the code it contains, so do you know where I can learn it if I wanted to make my own bookmark to experiment with JavaScript.
a) Yes, he's referring to the Prototype javascript library.
b&c) The way bookmarklets work is by running javascript in the context of a given website by using the "javascript:" protocol. You can run anything you want this way (try typing "javascript:alert('the title is: ' + document.title);" in your address bar and hitting enter. You should get an alert showing you the title of the page you're on. You might consider reading up a bit on how they work on wikipedia.
d) The drag-bookmarklet-to-bar functionality that bookmarklets depend on is actually built in to your web browser. To make an installable bookmarklet that will work on any modern browser, all you have to do is have:
Drag to bookmark bar to install!
Related
I am working on automating a process within my business, part of which is sending an email through SalesForce. We don't have access to the SF API and the email has to be sent through salesforce in order to keep the communication searchable for the coworkers.
I need to use a template which can be selected in SalesForce, however this function does not work in IE (which our RPA solution uses) so I need to build this email from scratch.
I see two options for this:
Use the HTML to recreate the format with the right variables. This entails inserting/injecting/manipulating HTML.
Copy the format into memory/the clipboard, edit it programatically and paste it into the SF interface
This question will be about option 1. I will post an additional question with regards to the second option separately and edit this question to include that link. EDIT: Here is the link to the other question!
Now on to the question:
We use the Blue Prism RPA software suite. It has a possibility to insert javascript fragments into a website and subsequently invoke them. I was hoping that I could create a javascript fragment that recreates the template, insert it and then invoke it. I have been working on this for the past week and have hardly gotten any further.
I now am able to add basic text into the required field, but have found that to be able to use the template structure I need to use a different, HTML based, field. This field I find lives inside an iframe.
I have had zero experience with javascript prior to this week (luckily it seems similar to c# in which I do have experience) and now this iframe has me stumped. Apparently when you use Selenium or similar you can switch the driver to the new iframe but I don't have that option, it needs to be done through surface automation. Within javascript as well as the console I can not get it to target the separate document within the iframe. Apparently the iframe contents are not incorporated in that way in the bigger webpage.
So my question is this: How can I "switch focus" to the iframe using javascript? How can I then edit the iframe contents through javascript? Any help, tips etc. would be highly appreciated!
If you go to developer tools in the browser (F12 or right-click inspect) you can use the inpsect tool to get the path you are looking for. an iframe is just another window inside the window and once you have the 'base path' you can then extend further into the window from the iframe base path.
You can access frames one of two ways I know of;
document.getElementById('the frame you are looking for goes here').contentWindow.targetFunction();
and/or
window.frames[0].otherfunctions
where 0 is the Nth order of frame on the window in case there are others.
once you find that path you can interact with sub-elements on that iframe by getting the path to it from within the iframe.
some things to watch out for. frames not loading yet so make sure the frame you want is loaded and no other frame is moving it around the screen at run time. Also make sure the child frame is in the same domain, I think calling javascript has issues when going cross-domain i.e. it doesn't work (stand to be corrected there though maybe it depends on group settings)
Supply some code or the layout of the page and could give you a code example but top of my head the format will look like this
var doc = window.frames[0]
var thing = getElementById(doc.getElementByPath('maybePath')
'perform some set operations like set innerhtml to thing you desire
Problem: Not able to find/click/send.keys to any of elements on a specific webpage.
WebDriver Chrome
I can interact with that webpage until I click a certain link where a new tab is opened and from that page I'm unable to do anything.
What I've tried so far after extensive research here:
1- Since a new tab was opened, I've "forced" the code looking into the new tab using driver.switch_to.window and to be sure I've printed the current page title and it's the correct one.
2- I've tried both implicit/explicit waiting (even time.sleep) in order to wait for the page to load.
3- Research pointed me to iframe.. I don't have any iframe but nevertheless I've searched for the number of frames (2) and switched between both and tried to find elements using xpath (full xpath) and none were find.
4- Maximize window.
So I tried "everything" in the books. Inspecting the elements that I needed to interact I've found that every single one was pointing to a JS with some arguments.
href="JavaScript:SWESubmitForm(document.SWEForm2_0,s_10,"s_2_1_96_0","VRId-0")" tabindex="2997" id="s_2_1_96_0">Track Faults
Looking further found that s_10 is a variable within the script which have different options from s_0 to s_14.
var s_0 = {action:"/esales_enu/start.swe",target:"_sweview",SWECmd:"GotoView",SWEMethod:"GotoView",SWEView:"L2C Track Channel Reference View BT",SWEApplet:"L2C New CZ Home Page Applet BT",SWEReqRowId:"0",SWESP:"false",SWENeedContext:"true",SWEKeepContext:"0",SWEDIC:"false"};
var s_10 = {action:"/esales_enu/start.swe",target:"_sweview",SWECmd:"GotoView",SWEMethod:"GotoView",SWEView:"New Portal Fault Search View ORH BT",SWEApplet:"L2C New CZ Home Page Applet BT",SWEReqRowId:"0",SWESP:"false",SWENeedContext:"true",SWEKeepContext:"0",SWEDIC:"false"};
So I started searching and found driver.execute_script() and I've wrote:
driver.execute_script("SWESubmitForm(document.SWEForm2_0,s_10,'s_2_1_96_0','VRId-0')")
But this occurs:
selenium.common.exceptions.JavascriptException: Message: javascript error: SWESubmitForm is not defined
What I'm missing here? Syntax? If someone can shed some light on which direction should I go, it will be really appreciated.
Thanks.
I was able to fix this and learn a few things. The JS "theory" I was taking didn't made any sense since the driver.execute_script() isn't used the way I was thinking but rather injecting code or finding elements as well.
Second, the solution was actually frames :)
I was so focused in switching between the two frames I had found initially that for not one moment I thought that INSIDE those two frames could had been more frames!
And basically that was it, after switching to the main frame, I've switched again to the 2nd frame inside that main one and was able to find through xpath.
There is something compelling in the integration of mermaid syntax in markdown text, since it is quite "markdownish". I got the idea that I would like to type my own mermaid diagram in a rocket.chat window and see it interpreted on the fly.
I have already had the opportunity to work on mermaid integrations, and I hope this one should not be too difficult.
mermaid is basically a javascript library that works on HTML snippets like:
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</div>
So it basically requires only to generate that piece of code + include the mermaid javascript library in the pane being visualized, to get a properly displayed diagram, which would look like:
The question I am asking here, is where one could start from, to configure a rocket.chat instance (and/or exploit its API) so that one could convince it to interpret a user-type sequence in a message e.g. :
```mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
as a proper diagram?
There isn’t any way to do this well, as rocket.chat is not customizable (at least as far as I can tell, I don’t use it). However, I think that if you injected external js code (along with mermaid-js) into rocket.chat, you could make rocket.chat send the graph as an image. Of course, if you do not want to paste the script in the console every time you need it, you would need to use something like Tampermonkey or a chrome extension.
That being said, you would also need to dynamically add mermaid as a script, so something like:
var url = ‘https://unpkg.com/browse/mermaid#8.8.0/‘;
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
Would suffice. Then, you would need to add a click event to the “send” button and read the value of the message bar. Use a bit of logic to determine whether the bar contains a ``` (and maybe add that you need to put mermaid after it like ```mermaid). If the chat bar contains mermaid code, then add a hidden mermaid graph and wrap the graph in a tag, then trigger an event (like a button click) that downloads the graph. I am not sure that you know any Node.JS, but if you wanted to have the image automatically send, you could make a POST request containing the image to a Node.js server that you host locally (or by Heroku). The server would process that image and in turn, return the url at which it is hosted. Then, you would use the URL you got and replace the value of the message bar with a markdown that displays the image. I would recommend making a second button appear over the first chat button, and if you want to send a mermaid graph, you can click that button.
In conclusion, what you are seeking to do is quite do-able, but it will take time (and a lot of patience). I would recommend researching Rocket.Chat and practice injecting scripts that automatically send messages and things like that. Since I am on my iPad (my computer’s screen is broken) I cannot give you code examples, but I hope you can make do with what I wrote.
Im working through Django By Example and in one chapter a Jquery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
Im not an experienced JS or Jquery programmer but I did some JS some years back and can read the code however the tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is what it should look like when clicked on, this is the part where nothing happens for me
these are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
the only thing I can see that is different with these compared to the files that came with the book is the indentation is a bit off but for some reason the indentation does seem to have changed a bit when I uploaded to Git and they dont look like that locally. Is indentation important in JS?
I followed the same book with the same examples but didn't had any trouble. Make sure your dashboard.html file is referring to the correct javascript file. If nothing works try to add the bookmark manually, you can see how that's done over here http://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/ it'll sure to work.
And answer to your last question, Indentation is not as important in JavaScript as it's in Python, as python doesn't use any curly braces "{}" or semi-colons ";". But you can write your entire javascript code in a single line and it'll work because your using curly braces everywhere to tell which line of code ends where.
I agree with all the above. In addition, the following:
Error I noticed in the book:
In bookmarklet-launcher.js the js function being called from bookmarklet.js is called myBookmarklet(), however there is no function called this way in bookmarklet.js. So, you may want to use the same name in both js files.
Practically speaking however, the bookmarklet will always work because, not finding a myBookmarklet function in memory, bookmarklet-launcher.js appends the bookmarklet.js script to the body element and, being bookmarklet.js a self-invoking function, its content executed (without the need it to being called). There are some additional interesting technicalities here (the key function in bookmarklet.js is not self invoking but it will anyway be always called because of the script checking whether jQuery is present...) but ok, this is more relevant for those busy with the mentioned book (Django 2 by example).
Check whether bookmarkled, once you click on it, is added to the
current webpage:
2.1. Open devtools (F12 on Chrome) and check e.g. in the html head element whether you find the newly added link element containing the css attribute and/or in the body element whether you find the script element containing the reference to the bookmarklet.js file.
2.2. Alternative: Add an alert message on top of the bookmarklet.js script so that it will be launched if it is correctly loaded. Example:
(function(){
alert('bookmarkled loaded!');
var jquery_version =...
Make sure you're trying to use it on a HTTP site only. Since you're serving from same protocol. HTTPS site would always tell say: There is a problem loadingbyour jquery. That's how I solved mine.
dude.I have solved the problems I met like you.
The most important thing is that noticing the syntax error(without warnings),mainly caused by ignoring blank.
for example, in the line:
jQuery('#bookmarklet .images').append('<img src="'+image_url+'"/>');
between #bookmarklet and .images should lie a blank space,because of jquery syntax rules(meaning to search tag with id of bookmarklet and search tag with class equaling images within result previously).
Another two places worth notice are codes containing #bookmarklet .images a and #bookmarklet #close,requiring blank spaces between filter condition.
That's where I found I made mistaks mainly after studying syntax of jquery.
You'd better compare your codes with codes already loaded up to github by someone to make sure there are no more little errors(such as spelling).
Is it possible to find out (in Chrome/FireFox) that which Javascript file (and hopefully line number) is being used on a web page by a specific element?
Thanks
The question is a bit unclear, but I can show you how to watch a particular element for JavaScript interaction in Chrome:
Then, after you do that, watch as we click the checkbox:
Some reference for Chrome: https://developers.google.com/chrome-developer-tools/docs/overview
Most other browser work in a similar fashion. There are also other ways to find out how JavaScript code is interacting with your page, but you'll need to give me a more specific scenario to answer that.