2018-10-22

Greasemonkey Journey Notes

Scope And Purpose Of This Post

Holds my notes as I learn Greasemonkey/Javascript/XPath/CSS/HTML/FirefoxWebDevTools.


Terminology

Firefox = FF
Greasemonkey = GM
JavaScript = JS

link prefixes...
  • MozDoc = developer.mozilla.org/en-US/docs = MozDoc
  • MozDoc/JSRef = developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
  • MozDoc/API = developer.mozilla.org/en-US/docs/Web/API
  • GitHub = some github repo

Firefox

Webdev tools in firefox:
  • Right click => Inspect Element; that brings up webdev tool inspector showing you the source for that element.
  • Ctrl+Shift+i or F12: toggles webdev tools in Firefox, so you can see the page inspector, console, and debugger; also the button just to the left of the inspector tab is like an enhanced “Inspect Element” feature;
  • In inspector, you can delete nodes, attributes, and other live-editing of the page.
  • In console, you can interactively run js and discover properties/methods of objects.
Firefox webdev tools documentation MozDoc/Tools

Greasemonkey (GM)

Demo day links:
Quick references:
Getting GM to request another page (GM.xmlHttpRequest):
Here is a simple example of getting a useful DOM-thingy from GM.xmlHttpRequest...
GM.xmlHttpRequest({
  method: "GET",
  url: "http://www.google.com/",
  onload: function(response)
  {
    var responseDom = new DOMParser().parseFromString(
      response.responseText,
      "text/html");
    console.debug("response DOM: ", responseDom);
  }
});

Other

JavaScript (JS)

JS tutorials
JS syntax validators:
JS DOM API, for stuff like document.getElementsByClassName:
How to wait for stuff:
Other niche stuff that caught my eye:

JQuery

TODO: look at these and rank.

Selector Stuff (HTML, CSS, XPATH)

https://www.w3schools.com/tags/

CSS selector related...
XPath related...

Other

some sort of web reference, not sure how helpful: http://help.dottoro.com/ljswgnnf.php

Avoid Common [Greasemonkey] Pitfalls

the article: https://www.oreilly.com/library/view/greasemonkey-hacks/0596101651/ch01s13.html
  • related: https://wiki.greasespot.net/Greasemonkey_Manual:Environment
  • related: https://wiki.greasespot.net/Troubleshooting_(Script_Authors)
  • beginning through “Going Deeper” talks about how Greasemonkey can’t just plunk down your userscript into the page to be executed; special sandboxing and wrapping needs to happen
    • “Greasemonkey 0.5 uses a little-known Firefox feature called XPCNativeWrappers. Instead of simply referencing the window object or the document object, Greasemonkey redefines these to be XPCNativeWrappers. An XPCNativeWrapper wraps a reference to the actual object, but doesn't allow the underlying object to redefine methods or intercept properties. This means that when a user script calls document.createElement, it is guaranteed to be the real createElement method, not some random method that was redefined by the remote page.”
    • “Greasemonkey 0.5 goes to great lengths to allow you to write what appears to be regular JavaScript code, and have it do what you would expect regular JavaScript code to do. But the illusion is not perfect. XPCNativeWrappers have some limitations that you need to be aware of. There are 10 common pitfalls to writing Greasemonkey scripts, and all of them revolve around limitations of XPCNativeWrappers.”
  • Pitfalls #{1,2} show cases where you need to refer to functions and objects directly rather than by their text name
  • Pitfalls #2 shows how you can’t do the usual javascript elmLink.onclick = my_func;, you’d have to do elmLink.addEventListener("click", my_func, true);
  • Pitfalls #{3,4,10}, can’t do short-form accessing/modifying of HTML children and attributes (and associated styles from CSS), have to do use more functional interface.
  • Pitfall #6: seems like some actions may require accessing the special UNSAFE wrappedJSObject property.
  • Pitfall #7: Javascript has default properties (like accessing window.location is the same as accessing window.location.href), but this does not work in GM.
  • Pitfall #{8,9}: sometimes you need to use the UNSAFE unsafeWindow, like when invoking a function defined by a script on the original page or doing a watch on window properties.


Written Scripts


Published Scripts


Unpublished Bloomberg Article Revealer (because it uses unsafeWindow)...

// ==UserScript==
// @name        bloomberg_article_revealer
// @namespace   JacobEgner
// @version     0.1
// @description Reveals article when blocked by "To continue reading this article, you must..."
// @match       https://www.bloomberg.com/view/articles/*
// @run-at document-end
// ==/UserScript== 
unsafeWindow._fence = undefined;
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)